1、新建文件: src/components/Icon/src/Icon.vue
<template>
<!-- svg:图标外层容器借点,内部需要与use 标签结合使用 -->
<svg :style="{ width: width, height: height }">
<!-- xlink:href 执行的图标属性需为 #icon-图标名称 -->
<use :xlink:href="prefix + name" :fill="color"></use>
</svg>
</template>
<script setup lang="ts">
defineProps({
//xlink:href属性值的前缀
prefix: {
type: String,
default: '#icon-',
},
//svg矢量图的名字
name: String,
//svg图标的颜色
color: {
type: String,
default: '',
},
//svg宽度
width: {
type: String,
default: '20px',
},
//svg高度
height: {
type: String,
default: '20px',
},
})
</script>
<style scoped></style>
2、新建文件: src/components/Icon/index.ts 【全局导出】
import Icon from './src/Icon.vue'
export { Icon }
3、组件中使用