1.vue-cli 脚手架项目环境下需要引入 icon

• 我先是在 iconfont 选好了需要用到的图标下载为 svg ，并在 src/assets 文件夹下创建了 icons 文件夹，把 svg 文件都放进去

如图所示

• 在组件 Nav.vue 中引入，发现 typescript 报错 如图所示

• 谷歌后找到了解决方法，在 shims-vue.d.ts 文件中添加配置

declare module "*.svg" {
  const content: string;
  export default content;
}

如图所示

• 问题解决 如图所示

2.使用 svg-sprite-loader

• 先打印出 x ，是个字符串，并不是我想要的 如图所示

• 安装 svg-sprite-loader 可以用 npm 安装也可以用 yarn，我一般使用 yarn

npm install svg-sprite-loader -D
# via yarn 
yarn add svg-sprite-loader -D // 我的选择

• 配置 vue.config.js 文件 官方文档说明需要配置 webpack.js ，但我的项目是通过 vue-cli 搭建的，项目下只有 vue.config.js ，所以需要改成 vue-cli 的配置。

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() // 包含 icons 目录
        .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) // 其他 svg loader 排除 icons 目录
  }
}

• 发现 Eslint 报错，需要解决 如图所示

• 修改 .eslintrc.js 配置 在 rules 属性新增以下内容即可

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

• 问题解决 如图所示

3. svg-sprite-loader 的效果

1. svg-sprite-loader 把 svg 文件变成了 symbol 标签（id = 'svg文件的名字'），然后把这个 symbol 放到 svg 里，再把这个 svg 放进 body 里。

如图所示

2. 为何要 symbol 标签再放入 svg 标签里面？因为引入了几个 svg 文件就会有几个 symbol。 如图所示

3. 现在，我可以通过 svg-use 标签来使用相应的 svg 图标文件了 如图所示