1.在阿里巴巴图标上下载svg图标到本地
2.在项目里面封装组件
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'
}
},
styleExternalIcon() {
return {
mask: `url(${this.iconClass}) no-repeat 50% 50%`,
'-webkit-mask': `url(${this.iconClass}) no-repeat 50% 50%`
}
}
}
}
</script>
<style scoped>
.svg-icon {
width: 1.5em;
height: 1.5em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
.svg-external-icon {
background-color: currentColor;
mask-size: cover!important;
display: inline-block;
}
</style>
3.安装插件npm i svg-sprite-loader --save
4.在项目的src目录下面新建icons>svg文件夹存放下载的svg图标,并在icons文件夹下面新建一个index.js文件,如下图:
在index.js文件里面引入如下代码
import Vue from 'vue'
import SvgIcon from '@/components/SvgIcon'
// 注册到全局
Vue.component('svg-icon', SvgIcon)
const requireAll = requireContext => requireContext.keys().map(requireContext)
const req = require.context('./svg', false, /\.svg$/)
requireAll(req)
5.在配置vue.config.js文件里面配置如下代码
注意:resolve()里面路径不要写错了,结合自己项目里面的路径!!!
const path = require('path')
const resolve = dir => path.join(__dirname, dir)
module.exports = {
devServer:{
port:8099,
open:true
},
chainWebpack: (config) => {
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();
},
};