1. svg-sprite-loader
安裝loader處理svg文件
npm install svg-sprite-loader --save
2. 在src中新建文件夾icons
icons/svg 存放svg圖標(biāo)
icons/index.js 全局注冊svg組件，導(dǎo)入所有svg圖標(biāo)
image.png
// icons/index.js
import Vue from 'vue'
import SvgIcon from '@/components/SvgIcon/index.vue'// svg component
// register globally
Vue.component('SvgIcon', SvgIcon)
const req = require.context('./svg', false, /\.svg$/)
const requireAll = requireContext => requireContext.keys().map(requireContext)
requireAll(req)
3. 創(chuàng)建svg組件
// src/components/ScgIcon/index.vue
<template>
<svg :class="svgClass" aria-hidden="true" v-on="$listeners">
<use :xlink:href="iconName" />
</svg>
</template>
<script>
export default {
name: 'SvgIcon',
props: {
iconClass: {
type: String,
required: true
},
className: {
type: String,
default: ''
}
},
computed: {
iconName () {
return `#icon-${this.iconClass}`
},
svgClass () {
if (this.className) {
return 'svg-icon ' + this.className
} else {
return 'svg-icon'
}
}
}
}
</script>
<style scoped>
.svg-icon {
width: 1em;
height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
</style>
4. 在vue.config.js中使用loader
首先找到原有的svg規(guī)則，將src/icons文件夾排除（exclude），添加一個(gè)新的規(guī)則icons，讓其規(guī)則包含（include）src/icons文件夾，并使用svg-sprite-loader處理這些文件，會給這些文件生成一個(gè) icon-[name]唯一標(biāo)識，name為svg文件名
const path = require('path')
function resolve (dir) {
return path.join(__dirname, dir)
}
module.exports = {
devServer: {
port: 8080,
open: true
},
chainWebpack (config) {
// set svg-sprite-loader
config.module
.rule('svg')
.exclude.add(resolve('src/icons'))
.end()
config.module
.rule('icons')
.test(/\.svg$/)
.include.add(resolve('src/icons'))
.end()
.use('svg-sprite-loader')
.loader('svg-sprite-loader')
.options({
symbolId: 'icon-[name]'
})
.end()
}
}
5. 在main.js中導(dǎo)入icons/index.js
// main.js
import '@/icons/index' // svg
6. 在頁面中使用組件
<SvgIcon iconClass="eye-open"></SvgIcon>
直接使用svg文件名作為iconClass
更多文章關(guān)注：辰漪博客
