Dynamically import svgs

So we have a library with all our svg icons in it.

I’m looking for a way to import all these svgs dynamically and display them in our styleguide (storybook) to give a visual representation of which icons we have.

I was trying something like this but no luck:

const reqSvgs = require.context('./svgdir', true, /\.svg$/);
reqSvgs.keys().map((filename) => {
      return (
        <div className="icon">
            {reqSvgs(filename)}
        </div>
      );
})

But no luck, anyone any idea how i can make this work?

[mick-feller]

@jp1987 we actually moved away from this plugin and went with @svgr/webpack, the webpack piece is what we setup in storybook, but you can obviously convert this to regular webpack.

config.module.rules.push({
    test: /\.svg?$/,
    oneOf: [
      {
        use: [
          {
            loader: '@svgr/webpack',
            options: {
              prettier: false,
              svgo: true,
              svgoConfig: {
                removeViewBox: false
              },
              titleProp: true,
            },
          },
        ]
      }
    ]
  })

And then in our code we actually do this to generate an object of all our SVG’s in a folder:

const getSVGS = () => {
  const context = require.context('../../icons', true, /\.svg$/);
  const obj = {};
  context.keys().forEach((key) => {
    obj[key] = context(key).default;
  });
  return obj;
};

[jp1987]

@yairEO @mick-feller did you ever fix this?

I’m trying to import inline:

import(`../Icons/${name}.svg`).then(icon => {
   console.log(icon);
})

Which returns the module.

Webpack config:

{
  test: /\.svg$/,
  use: ['babel-loader']
}

And running version 2.0.1