vue-element-admin基礎(chǔ)模板中柒昏，已經(jīng)封裝好了使用svg圖標的組件显蝌，此組件在vue-ssr項目中也同樣適用末购，所在路徑為：@/icons破喻，在其中我們可以找到相關(guān)的代碼，所有在文件夾中的svg圖片注冊到全局中盟榴，可以在項目中任意地方使用曹质。所以圖標均可在 @/icons/svg∏娉。可自行添加或者刪除圖標羽德，所以圖標都會被自動導(dǎo)入，無需手動操作迅办。
原理：
使用require.context() 函數(shù)來創(chuàng)建自己的 context
可以給這個函數(shù)傳入三個參數(shù)：一個要搜索的目錄宅静，一個標記表示是否還搜索其子目錄， 以及一個匹配文件的正則表達式站欺。
webpack 會在構(gòu)建中解析代碼中的 require.context()
require.context('./test', false, /\.test\.js$/);
//（創(chuàng)建出）一個 context姨夹，其中文件來自 test 目錄纤垂，request 以 `.test.js` 結(jié)尾
require.context('../', true, /\.stories\.js$/);
// （創(chuàng)建出）一個 context，其中所有文件都來自父文件夾及其所有子級文件夾磷账，request 以 `.stories.js` 結(jié)尾峭沦。
使用方式：
<!-- icon-class 為 icon 的名字; class-name 為 icon 自定義 class-->
<svg-icon icon-class="password" class-name='custom-class' />
import Vue from 'vue'
import SvgIcon from '@/components/SvgIcon'// svg component
// register globally
Vue.component('svg-icon', SvgIcon)
const req = require.context('./svg', false, /\.svg$/)
const requireAll = requireContext => requireContext.keys().map(requireContext)
requireAll(req)
將這段代碼在main中引入，或者在createApp中使用够颠，就可以匹配到svg文件夾下的所有圖片熙侍，我們可以通過這些將svg圖片用webpack相關(guān)組件制作成svg-sprint雪碧圖
require.context("./test", false, /.test.js$/);
這行代碼就會去 test 文件夾（不包含子目錄）下面的找所有文件名以 .test.js 結(jié)尾的文件能被 require 的文件。
更直白的說就是 我們可以通過正則匹配引入相應(yīng)的文件模塊履磨。
require.context有三個參數(shù)：
directory：說明需要檢索的目錄
useSubdirectories：是否檢索子目錄
regExp: 匹配文件的正則表達式
之后我們增刪改圖標直接直接文件夾下對應(yīng)的圖標就好了蛉抓，什么都不用管，就會自動生成 svg symbol了剃诅。
我們找到引入的svg組件@/components/SvgIcon
<template>
<div v-if="isExternal" :style="styleExternalIcon" class="svg-external-icon svg-icon" v-on="$listeners" />
<svg v-else :class="svgClass" aria-hidden="true" v-on="$listeners">
<use :xlink:href="iconName" />
</svg>
</template>
<script>
import { isExternal } from '@/utils/validate'
export default {
name: 'SvgIcon',
props: {
iconClass: {
type: String,
required: true
},
className: {
type: String,
default: ''
}
},
computed: {
isExternal() {
return isExternal(this.iconClass)
},
iconName() {
return `#icon-${this.iconClass}`
},
svgClass() {
if (this.className) {
return 'svg-icon ' + this.className
} else {
return 'svg-icon'
}
},
styleExternalIcon() {
return {
mask: `url(${this.iconClass}) no-repeat 50% 50%`,
'-webkit-mask': `url(${this.iconClass}) no-repeat 50% 50%`
}
}
}
}
</script>
svg中無法使用{{}}渲染傳遞的值巷送，因此我們只能直接使用傳遞的iconClass，或者在computed中拼接字符串矛辕，我們可以看到iconName即為生成的svg名稱笑跛，由于拼接的字符串和iconfont中的svg格式不一樣，所以我們直接使用會沒有任何效果聊品，我們只需要把此處的格式改為return `#:-${this.iconClass}飞蹂，
然后我們在main.js中引入iconfont的svg文件iconfont.js，就可以在全局中使用iconfont中的svg標簽了翻屈。
圖標樣式通過svgClass來控制
