A plug-in for SVG-Sprite-Loader, which automatically generates symbol tags and inserts HTML from imported SVG files, makes it easy to use SVG-Sprite technology in templates.

Benefits of using SVG-Sprite

If you don’t know what SVG-Sprite is, you can refer to zhang Xinxu’s article: Future Hot: Introduction to SVG Sprite technology

  • Clean page code
  • The call can be repeated anywhere using the ID
  • Each SVG icon can be changed in size and color

Installing a plug-in

npm install svg-sprite-loader --save-devCopy the code

Add a loader that handles SVG to vue.config.js:

const path = require('path')

function resolve(dir) {
  return path.join(__dirname, '. ', dir)
}

module.exports = {
  chainWebpack: config => {
    config.module.rules.delete("svg"); //const svgRule = config.module.rule(const svgRule = const svgRule)'svg')
    //svgRule.uses.clear()
    config.module
      .rule('svg-sprite-loader')
      .test(/\.svg$/)
      .include
      .add(resolve('src/icons') // Handle SVG directory.end().use()'svg-sprite-loader')
      .loader('svg-sprite-loader')
      .options({
        symbolId: 'icon-[name]'
      })
  },
  configureWebpack: () => ({
    // resolve: {
    //   alias: require('./alias.config').webpack
    // }
    // module: {
    //   rules: [{
    //     test: /\.svg$/,
    //     use: [{
    //       loader: "svg-sprite-loader",
    //       options: {
    //         symbolId: 'icon-[name]'//} //}] //}] //}})}Copy the code

We don’t see the symbol tag in the body.

This means that only our imported SVG files need to go through THE SVG-Sprite-Loader, so we put these SVG files in one directory, I put in SRC/ICONS

Then you introduce the SVG you need where you need it

import './src/icon/target.svg';Copy the code

Restart the project and finally see the symbol tag in the HTML!

Once it’s configured, it’s ready to use. It’s easy to use, and it’s much simpler and cleaner to use svG-Sprite than the original methods of inserting SVG ICONS (img SRC or writing the entire SVG to HTML) :



1
Copy the code
 
<svg><use xlink:href="#target" /></svg>
Copy the code

Well, just one line. Xlink: pass the SVG ID in the xlink:href. Since we use the file name as the symbol ID in the configuration file above, pass the ID in the SVG name of the icon you want to display.

Automatic import

You will notice that to insert an icon, you have to import it and repeat the process for each one. So let’s import all the SVG files from SRC/ICONS/SVG/automatically.

Webpack can help us:

// requires and returns all modules that match
const requireAll = requireContext => requireContext.keys().map(requireContext);

// import all svg
const req = require.context('./assets/svg'.true, /\.svg$/);
requireAll(req);Copy the code

Example code:

Import ‘./ ICONS /index’ from main.ts



From ICONS /index.js, import all SVG from ICONS/SVG and register the global component SvgIcon



//SvgIcon component code <template> < SVG :class="svgClass" aria-hidden="true">
    <use :xlink:href="iconName"/>
  </svg>
</template>

<script>
export default {
  name: 'SvgIcon',
  props: {
    iconClass: {
      type: String,
      required: true
    },
    className: {
      type: String,
      default: ' '
    }
  },
  computed: {
    iconName() {
      return `#icon-${this.iconClass}`
    },
    svgClass() {
      if (this.className) {
        return 'svg-icon ' + this.className
      } else {
        return 'svg-icon'} } } } </script> <style scoped> .svg-icon { width: 1em; height: 1em; Vertical - align: 0.15 em. fill: currentColor; overflow: hidden; } </style>Copy the code

Then you can use the build



For detailed usage of require.context, refer to the WebPack documentation: Dynamic requires

This way, whenever we modify or add a new SVG, we drop the file into this directory and the plug-in automatically generates the corresponding symbol tag for us