Paste all the contents of the ICONS folder in the SRC directory of the new project

  • Svg-icon is a global component defined and registered in SRC/ICONS /index.js.

  • Import ‘@/ ICONS ‘in main.js

The SRC /utils/validate.js file needs to be copied to the location of the new project

  • It requires additional coordination with [email protected] and the corresponding configuration in vue.config.js.

The configuration is as follows:

'use strict' const path = require('path') // eslint-disable-next-line space-before-function-paren function resolve (dir)  { return path.join(__dirname, dir) } module.exports = { chainWebpack(config) { // when there are many pages, it will cause too many meaningless requests config.plugins.delete('prefetch') // set svg-sprite-loader config.module .rule('svg') .exclude.add(resolve('src/icons')) .end() config.module .rule('icons') .test(/\.svg$/) .include.add(resolve('src/icons')) .end() .use('svg-sprite-loader') .loader('svg-sprite-loader') .options({ symbolId: 'icon-[name]' }) .end() } }Copy the code
  • Its use format< svG-icon icon-class=" filename "/>The file name in this case is the file name under SRC/ICONS/SVG

Restart the project and check whether the icon in the file is displayed on the page