<template>
<svg aria-hidden="true" class="svg-icon" v-bind="$attrs" @click="svgChong">
<use :xlink:href="icon" />
</svg>
</template>
<script>
export default {
name: 'svg-icon',
props: {
name: {
type: String,
//required: true
}
},
computed: {
icon () {
return `#icon-${this.name}`
}
},
methods:{
svgChong(){
this.$emit('svgChong')
}
}
}
</script>
<style scoped>
.svg-icon {
vertical-align: -0.15em;
fill: currentColor;
/* 通过给svg 图形元素设置fill= currentColor 图形元素的颜色会自动继承父级color的颜色 */
overflow: hidden;
}
</style>
2、与components同级新建文件icons ,里面新建index.js和svg文件夹,svg文件夹存放需要处理的svg图片,不需要处理的svg不放入里面
import Vue from 'vue'
import IconSvg from '@/components/IconSvg/index.vue'// svg组件
// register globally
Vue.component('svg-icon', IconSvg)
//全局引入所有.svg文件
const req = require.context('./svg', false, /\.svg$/)
const requireAll = requireContext => requireContext.keys().map(requireContext)
requireAll(req)
3、在main.js引入icons文件
import '@/icons'
4、在vue.config.js添加
const { defineConfig } = require('@vue/cli-service') const path = require('path') module.exports = defineConfig({ chainWebpack: (config) => { // 内置的svg处理排除指定目录下的文件 config.module.rule('svg').exclude.add(path.resolve('src/icons/svg')).end() config.module.rule('svg-sprite-loader') .test(/\.svg$/) .include.add(path.resolve('src/icons/svg')) .end() .use('svg-sprite-loader') .loader('svg-sprite-loader') .options({ symbolId: 'icon-[name]' }) } })
5、使用:name为 svg图片名字,例如: userInfo-422.svg
<svg-icon name="userInfo-422" style="width:.18rem;height:.14rem;"/>