Front-end——vue封装图标库

如果element中的图标不够用时，就需要自己准备图标，下面就结合 iconfont（阿里矢量库）封装图标

方法1：使用图标对应的svg代码

在element-ui标签中，加入svg代码，就可以使用

效果：

方法2：下载使用

（1）进入项目目录，引入svg

（2）下载svg资源，统一存储，将其导入，以组件形式使用

import shops from '@/components/icons/svg/shops.svg?inline';

效果展示：

法2麻烦在，每个图标需要使用时都需要import一次

3、封装图标库

定义一个模块，让其根据所选图片修改图标（SVG），动态传入的使用 props传数据（父传子）

• 修改图标的颜色使用 fill 属性
• 模块的导入可以收用便捷方法： () => import("./" + this.name + ".svg?inline")

<template>
	<!-- component 代表需要引一个组件 （不确定引哪一个）-->
	<component :is="hansvg" 
	:style="{width: width + 'px',height: height + 'px'}"
	:fill='color'>
	</component>
</template>

<script>
	import shops from './shops.svg?inline'
	export default{
		name: 'wy_icon',
		props:{
			name: {
				type: String
			},
			width:{
				type: String,
				default: '100'
			},
			height:{
				type: String,																																																																			
				default: '100' //设置一个默认值
			},
			color:{
				type: String,
				default: '#0000ff'
			}
		},
		data(){
			return {
				shops: shops
			}
		},
		created(){
			console.log(this.name)
		},
		computed:{
            //修改图标
			hansvg() {
				return () => import("./" + this.name + ".svg?inline")
			}
		},
		methods:{
			
		}
	}
</script>

<style>
</style>

（1）图标全局注册

需要在main.js中进行全局注册，之后就可以在其他组件中直接使用了