在Vue3+vite+ts中引入iconfont矢量图标库

在Vue3+vite+ts中引入iconfont矢量图标库，你需要进行以下步骤：

1. 在iconfont官网上创建账号，在账号下创建项目，添加需要的图标，生成项目并获取项目在iconfont的代码。
2. 在项目中创建一个components文件夹，并在其中创建一个Icon.vue组件，用于展示图标。
3. 在Icon.vue组件中使用script setup语法简化代码，并使用v-html指令来插入SVG代码。
4. 在主组件中导入Icon组件，并通过Icon组件的name属性来指定需要显示的图标名称。

以下是具体实现的代码示例：

Icon.vue组件：

<template>
  <svg :class="`iconfont icon-${name}`" aria-hidden="true">
    <use :xlink:href="`#icon-${name}`"></use>
  </svg>
</template>
 
<script setup lang="ts">
import { defineProps } from 'vue'
 
const props = defineProps({
  name: {
    type: String,
    required: true
  }
})
</script>
 
<style scoped>
.iconfont {
  width: 1em; height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
</style>

在主组件中使用Icon组件：

<template>
  <div>
    <Icon name="icon-example" />
  </div>
</template>
 
<script setup lang="ts">
import Icon from './components/Icon.vue'
</script>

确保在项目中引入iconfont的生成代码，通常是一个<script>标签，在index.html或main.js中：

<script src="//at.alicdn.com/t/font_xxxxxx.js"></script>

以上步骤和代码示例展示了如何在Vue3+vite+ts项目中引入iconfont图标库。记得替换<script src="//at.alicdn.com/t/font_xxxxxx.js"></script>中的font_xxxxxx.js为你实际从iconfont生成的代码。