官网地址：https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=4539761
第一步： 下载资源 ->解压到项目文件夹


第二步 在项目中main.ts 或者main.js 引入资源

import '/@/assets/iconfont/font/iconfont.js';
import '/@/assets/iconfont/font/iconfont.css';

第三步 使用

Symbol 方式使用

1、封装 SvgIcon 公共组件

<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>

2、注册为全局组件

import SvgIcon from '/@/components/svgIcon/SvgIcon.vue'
app.component('SvgIcon', SvgIcon);

3、在需要的位置使用

<SvgIcon :iconName="item.iconName" :color="item.color"></SvgIcon>

4、补充说明
支持多色图标了，不再受单色限制。
通过一些技巧，支持像字体那样，通过 font-size, color 来调整样式。
兼容性较差，支持 IE9+，及现代浏览器。
浏览器渲染 SVG 的性能一般，还不如 png。

5、效果

font-class方式 引用

<span class="iconfont icon-xxx"></span>

Unicode 方式引用

<span class="iconfont">&#x33;</span>

支持按字体的方式去动态调整图标大小，颜色等等。
默认情况下不支持多色，直接添加多色图标会自动去色。