在vue中加入svg

项目技术：

Vue+MintUI+Cooking

背景：

MintUi里没有图标库，项目里很多图标使用的是png，加上没有UI同学，所以想加个图标库。

---

可以不看的前言
才开始就想引入iconfont的图标库，建个项目，然后引用地址或者下载图标包。
But：
1.引用地址在网络不好的时候就加载不出来，视觉体验不好，然后就想还是把图标库下载到项目里，每次更新就覆盖项目文件。
2.但这两点都有不好的地方，引用地址有很多的网络请求，下载图标库也要每次更新覆盖，会增加开发者负担。
3.然后想怎么把图标库搞成更换地址就能自动拉取更新到本地，但也没找到合适的方案。
4.发现iconfont的svg大发好，用什么下载什么，直接用于html，不存在网络请求，比png小很多，不失真，移动端兼容性好（PC不支持 IE8-，可是管他的IE呢），还可以用彩色的，自由度高太多了~

---

步骤：

1. 在package.json中加入svg的loader

"svg-sprite-loader": "^4.1.6"

2. 在cooking.conf.js中加入loader，webpack中要看下处理图片的loader里是否有svg格式，有的话要去掉，不然会报错~

cooking.add('loader.svg', {
  test: /\.svg$/,
  loaders: ['svg-sprite-loader'],
  options: {symbolId: 'icon-[name]'}
})

3. 写一个svnIcon的小组件

<template>
    <svg :class="`svg-icon ${className}`" aria-hidden="true" @click="tapIcon">
      <use :xlink:href="`#icon-${name}`"></use>
    </svg>
</template>

<script>
export default {
  name: 'crm-icon',
  props: {
    name: {
      type: String,
      required: true
    },
    className: {
      type: String,
      default: ''
    }
  },
  methods: {
    tapIcon () {
      this.$emit('click')
    }
  }
}
</script>

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

4. 在要放svg图标的文件夹里建个index.js，处理svg文件的批量导入

import Vue from 'vue'
import SvgIcon from 'src/components/SvgIcon'

/*
  require.context("./svg", false, /.svg.js$/);这行代码会去 svg 文件夹（不包含子目录）
  下面的找所有文件名以 .svg 结尾的文件能被 require 的文件。就是通过正则匹配引入相应的文件模块。

  require.context有三个参数：
  directory：说明需要检索的目录
  useSubdirectories：是否检索子目录
  regExp: 匹配文件的正则表达式
 */
// 全局注册
Vue.component('svg-icon', SvgIcon)

const requireAll = requireContext => requireContext.keys().map(requireContext)
const req = require.context('./svg', false, /\.svg$/)
requireAll(req)

5. 在main.js中引入index.js

import './assets/svgIcon/index'

6. 去下载喜欢的图标放在文件夹里，我的目录如下：

--src
  --assets
     --images
     --style
     --svgIcon
       --svg
         --xxxx.svg
       --index.js
  --coomponents
         ...

7. 在文件里使用, name 就是icon文件的名字~

<svg-icon  name="up"></svg-icon>

---

撒花完结(￣▽￣)~*