vue-element-admin引入svg组件

vue-element git 地址

1.webpack.base.conf.js配置
在mudule.rules中加入

	{
	    test: /\.svg$/,
	    loader: 'svg-sprite-loader',
	    //使用这个loader需要下载此模块
	    include: [resolve('src/icons')],
	    options: {
	    symbolId: 'icon-[name]'
	}

2.创建SvgIcon组件，src目录下的components

index.vue

	<template>
		<svg :class="svgClass" aria-hidden="true" v-if="login">
			<use :xlink:href="iconName"></use>
		</svg>
		<i :class="iconClass" v-else></i>
	</template>
	
	<script>
	export default {
		name: 'svg-icon',
		props: {
			iconClass: {
				type: String,
				required: true
			},
			className: {
				type: String
			},
			login: {
				type: Boolean
			}
		},
		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.15em;
			fill: currentColor;
			overflow: hidden;
		}
		
		i {
			font-size: 16px;
			padding-right: 8px
		}
	</style>

3.引入icons

在src目录下添加icons文件夹

index.js

	import Vue from 'vue'
	
	//引入组件
	import SvgIcon from '@/components/SvgIcon'// svg组件
	
	//全局注册组件
	Vue.component('svg-icon', SvgIcon)
	
	//此处递归获取.svg文件
	const requireAll = requireContext => requireContext.keys().map(requireContext)
	const req = require.context('./svg', false, /\.svg$/)
	requireAll(req)

4.使用svg-icon组件