electron-typescript-react icon indicating copy to clipboard operation
electron-typescript-react copied to clipboard

Refactor webpack to accept svg imports

Open caiulucas opened this issue 2 years ago • 0 comments

The problem:

I found out that the svg imports was not working:

Screenshot_20220324_111518

Screenshot_20220324_111654

The solution

What I did was change the rules.webpack.js file adding in file-loader plugin another file type (svg):

 {
    test: /\.(png|jpe?g|gif|svg)$/i,
    loader: 'file-loader',
    options: {
      name: '[path][name].[ext]',
    },
  }

Then, in src/@types/image.d.ts I added a new declaration:

declare module '*.png';
declare module '*.jpeg';
declare module '*.jpg';
declare module '*.gif';

// New declaration
declare module '*.svg';

And now we can import svg files directly in code :)

caiulucas avatar Mar 24 '22 14:03 caiulucas