vue3+ts封装阿里矢量库

由于ui框架的图标很少，常常找不到自己想要的图标，这里封装一下阿里矢量库的图标库

阿里矢量库

一、创建项目文件夹

二、加入购物车

选择项目需要的图标加入购物车

三、图标添加至项目

四、创建脚本代码

五、添加脚本代码至index.html

六、封装组件

图标组件默认黑色，大小1rem即16px，iconName为阿里矢量库图标名字。
这里替换颜色用它官网的提示不行。原因是svg图自带fill属性并填充了值，所以我这里采用drop-shadow来复刻一份，将原来的一份放到窗口外面，达到掩人耳目的作用

<script lang="ts" setup>
defineProps({
	color: {
		type: String,
		default: 'black'
	},
	size: {
		type: String,
		default: '1rem'
	},
	iconName: {
		type: String,
		required: true
	}
})
</script>
<template>
	<svg
		class="icon"
		aria-hidden="true"
		:color="color"
		:style="`filter: drop-shadow(${color} 100vw 0); transform: translateX(-100vw);width:${size};height:${size}`">
		<use :xlink:href="'#' + iconName"></use>
	</svg>
</template>
<style lang="scss">
.icon {
	vertical-align: -0.15rem;
	fill: currentColor;
	overflow: hidden;
}
</style>

七、组件使用

<button class="d-btn-primary">
	<d-icon iconName="icon-home" color="#ffffff" size="1.5rem" />
</button>

效果图