官网地址：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>

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