vue中封装svg-icon组件

www.cnblogs.com/lhjfly/p/10…

1、安装svgo-loader、svg-sprite-loader npm i svgo-loader svg-sprite-loader

2、components文件下新建SvgIcon组件

<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';
				}
			}
		}
	};
</script>

<style scoped>
	.svg-icon {
		width: 1em;
		height: 1em;
		vertical-align: -0.20em;
		fill: currentColor;
		overflow: hidden;
	}
</style>

3、在src目录下新建icons目录以及svg子目录

其中index.js内容为

import Vue from 'vue';
import SvgIcon from '@/components/svgIcon'; // svg组件

// register globally
Vue.component('svg-icon', SvgIcon);

/*
require.context有三个参数：
directory：说明需要检索的目录
useSubdirectories：是否检索子目录
regExp: 匹配文件的正则表达式
 */

const req = require.context('./svg', false, /\.svg$/); //查找svg目录下以'.svg'结尾的文件
const requireAll = requireContext => requireContext.keys().map(requireContext);
requireAll(req);
export default req;

4、在main.js引入import '@/icons'

5、vueconfig.js配置

 config.module.rules.delete("svg"); //重点:删除默认配置中处理svg
		   config.module.rule('svg-sprite-loader')
		         .test(/\.svg$/)
		         .include
		         .add(resolve('src/icons')) //处理svg目录
		         .end()
		         .use('svg-sprite-loader')
		         .loader('svg-sprite-loader')
		         .options({
		           symbolId: 'icon-[name]'
		         })
		   				 .end()
		   				          .use('svgo-loader')
		   				          .loader('svgo-loader')
		   				          .options({
		   				              plugins: [
		   				                   {
		   				                          name: 'removeAttrs',
		   				                          params: {
		   				                              attrs: 'fill'
		   				                              }
		   				                          }
		   
		   				              ]
		   				          })
		   				          .end();