前言
在做前端后臺(tái)項(xiàng)目的時(shí)候經(jīng)常會(huì)用到很多 icon 圖標(biāo)迫肖，剛開(kāi)始還好，但隨著項(xiàng)目的不斷迭代，每次修改添加圖標(biāo)會(huì)變得很麻煩牺汤，而且總覺(jué)得不夠優(yōu)雅，于是開(kāi)始琢磨著有啥簡(jiǎn)單方便的工作流呢？
icon演變史
煉氣期：雪碧圖
image sprite，所謂的雪碧圖惋增，就是將多個(gè)圖片合成一個(gè)圖片，然后利用 css 的 background-position 定位顯示不同的 icon 圖標(biāo)罗侯。但這個(gè)也有一個(gè)很大的痛點(diǎn)器腋，維護(hù)困難溪猿。每新增一個(gè)圖標(biāo)钩杰，都需要改動(dòng)原始圖片，還可能不小心出錯(cuò)影響到前面定位好的圖片诊县，而且一修改雪碧圖讲弄，圖片緩存就失效了，久而久之你不知道該怎么維護(hù)了依痊。筑基期：font庫(kù)
Font Awesome避除，無(wú)法自定義制定圖標(biāo)，只能用別人的胸嘁。-
結(jié)丹期：阿里爸爸開(kāi)源圖庫(kù)
iconfont瓶摆，三種使用方式：-
unicode：原理是CSS3特性
@font-face，具體使用看文檔性宏！ -
font-class：原理是CSS3特性
@font-face群井，具體使用看文檔！ -
symbol：原理是
SVG Sprite毫胜，具體使用看下文书斜！
-
unicode：原理是CSS3特性
大乘期：上述方式都會(huì)，然后酵使，根據(jù)不同的場(chǎng)景使用不同的方式＜黾！口渔！
vue-cli3中配置并使用iconfont
- 第一階段：創(chuàng)建 icon-component 組件
<template>
<svg class="svg-icon" aria-hidden="true">
<use :xlink:href="iconName"></use>
</svg>
</template>
<script>
export default {
name: 'icon-svg',
props: {
iconClass: {
type: String,
required: true
}
},
computed: {
iconName() {
return `#icon-${this.iconClass}`
}
}
}
</script>
<style>
.svg-icon {
width: 1em;
height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
</style>
//引入svg組件
import IconSvg from '@/components/IconSvg'
//全局注冊(cè)icon-svg
Vue.component('icon-svg', IconSvg)
//在代碼中使用
<icon-svg icon-class="password" />
- 第二階段：使用 webpack插件
svg-sprite-loader样屠，將多個(gè) svg 打包成 svg-sprite。
為什么要打包svg缺脉？
現(xiàn)在所有的 svg-sprite 都在 iconfont.js 里面痪欲，皺巴巴的一塊，很不直觀枪向。最關(guān)鍵是勤揩，無(wú)法做到按需加載，自定義性太差了秘蛔，添加也麻煩陨亡。
svg-sprite-loader和url-loader沖突了怎么辦傍衡？
最安全合理的做法是使用 webpack 的 exclude 和 include ，讓svg-sprite-loader只處理你指定文件夾下面的 svg负蠕，url-loaer只處理除此文件夾之外的所以 svg蛙埂，這樣就完美解決了沖突的問(wèn)題。
- vue.config.js配置如下：
const path = require("path");
function resolve(dir) {
return path.join(__dirname,dir)
}
module.exports = {
// 配置webpack
chainWebpack: (config) => {
// 配置url-loader: 讓url-loader對(duì)src/assets/svg目錄下的svg圖片不做處理
config.module.rule("svg").exclude.add(resolve('src/assets/icons/svg')).end();
// 配置svg-sprite-loader：讓svg-sprite-loader對(duì)src/assets/svg目錄下的svg圖片不做處理
config.module.rule('icons')
.test(/\.svg$/)
.include.add(resolve('src/assets/icons/svg'))
.end()
.use('svg-sprite-loader')
.loader('svg-sprite-loader')
.options({
symbolId: 'icon-[name]'
})
.end();
}
}
- 使用到 webpack 的
require.context遮糖，實(shí)現(xiàn)自動(dòng)導(dǎo)入：
require.context("./test", false, /.test.js$/);
這行代碼就會(huì)去 test 文件夾（不包含子目錄）下面的找所有文件名以 .test.js 結(jié)尾的文件能被 require 的文件绣的。
更直白的說(shuō)就是 我們可以通過(guò)正則匹配引入相應(yīng)的文件模塊。require.context有三個(gè)參數(shù)：
- directory：說(shuō)明需要檢索的目錄
- useSubdirectories：是否檢索子目錄
- regExp: 匹配文件的正則表達(dá)式
import Vue from 'vue'
import IconSvg from "@/components/iconfont/IconSvg.vue";
Vue.component('icon-svg', IconSvg)
// 自動(dòng)導(dǎo)入svg
const requireAll = requireContext => requireContext.keys().map(requireContext)
const req = require.context('./svg', false, /\.svg$/)
requireAll(req);
-
具體使用：按需添加svg -> 使用
按需添加路徑.png
// 直接使用全局組件欲账，iconClass屬性寫(xiě)文件名
<icon-svg iconClass="recharge"/>
第三階段：優(yōu)化
了解svg sprites技術(shù)——移步張大大博客
壓縮SVG——移步張大大博客
#完結(jié)
鳴謝屡江，花褲衩大大、張?chǎng)涡翊蟠笕唬€有我自己惩嘉。
