图标

v3.0 版本 - Iconify

v3.0 版本图标库升级为 Iconify，支持海量图标库，包括 Remix Icon、Material Design Icons、Font Awesome 等 150+ 图标集。

推荐图标库

为确保系统图标风格统一，项目全部采用 Remix Icon 图标库：

• Iconify - Remix Icon
• Remix Icon 官网

使用方式

使用 ArtSvgIcon 组件显示图标：

<template>
  <!-- 基础使用 -->
  <ArtSvgIcon icon="ri:home-line" />

  <!-- 自定义大小 -->
  <ArtSvgIcon icon="ri:user-line" class="text-2xl" />

  <!-- 自定义颜色 -->
  <ArtSvgIcon icon="ri:heart-fill" class="text-red-500" />

  <!-- 组合使用 -->
  <ArtSvgIcon icon="ri:star-fill" class="text-4xl text-yellow-500" />
</template>

<script setup>
import ArtSvgIcon from "@/components/core/base/art-svg-icon/index.vue";
</script>

样式定制

通过 Tailwind CSS 类名控制图标样式：

<!-- 大小控制 -->
<ArtSvgIcon icon="ri:home-line" class="text-sm" />
<!-- 小 -->
<ArtSvgIcon icon="ri:home-line" class="text-base" />
<!-- 默认 -->
<ArtSvgIcon icon="ri:home-line" class="text-2xl" />
<!-- 大 -->
<ArtSvgIcon icon="ri:home-line" class="text-4xl" />
<!-- 超大 -->

<!-- 颜色控制 -->
<ArtSvgIcon icon="ri:heart-fill" class="text-red-500" />
<ArtSvgIcon icon="ri:star-fill" class="text-yellow-500" />
<ArtSvgIcon icon="ri:check-line" class="text-green-500" />
<ArtSvgIcon icon="ri:close-line" class="text-gray-500" />

<!-- 主题色 -->
<ArtSvgIcon icon="ri:home-line" class="text-theme" />
<ArtSvgIcon icon="ri:user-line" class="text-primary" />
<ArtSvgIcon icon="ri:settings-line" class="text-secondary" />

离线图标使用

默认情况下，Iconify 会从 CDN 动态加载图标数据。如果你的项目部署在内网环境，需要启用离线图标支持。

1. 安装离线图标包

根据需要安装对应的图标集：

# 安装 Remix Icon（系统必需）
pnpm add -D @iconify-json/ri

# 安装其他图标集（可选）
pnpm add -D @iconify-json/svg-spinners
pnpm add -D @iconify-json/line-md

# 或一次性安装所有图标集（体积较大，不推荐）
pnpm add -D @iconify/json

2. 配置离线图标加载器

在 src/utils/ui/iconify-loader.ts 中配置需要加载的图标集：

import { addCollection } from "@iconify/vue";

// 导入离线图标数据
import riIcons from "@iconify-json/ri/icons.json";
import lineMd from "@iconify-json/line-md/icons.json";

// 注册离线图标集
addCollection(riIcons);
addCollection(lineMd);

3. 启用离线图标

在 src/main.ts 中导入离线图标加载器：

import "@utils/ui/iconify-loader"; // 离线图标加载

提示

• 离线图标会在构建时打包到项目中，无需网络请求
• 只需安装和注册实际使用的图标集，避免打包体积过大
• 离线模式在内网和外网环境下都能正常工作

注意如果你添加了新的图标集，需要：

1. 安装对应的 @iconify-json/[icon-set-name] 包
2. 在 iconify-loader.ts 中导入并注册
3. 重新启动开发服务器

---

v2.x 版本 - Iconfont

项目图标使用 iconfont 提供，内置了 600+ 的图标，可以满足大部分的图标需求。

如果你需要添加或者自定义图标库，可以访问这个链接 系统图标库 ，进入后你可以把它添加到自己的项目中进行使用。

使用方式

你可以在菜单中找到 Icon 图标，里面汇集了所有的图标，点击复制可以拿到图标的 Unicode 或 Font class。

Unicode 用法

<i class="iconfont-sys">&#xe649;</i>

Font class 用法

<i class="iconfont-sys iconsys-gou"></i>

图标库目录

图标库目录：src/assets/icons/system

注意为了方便用户拓展图标库，系统图默认使用 iconfont-sys 类名，而不是 iconfont :::

图标库过期

请点击顶部社区按钮，进入 QQ 群联系群主或者管理员更换链接