封装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-loader

npm 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" />

总结

  以上内容皆是我总结网上查询到的以及根据自身项目所得出的经验，可供参考。