1. Icon needs to be introduced in vue-CLI scaffolding project environment

  • First, I selected the ICONS to be used in iconFont and downloaded them as SVG. Then I created the ICONS folder under SRC/Assets folder and put all the SVG files in it

As is shown in

  • Introduced in the component nav. vue, we find typescript errors

As is shown in

  • Google found a solution and added the configuration to the shims-vue.d.ts file
declare module "*.svg" {
  const content: string;
  export default content;
}

Copy the code

As is shown in

  • Problem solving

As is shown in

2. Using SVG – Sprite – loader

  • I’m going to print x, which is a string, not what I want

As is shown in

  • Install SVG – Sprite – loader

It can be installed using NPM or YARN. I usually use YARN

NPM install svG-sprite-loader -d # via yarn yarn add SVg-sprite-loader -d // My choiceCopy the code
  • Configure the vue.config.js file

The official document states that webpack.js needs to be configured, but my project is built through VUe-CLI, and there is only vue.config.js under the project, so IT needs to be changed to vue-CLI configuration.

const path = require('path') module.exports = { lintOnSave: false, chainWebpack: config => { const dir = path.resolve(__dirname,'src/assets/icons') config.module .rule('svg-sprite') .test(/.svg$/) .include.add(dir).end() // contains the ICONS directory .use('svg-sprite-loader-mod').loader('svg-sprite-loader-mod').options({extract:false}).end() config.plugin('svg-sprite').use(require('svg-sprite-loader/plugin'),[{plainSprite:true}]) Config.module.rule (' SVG ').exclude. Add (dir) // Other SVG loaders exclude ICONS directory}}Copy the code
  • Eslint reported an error and needs to be resolved

As is shown in

  • Modify the.eslintrc.js configuration

Add the following to the rules property

rules: {
  '@typescript-eslint/no-var-requires':0,
},
Copy the code

  • Problem solving

As is shown in

3. Effect of SVG-sprite-loader

  1. Svg-sprite-loader transforms the SVG file into a symbol tag (id = ‘name of SVG file’), then puts the symbol in SVG, and puts the SVG in body.

As is shown in

  1. Why put the symbol tag inside the SVG tag? Because of the introduction of several SVG files there will be several symbols.

As is shown in

  1. Now I can use the corresponding SVG icon file with the SVG-use tag

As is shown in