Question: Generate SVG sprite without JS import

Is there a way to generate the sprite without importing each icon in my JavaScript file?

This is my webpack config and it does not work unless I use import icon from './path/to/icon' although I set include.

module: {
    rules: [
      {
        test: /\.svg$/,
        loader: 'svg-sprite-loader',
        include: path.resolve(__dirname, 'source/assets/images/icons'),
        options: {
          extract: true,
          spriteFilename: 'assets/images/icons.svg',
        },
      },
    ],
  },
  plugins: [
    new SpriteLoaderPlugin(),
  ],

[kisenka]

You can create entrypoint dynamically:

const glob = require('glob').sync;

module.exports = {
  entry: {
    sprite: glob('./source/assets/images/icons/*.svg')
  },

  module: {
    rules: [
      {
        test: /\.svg$/,
        loader: 'svg-sprite-loader',
        include: path.resolve(__dirname, 'source/assets/images/icons'),
        options: {
          extract: true,
          spriteFilename: 'assets/images/icons.svg'
        },
      },
    ],
  },

  plugins: [
    new SpriteLoaderPlugin()
  ]
};

[kisenka]

You can use require.context webpack feature. Somewhere in entrypoint of your application:

const svgModules = require.context('source/assets/images/icons', false, /\.svg$/);
svgModules.keys().forEach(svgModules);