Hey there! Glad you've got svg-sprite-loader working smoothly—manual imports can get super tedious as your icon library grows, so let's fix that with automatic bulk imports. Here are two reliable approaches depending on your project setup:

This method doesn't require extra plugins, just a tiny bit of code to auto-scan and import all your SVGs.

Step 1: Create an Icon Entry File #

Make a new file (like src/icons/index.js) to handle the auto-import logic:

// Auto-import all SVG files in the target folder (and subfolders)
const svgContext = require.context('@/assets/svg', true, /\.svg$/)

// Iterate through every matched SVG file and import it
svgContext.keys().forEach(filePath => svgContext(filePath))

• Breakdown:
  • require.context('@/assets/svg', true, /\.svg$/): Creates a context that looks for .svg files in src/assets/svg (including subfolders, thanks to the true flag).
  • The loop runs through every found file and triggers the import.

Step 2: Import This File in Your App's Entry Point #

Add this line to your main entry file (like src/main.js for Vue, src/index.js for React):

import '@/icons'

Now, every time your app starts, it will automatically import all SVGs in your target folder—no more manual imports!

To make using icons even easier, pair the auto-import with a clean symbolId configuration in your Webpack setup (this ensures your icons have predictable IDs for use in templates):

Update Your Webpack Config #

If you're using Vue CLI, edit vue.config.js; for plain Webpack, edit webpack.config.js:

const path = require('path')

module.exports = {
  module: {
    rules: [
      {
        test: /\.svg$/,
        include: path.resolve(__dirname, 'src/assets/svg'), // Target only your icon folder
        use: [
          {
            loader: 'svg-sprite-loader',
            options: {
              symbolId: 'icon-[name]' // Sets icon ID to `icon-<filename>` (e.g., `icon-up` for up.svg)
            }
          },
          'svgo-loader' // Optional: Compresses SVGs to reduce file size
        ]
      }
    ]
  }
}

Use Your Auto-Imported Icons #

Once set up, you can use any icon in your templates like this:

<svg class="icon" aria-hidden="true">
  <use xlink:href="#icon-up"></use>
</svg>

Just replace icon-up with the filename of your SVG (without the .svg extension).

Pro Tips #

• If you don't want to include subfolders, change the second argument in require.context to false.
• Adjust the regex (/\.svg$/) if you need to filter specific icons (e.g., /icon-.+\.svg$/ to only import icons starting with icon-).

内容的提问来源于stack exchange，提问作者Victor