項(xiàng)目技術(shù)：
Vue+MintUI+Cooking
背景：
MintUi里沒有圖標(biāo)庫，項(xiàng)目里很多圖標(biāo)使用的是png，加上沒有UI同學(xué)，所以想加個(gè)圖標(biāo)庫。
可以不看的前言
才開始就想引入iconfont的圖標(biāo)庫，建個(gè)項(xiàng)目，然后引用地址或者下載圖標(biāo)包。
But：
1.引用地址在網(wǎng)絡(luò)不好的時(shí)候就加載不出來，視覺體驗(yàn)不好，然后就想還是把圖標(biāo)庫下載到項(xiàng)目里，每次更新就覆蓋項(xiàng)目文件。
2.但這兩點(diǎn)都有不好的地方，引用地址有很多的網(wǎng)絡(luò)請(qǐng)求，下載圖標(biāo)庫也要每次更新覆蓋，會(huì)增加開發(fā)者負(fù)擔(dān)。
3.然后想怎么把圖標(biāo)庫搞成更換地址就能自動(dòng)拉取更新到本地，但也沒找到合適的方案。
4.發(fā)現(xiàn)iconfont的svg大發(fā)好，用什么下載什么，直接用于html，不存在網(wǎng)絡(luò)請(qǐng)求，比png小很多，不失真，移動(dòng)端兼容性好（PC不支持 IE8-，可是管他的IE呢），還可以用彩色的，自由度高太多了~
步驟：
- 在package.json中加入svg的loader
"svg-sprite-loader": "^4.1.6"
- 在cooking.conf.js中加入loader，webpack中要看下處理圖片的loader里是否有svg格式，有的話要去掉，不然會(huì)報(bào)錯(cuò)~
cooking.add('loader.svg', {
test: /\.svg$/,
loaders: ['svg-sprite-loader'],
options: {symbolId: 'icon-[name]'}
})
- 寫一個(gè)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圖標(biāo)的文件夾里建個(gè)index.js，處理svg文件的批量導(dǎo)入
import Vue from 'vue'
import SvgIcon from 'src/components/SvgIcon'
/*
require.context("./svg", false, /.svg.js$/);這行代碼會(huì)去 svg 文件夾（不包含子目錄）
下面的找所有文件名以 .svg 結(jié)尾的文件能被 require 的文件。就是通過正則匹配引入相應(yīng)的文件模塊。
require.context有三個(gè)參數(shù)：
directory：說明需要檢索的目錄
useSubdirectories：是否檢索子目錄
regExp: 匹配文件的正則表達(dá)式
*/
// 全局注冊(cè)
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'
- 去下載喜歡的圖標(biāo)放在文件夾里，我的目錄如下：
--src
--assets
--images
--style
--svgIcon
--svg
--xxxx.svg
--index.js
--coomponents
...
- 在文件里使用, name 就是icon文件的名字~
<svg-icon name="up"></svg-icon>
撒花完結(jié)(￣▽￣)~*
