注意：
如果按照下面配置正確發(fā)現(xiàn)svg依然無法顯示可能s'v'g-sprite-loader的版本過高，重新指定版本下載npm i svg-sprite-loader@3.8.0 --save-dev, 就可能正確顯示svg切厘。(vue3.0應(yīng)該是沒有這個問題的)
還有就是可能是創(chuàng)建的icons不在src根目錄（2.x最開始我嘗試在assets中創(chuàng)建文件來裝svg圖標(biāo)萨咳，但是并沒有顯示，換到根目錄就正常了,具體應(yīng)該是那里還是有點(diǎn)問題疫稿，3.0正常培他，按道理講應(yīng)該是放到assets中也是可以的以后空了研究暫時這樣）
一、安裝svg加載插件： npm i svg-sprite-loader -D
二遗座、定義svg組件
<template>
<svg aria-hidden="true">
<use :xlink:href="iconName"/>
</svg>
</template>
<script>
export default {
name: 'icon',
props: {
name: {
type: String,
default: 'home'
}
},
computed: {
iconName () {
return `#icon-${this.name}`
}
}
}
</script>
<style scoped>
svg {
fill: currentColor;
overflow: hidden;
}
</style>
默認(rèn)屬性設(shè)置可以根據(jù)自己需要設(shè)定舀凛。
三、在src根目錄創(chuàng)建裝svg的文件夾并創(chuàng)建index.js文件
文件結(jié)構(gòu)
index.js內(nèi)容
import Vue from 'vue'
import Icon from '@/components/icon'
Vue.component('icon', Icon)
//定義的一個遍歷函數(shù)后面會調(diào)用
const requireAll = requireContext => requireContext.keys().map(requireContext)
const req = require.context('./', false, /\.svg$/)/* require.context是node的文件加載函數(shù)第一個參數(shù)是指定的文件路徑途蒋，
‘./’這個是當(dāng)前文件路徑第二個參數(shù)一般默認(rèn)false就可以了大多數(shù)都用不到猛遍，
第三個參數(shù)是正則匹配你要加載的文件類型 */
requireAll(req)
這個文件沒有什么需要處理的基本都是這樣寫，如果對requireContext不是很理解可以google一下這個requireContext()就知道了号坡。
四螃壤、main.js中全局引用組件
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import './common/common.scss'
import '@/icons'//引入svg文件
import icon from './components/Icon.vue'//引入寫好的組件
Vue.config.productionTip = false
Vue.component('icon', icon)//全局調(diào)用
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})
五、webkit.base.conf.js規(guī)則修改：
添加這部分規(guī)則：
{
test: /\.svg$/,
loader: 'svg-sprite-loader',
include: [resolve('src/icons')],
options: {
symbolId: 'icon-[name]'
}
}
修改規(guī)則：
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: 'url-loader',
exclude: [resolve('src/icons')],
options: {
limit: 10000,
name: utils.assetsPath('img/[name].[hash:7].[ext]')
}
},
完成筋帖，現(xiàn)在可以全局調(diào)用：
<icon name="liked"></icon>
Vue3.0+ts配置（不用ts的話就和2.x相同只是規(guī)則寫法有點(diǎn)不同奸晴，可以直接參考規(guī)則寫法）
vue3.0+ts無法使用Vue.component()，所以index.ts文件內(nèi)容有點(diǎn)不同這里直接上代碼
index.ts
3.0 版本是可以將svg圖片放到assets里面到
然后是main.ts中全局注冊
main.ts文件
還有基本配置日麸，3.0是鏈?zhǔn)脚渲眉奶洌⑶倚枰惹宄裟J(rèn)到svg規(guī)則，不清除是不生效的代箭，（還有是寫在vue.config.js的墩划，自己建的文件）
chainWebpack: config => {
const svgRule = config.module.rule('svg')
svgRule.uses.clear()
svgRule
.test(/\.svg$/)
.include.add(resolve('./src/icons'))
.end()
.use('svg-sprite-loader')
.loader('svg-sprite-loader')
.tap(options => {
options = {
symbolId: 'icon-[name]'
}
return options
})
}
其它基本是和2.x相同的
（還有resolve這個別忘記定義）
function resolve(dir) {
return path.join(__dirname, dir)
}
