@vup/iconfont 图标组件

通用 Iconfont 组件与资源包，提供统一的图标字体解决方案，支持自定义图标资源。

技术栈

• Iconfont - 阿里巴巴图标库
• Vue 3 - 渐进式 JavaScript 框架
• TypeScript - 类型安全

快速开始

安装

pnpm add @vup/iconfont

组件方式使用

在组件中直接导入使用：

<script setup lang="ts">
import { VIconFont } from '@vup/iconfont';
</script>

<template>
  <VIconFont name="icon-add" />
  <VIconFont name="icon-delete" size="24" color="#4096ff" />
</template>

全局注册

在应用入口文件中全局注册后，业务组件里无需再单独引入：

import { createApp } from 'vue';
import App from './App.vue';
import { VIconFont } from '@vup/iconfont';

const app = createApp(App);
app.component('VIconFont', VIconFont);
app.mount('#app');

全局注册后，可以在任何组件中直接使用：

<template>
  <VIconFont name="icon-home" />
</template>

组件 API

Props

参数	说明	类型	默认值
name	图标名称（对应 iconfont.css 中的类名）	string	-
size	图标大小	string | number	16
color	图标颜色	string	inherit

使用示例

<template>
  <div class="icon-demo">
    <!-- 基础用法 -->
    <VIconFont name="icon-add" />

    <!-- 自定义大小 -->
    <VIconFont name="icon-edit" size="24" />
    <VIconFont name="icon-delete" :size="32" />

    <!-- 自定义颜色 -->
    <VIconFont name="icon-success" color="#52c41a" />
    <VIconFont name="icon-error" color="#f5222d" />

    <!-- 组合使用 -->
    <VIconFont name="icon-user" size="20" color="#1677ff" />
  </div>
</template>

<script setup lang="ts">
import { VIconFont } from '@vup/iconfont';
</script>

替换自定义图标资源

你可以直接替换以下目录里的文件（保持文件名一致）：

packages/iconfont/src/assets/
  ├─ iconfont.css
  ├─ iconfont.woff
  ├─ iconfont.woff2
  └─ iconfont.ttf

替换步骤

1. 在 Iconfont 官网创建项目并添加图标

   • 访问 Iconfont 官网
   • 创建项目并添加需要的图标
   • 下载字体文件

2. 替换文件

   • 将下载的字体文件替换到 packages/iconfont/src/assets/ 目录
   • 保持文件名一致：iconfont.css、iconfont.woff、iconfont.woff2、iconfont.ttf

3. 检查路径

   • 确保 iconfont.css 中的字体文件路径使用相对路径（例如 ./iconfont.woff2）
   • 组件内的样式引入路径与实际文件保持一致

示例：替换图标资源

# 1. 从 Iconfont 下载字体文件
# 2. 替换文件
cp ~/Downloads/iconfont.css packages/iconfont/src/assets/
cp ~/Downloads/iconfont.woff packages/iconfont/src/assets/
cp ~/Downloads/iconfont.woff2 packages/iconfont/src/assets/
cp ~/Downloads/iconfont.ttf packages/iconfont/src/assets/

目录结构

packages/iconfont/
  ├─ src/
  │  ├─ iconfont/
  │  │  ├─ VIconFont.vue    # 图标组件
  │  │  └─ types.ts          # 类型定义
  │  ├─ assets/
  │  │  ├─ iconfont.css      # 图标样式文件
  │  │  ├─ iconfont.woff     # 字体文件
  │  │  ├─ iconfont.woff2    # 字体文件（推荐）
  │  │  └─ iconfont.ttf      # 字体文件
  │  └─ index.ts             # 导出文件
  ├─ package.json
  └─ tsconfig.json

使用场景

在按钮中使用图标

<template>
  <VButton>
    <VIconFont name="icon-add" />
    添加
  </VButton>
</template>

在菜单中使用图标

<template>
  <VMenu>
    <VMenuItem>
      <VIconFont name="icon-home" />
      首页
    </VMenuItem>
    <VMenuItem>
      <VIconFont name="icon-user" />
      用户
    </VMenuItem>
  </VMenu>
</template>

动态图标

<template>
  <VIconFont :name="iconName" :size="iconSize" :color="iconColor" />
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { VIconFont } from '@vup/iconfont';

const iconName = ref('icon-home');
const iconSize = ref(20);
const iconColor = ref('#1677ff');
</script>

注意事项

• 图标名称需要与 iconfont.css 中定义的类名一致（去掉 .icon- 前缀）
• 如果图标不显示，检查字体文件路径是否正确
• 建议使用 woff2 格式以获得更好的性能和兼容性
• 替换图标资源后，需要重新构建项目才能生效

相关资源

• Iconfont 官网
• Vue 3 官方文档