项目技术：
Vue+MintUI+Cooking
背景：
MintUi里没有图标库，项目里很多图标使用的是png，加上没有UI同学，所以想加个图标库。
可以不看的前言
才开始就想引入iconfont的图标库，建个项目，然后引用地址或者下载图标包。
But：
1.引用地址在网络不好的时候就加载不出来，视觉体验不好，然后就想还是把图标库下载到项目里，每次更新就覆盖项目文件。
2.但这两点都有不好的地方，引用地址有很多的网络请求，下载图标库也要每次更新覆盖，会增加开发者负担。
3.然后想怎么把图标库搞成更换地址就能自动拉取更新到本地，但也没找到合适的方案。
4.发现iconfont的svg大发好，用什么下载什么，直接用于html，不存在网络请求，比png小很多，不失真，移动端兼容性好（PC不支持 IE8-，可是管他的IE呢），还可以用彩色的，自由度高太多了~
步骤：
- 在package.json中加入svg的loader
"svg-sprite-loader": "^4.1.6"
- 在cooking.conf.js中加入loader，webpack中要看下处理图片的loader里是否有svg格式，有的话要去掉，不然会报错~
cooking.add('loader.svg', {
test: /\.svg$/,
loaders: ['svg-sprite-loader'],
options: {symbolId: 'icon-[name]'}
})
- 写一个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>
- 在要放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)
- 在main.js中引入index.js
import './assets/svgIcon/index'
- 去下载喜欢的图标放在文件夹里，我的目录如下：
--src
--assets
--images
--style
--svgIcon
--svg
--xxxx.svg
--index.js
--coomponents
...
- 在文件里使用, name 就是icon文件的名字~
<svg-icon name="up"></svg-icon>
撒花完结(￣▽￣)~*
