vue3引入icon-font

官网地址
https://www.iconfont.cn/

1. 创建项目，把图标加入购物车，选择Symbol到方式引入，下载代码到本地 asserts目录
   

2. 新建components/SvgIcon.vue组件

<template><svg :class="svgClass" aria-hidden="true"><use :xlink:href="iconClassName" :fill="color" /></svg>
</template><script setup lang="ts">
import { computed } from 'vue';
const props = defineProps({iconName: {type: String,required: true},className: {type: String,default: ''},color: {type: String,default: '#409eff'}
});
// 图标在 iconfont 中的名字
const iconClassName = computed(()=>{return `#${props.iconName}`;
})
// 给图标添加上类名
const svgClass = computed(() => {if (props.className) {return `svg-icon ${props.className}`;}return 'svg-icon';
});
</script><style scoped>
.svg-icon {width: 1em;height: 1em;position: relative;fill: currentColor;vertical-align: -2px;
}
</style>

3.在main.ts中引入组件

import './assets/iconfont/iconfont.js'
import SvgIcon from './components/SvgIcon.vue'app.component('SvgIcon', SvgIcon);
app.mount('#app'

4. 在其他地方使用icon

<svg-icon iconName="icon-chat"></svg-icon>