vue中使用iconfont

下载Iconfont图标：首先，从Iconfont网站下载所需的图标。你可以在Iconfont网站上选择你需要的图标，然后将它们添加到你的项目中。

将图标文件添加到项目中：将下载的图标文件（通常是.ttf、.eot、.woff等格式）添加到你的Vue项目中。你可以将它们放在项目的静态文件夹中，比如public/fonts。

创建一个Vue组件：为了在Vue中使用这些图标，你可以创建一个Vue组件，用于渲染这些图标。

<template>
  <i :class="iconClass"></i>
</template>

<script setup>
import { PropType, computed } from 'vue';

// 定义 props 类型
interface Props {
  iconName: string;
}

// 接收 props
const props: Props = defineProps();

// 计算属性，用于动态计算图标类名
const iconClass = computed(() => `iconfont ${props.iconName}`);
</script>

<style>
/* 引入图标字体文件 */
@font-face {
  font-family: 'iconfont';
  src: url('~@/assets/fonts/iconfont.eot'); /* 具体路径根据你的项目结构而定 */
  src: url('~@/assets/fonts/iconfont.eot?#iefix') format('embedded-opentype'),
       url('~@/assets/fonts/iconfont.woff') format('woff'),
       url('~@/assets/fonts/iconfont.ttf') format('truetype'),
       url('~@/assets/fonts/iconfont.svg#iconfont') format('svg');
}
.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
}
</style>

使用

<template>
  <div>
    <!-- 使用图标组件并传递图标类名 -->
    <Icon iconName="icon-xxx" />
  </div>
</template>

<script setup>
import Icon from './Icon.vue'; // 引入图标组件
</script>