如何在Vue项目中引入SVG

一、下载图标
当我们项目中需要引用icons时，可以去阿里巴巴矢量图标库官网下载格式为SVG

点击svg下载

二、添加图标文件
然后在项目assets文件中创建icons文件，将下载的SVG（文件名：label.svg"）添加到icons中。在其他组件引入时候需要添加路径：
import x from "@/assets/icons/label.svg"

2.png

提示出现TS2307，说明是typescript出现问题了。在文件shims-vue.d.ts后面添加如下代码：

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

这时，引入import就不会报错了，如下：

4.png

在控制台打印出console.log(x)，如下：

5.png

得到是一段字符串的路径，这不是我们想要的，我们想要得到的是使用SVG的方法。利用svg-sprite-loader库解决这个问题

三、安装svg-sprite-loader库和配置
搜 svg-sprite-loader这样的一个库，按照库的内容在目录中进行安装和操作：
1、安装：yarn add svg-sprite-loader -D

2、配置：
webpack版的配置如下部分截图（具体看文档）

官网给的配置是webpack的

我们用的是vue-cli，需要对上面的配置进行转换。可以将转换配置在vue.config.js文件中替换如下：

/* eslint-disable */
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()
      .use('svg-sprite-loader').loader('svg-sprite-loader').options({extract:false}).end()
    config.plugin('svg-sprite').use(require('svg-sprite-loader/plugin'),[{plainSprite:true}])
    config.module.rule('svg').exclude.add(dir)
  },
}

注意：
1、这里可能出现一些代码语法报错等，加这句/* eslint-disable */表示忽视这些语法报错。最好办法还是根据提示内容进行代码修改。

四、使用svg-sprite-loader
1、如果svg就一个，可以按照下图方法进行导入：

import x from "@/assets/icons/label.svg";
console.log(x)

8.png

最后关联在模板中，就能显示在页面中

  <svg>
    <use xlink:href="#label"/>
  </svg>

9.png

1、如果svg有多个，就可以修改成下面代码：

let importAll=(requireContext:__WebpackModuleApi.RequireContext)=>requireContext.keys().forEach(requireContext);
try{
  importAll(require.context('../assets/icons',true,/\.svg$/));//../assets/icons是文件路径
}catch (error) {
  console.log(error)
}

10.png

五、svg图标的样式
可以去官网中：帮助--相关文章--代码应用--找到symbol样式通用代码

11.png

六、使用svg图标，有哪些坑
1、如果下载svg文件包，里面颜色固定死了，就需要我们去删去其中fill内容的颜色内容。

删处fill='red',就能定义颜色了
如何做到批量删除，就需要在vue.config.js中添加如下代码，同时下载svgo-loader库：yarn add svgo-loader@4.1.2 -D

 .use('svgo-loader').loader('svgo-loader')
      .tap(options=>({...options,plugins:[{removeAttrs:{attrs:'fill'}}]})).end()

如图所在添加位置

2、当你往组件需要引用外部SCSS全局样式组件的时候，引入时候，可能会发生错误。
@import "~@/assets/styles/helper.scss"; //代码可能报错
造成这个原因：
第一是我们没有去设置好配置：file--settting--搜webpack--munually--找到自己目录名字-node_modules--@vue\cli-service--webpack.config.js--点击OK完成。
第二就是svg-sprite-loader库的问题，目前有人已经更新这个库问题，可以下载svg-sprite-loader-mod库。
yarn add svg-sprite-loader-mod@4.1.6-mod1 -D
同时将vue.config.js文件中svg-sprite-loader改成svg-sprite-loader-mod