1、安装插件svg-sprite-loader:
npm i -D svg-sprite-loader
2、根目录下创建全局的vue.config.js,内容如下:
const path = require('path')
module.exports = {
chainWebpack: config => {
const svgRule = config.module.rule('svg')
svgRule.uses.clear()
svgRule
.test(/\.svg$/)
.include.add(path.resolve(__dirname, './src/icons')).end()
.use('svg-sprite-loader')
.loader('svg-sprite-loader')
.options({
symbolId: 'icon-[name]'
})
const fileRule = config.module.rule('file')
fileRule.uses.clear()
fileRule
.test(/\.svg$/)
.exclude.add(path.resolve(__dirname, './src/icons'))
.end()
.use('file-loader')
.loader('file-loader')
}
}
3、在src--components文件中创建SvgIcon.vue文件,内容如下:
<template>
<svg :class="svgClass" aria-hidden="true">
<use :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;
}
.svg-external-icon {
background-color: currentColor;
mask-size: cover !important;
display: inline-block;
}
</style>
4、src下创建icons文件夹,里面包括svg文件夹以及index.js文件,svg文件夹存放svg图片,index.js内容如下:
import Vue from 'vue'//引入组件
import SvgIcon from '@/components/SvgIcon.vue'// svg组件
//全局注册组件
// 这里的icon 代表你要创建的标签名,你也可以自己命名,比如: "svg-icon"
Vue.component('icon', SvgIcon)//此处递归获取.svg文件
// Vue.component('svg-icon', SvgIcon) //此处递归获取.svg文件
const requireAll = requireContext => requireContext.keys().map(requireContext)
const req = require.context('./svg', false, /\.svg$/)
requireAll(req)
5、在src下新建文件夹utils及文件validate.js:
/**
* @param {string} path
* @returns {Boolean}
*/
export function isExternal (path) {
return /^(https?:|mailto:|tel:)/.test(path)
}
/**
* @param {string} str
* @returns {Boolean}
*/
export function validUsername (str) {
const validmap = ['admin', 'editor']
return validmap.indexOf(str.trim()) >= 0
}
6、main.js 引入
import '@/icons'
7、使用
// <svg-icon icon-class="find"/>
<icon icon-class="find"/>