Vue项目使用svg之svg-sprite-loader详细使用

项目中为了体验好、性能优、资源丰富等原因经常会用svg这种矢量图，但是svg不能直接像image标签一样直接使用，这就需要前端的同学自己处理了。
svg有以下优点：

1. svg放大不失真,png，jpg会出现失真现象
2. svg的体积非常小，对有大量图标图片的页面体验友好
3. 图像文件可读，易于修改和编辑
4. svg文件还可嵌入JavaScript脚本来控制svg对象

那这么好的东西怎么在前端vue项目中使用呢？ 下面就来个最佳实践：

1.安装svg-sprite-loader

 npm install svg-sprite-loader

2、webpack 配置（vue.config.js）

chainWebpack: config => {
    // 别名设置
    config.resolve.alias
      .set('@', resolve('src'))
      .set('@assets', resolve('src/assets'))
      .set('@views', resolve('src/views'))
      .set('@components', resolve('src/components'))
      .set('@images', resolve('src/assets/images'))
      .set('@utils', resolve('src/utils'))

    config.module
      .rule('svg')
      .exclude.add(path.join(__dirname, 'src/assets/icons/svg'))
      .end()

    config.module
      .rule('icons')
      .test(/\.svg$/)
      .include.add(path.join(__dirname, 'src/assets/icons/svg'))
      .end()
      .use('svg-sprite')
      .loader('svg-sprite-loader')
      .options({
        symbolId: 'icon-[name]',
        svgo: {
          plugins: [
            {
              removeViewBox: false
            }
          ]
        }
      })
      .end()
  },

注意：这里的chainWebpack对象是跟devServer是平级的对象

3、创建、注册和导出svg的组件

1. 创建svg组件：这里我直接在view下面的目录创建了svg组件文件夹，当然你可以选在在common或者components下
   
   代码为：

<template>
  <i v-if="iconFileName.indexOf('el-icon-') === 0" :class="iconFileName" />
  <svg v-else class="svg-icon" aria-hidden="true" v-on="$listeners">
    <use :xlink:href="`#icon-${iconFileName}`" />
  </svg>
</template>

<script>
export default {
  name: 'SvgIcon',
  props: {
    iconFileName: {
      type: String,
      required: true
    }
  }
}
</script>

<style scoped>
.svg-icon {
  width: 14px;
  height: 14px;
  overflow: hidden;
  /* vertical-align: -0.15em; */
  fill: currentColor;
}
</style>

2. 注册svg组件：
   
   具体代码如下：

import Vue from 'vue'
import SvgIcon from '@/svgIcon'
Vue.component('svg-icon', SvgIcon)

const req = require.context('@/assets/icons/svg', false, /\.svg$/)
const requireAll = requireContext => {
  // requireContext.keys()数据：svg文件夹下面的
  requireContext.keys().map(requireContext)
}
requireAll(req)

4、main.js

//引入整个icons,
import './assets/icons/index'

当然你你也可以在main中引入并注册svg组件，我是为了方便维护把功能抽到了icon文件下面了

5、组件中使用

  <svg-icon class="image" icon-file-name="heart"></svg-icon>

组件属性的icon-file-name的值就是svg文件的名字。

好的，就可以方便的使用svg了