Storybook loads .svg with file-loader instead to load it as React component

user_5647856 0
Viewed 467

So what I am trying to have, is to import any .svg file as React component to be used as <SomeIcon /> instead of this I always get path to the file to be used like <img src={pathToIcon} />

What I was trying to do was to add webpack config file to .storybook folder (or add webpackFinal to main.js):

module.exports = ({ config }) => {
 config.module.rules.push({
   test: /\.svg$/,
   exclude: /node_modules/,
   include: /assets/,
   use: [
     {
       loader: "@svgr/webpack",
       options: {
         icon: true,
       },
     },
     //   {
     //     loader: "babel-loader",
     //   },
     //   {
     //     loader: "react-svg-loader",
     //     options: {
     //       jsx: true,
     //     },
     //   },
   ],
 });

 return config;
};

Both versions simply does not work (not commented loader, and commented loaders) and I always get the path to .svg like the loader does not affect .svgs at all.

I am lack of ideas here and can't find any info how to do this.

storybook webpack reactjs svg
1 Answers

It appears that there is already defined loader for svg (and not olny) which I missed somehow working on it 2 weeks ago and today not even checked it.

Anyway, removing this from config.module.rules made my loader to start working (@svgr/webpack)

{
    test: /\.(svg|ico|jpg|jpeg|png|apng|gif|eot|otf|webp|ttf|woff|woff2|cur|ani|pdf)(\?.*)?$/,
    type: 'asset/resource',
    generator: { filename: 'static/media/[path][name][ext]' }
  },
user_56478560
Related