封装svg图片
前言
项目中有大量svg图片，为了方便引入，所以对svg进行了处理
一、svg是什么？
svg是可缩放矢量图形，是一种图片格式
二、使用步骤
1.创建icons文件夹
将icons文件夹放进src中，并创建一个svg文件夹和index.js，SvgIcon.vue以及svgo.yml
2.封装svg-icon(SvgIcon.vue)
<template><div v-if="isExternal" :style="styleExternalIcon" class="svg-external-icon svg-icon" v-on="$listeners" /><svg v-else :class="svgClass" aria-hidden="true" v-on="$listeners"><use :xlink:href="iconName" /></svg></template><script>// doc: https://panjiachen.github.io/vue-element-admin-site/feature/component/svg-icon.html#usageimport { isExternal } from '@/utils/validate'export default {name: 'SvgIcon',props: {iconClass: {type: String,required: true},className: {type: String,default: ''}},computed: {isExternal() {return isExternal(this.iconClass)},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: 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>3.校验传入的iconClass是否为外部链接
（若src文件夹下有utils则直接创建validate.js，没有则创建utils文件夹和validate.js）
/**校验传入的iconClass是否为外部链接* @param {string} path* @returns {Boolean}*/export function isExternal(path) {return /^(https?:|mailto:|tel:)/.test(path)}4.全局安装下载（index.js）
import Vue from 'vue'
import SvgIcon from '@/components/SvgIcon'// svg component// register globally
Vue.component("svg-icon", SvgIcon);const req = require.context('./svg', false, /\.svg$/)
const requireAll = requireContext =>{requireContext.keys().map(requireContext)
}
requireAll(req)svgo.yml
# replace default config# multipass: true
# full: trueplugins:# - name## or:# - name: false# - name: true## or:# - name:# param1: 1# param2: 2- removeAttrs:attrs:- 'fill'- 'fill-rule'
main.js
import '@/icons/index'5.下载插件批量处理svg图片
npm install svg-sprite-loadernpm install svgo-loader我下载的版本是
6.vue.config.js配置插件
const path = require('path')
module.exports = {chainWebpack: (config) => {let args = ''config.resolve.alias.set('@', resolve('src')).set('@assets', resolve('src/assets')).set('@views', resolve('src/views')).set('@components', resolve('src/components')).set('@images', resolve('src/assets/images')).set('@utils', resolve('src/utils'))config.module.rule('svg').exclude.add(path.join(__dirname, 'src/icons/svg')).end()config.module.rule('icons').test(/\.svg$/).include.add(path.join(__dirname, 'src/icons/svg')).end().use('svg-sprite').loader('svg-sprite-loader').options({symbolId: 'icon-[name]',svgo: {plugins: [{removeViewBox: false}]}}).end().use('svgo-loader').loader('svgo-loader').options({plugins: [{name: 'removeAttrs', // 必须指定name！params: {attrs: 'fill'}}]}).end()}
}7.使用svg
（将svg图片引入svg文件夹中并修改名字，然后使用以下代码方可使用）
//home是svg图片在svg文件夹中的名字，color是svg图片的颜色<svg-icon icon-class="home" color="#fff" />总结
以上内容皆是我总结网上查询到的以及根据自身项目所得出的经验，可供参考。