使用svg-sprite-loader引入icon

本篇文章是在 vue-cli 脚手架项目环境下讲解

• 项目需要引入图标，我们在阿里妈妈iconfont下载合适的svg图标，放入assets/icons目录中

  
  引入svg

• 我们尝试在单文件页面xxx.vue中使用，发现typescript报错

  
  使用svg

• 配置好d.ts发现xxx.vue的报错得以解决

  
  d.ts中svg引入的配置

1.安装npm或者yarn

npm install svg-sprite-loader -D
# via yarn 
yarn add svg-sprite-loader -D

2. 更改vue.config.js webpack的配置

官方文档说，需要配置在webpack.js中 但是我们项目通过vue-cli搭建的，只有vue.config.js的配置文件。则需要通过官方文档的配置改成vue-cli需要的配置

webpack.js 但是我们这个vue-cli搭建的项目中只有vue.config

{
  test: /\.svg$/,
  loaders: [
    `svg-sprite-loader?${JSON.stringify({ ... })}`,
    'svg-transform-loader',
    'svgo-loader'
  ]
}

vue.config.js

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').loader('svg-sprite-loader').options({extract:false}).end()
    config.plugin('svg-sprite').use(require('svg-sprite-loader/plugin'), [{plainSprite: true}]) //配置loader外还有插件需要配置
    config.module.rule('svg').exclude.add(dir) // 其他 svg loader 排除（exclude） icons 目录

  }
}

3. svg-sprite-loader的神奇效果

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

import x from '@/assets/icons/labels.svg'
console.log(x); 

image.png

第2步：为什么要把symbol标签又放入svg‘里面呢，因为当引入的svg文件只一个的时候 就不只一个symbol

import x from '@/assets/icons/labels.svg'
import y from '@/assets/icons/money.svg'
console.log(x);  
console.log(y);  

image.png

第3步：我们可以通过svg-use标签来使用相应的svg图标文件了

<svg>
      <use xlink:href="#money"></use>
</svg>
<svg>
      <use xlink:href="#labels"></use>
</svg>

4 重复就是原罪

此时我们已经能通过svg里面嵌套有id的use标签来使用svg图标了，但是每个需要使用的svg文件都需要import

import x from '@/assets/icons/labels.svg'
import y from '@/assets/icons/money.svg'

我们时刻谨记着—重复就是原罪，一个项目引用icon少则几十多则上百。
so，我们必须工程化这个问题。

• 一次性引入所有的icon
• <svg><use xlink:href="#money"></use></svg> 程序猿崇尚的简洁美呢？！如此用法很是痛苦麻烦
  so 能不能封装成一个组件？？？

4.1 一次性引入所有的icon

4.2 简洁使用