图标使用

XYGo Admin 2025-02-20 77 次阅读

ArtSvgIcon 组件与 Remix Icon 图标库使用指南

图标使用

图标体系

项目基于 Iconify 生态，统一使用 Remix Icon 图标库，通过 ArtSvgIcon 组件引用。

基本用法

vue 复制代码

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

  <!-- 设置大小和颜色 -->
  <ArtSvgIcon icon="ri:settings-3-line" class="text-2xl text-blue-500" />

  <!-- 在按钮中使用 -->
  <ElButton type="primary">
    <ArtSvgIcon icon="ri:add-line" class="text-sm mr-1" />
    新增
  </ElButton>
</template>

图标命名规则

Remix Icon 的命名格式：ri:{name}-{style}

风格	后缀	示例
线性	`-line`	`ri:home-line`
填充	`-fill`	`ri:home-fill`

查找图标

Remix Icon 官网 — 搜索和预览
Iconify 图标集 — 在线浏览

支持的图标库

除了 Remix Icon，项目还支持：

图标库	前缀	说明
Remix Icon	`ri:`	主图标库（推荐）
SVG Spinners	`svg-spinners:`	加载动画图标
Material Line	`line-md:`	Material 风格动画图标

vue 复制代码

<!-- 加载动画 -->
<ArtSvgIcon icon="svg-spinners:3-dots-fade" class="text-2xl" />

<!-- Material 动画图标 -->
<ArtSvgIcon icon="line-md:phone-call-twotone-loop" class="text-2xl" />

离线模式

内网环境下，可以启用离线图标加载。编辑 utils/ui/iconify-loader.ts：

typescript 复制代码

import { addCollection } from '@iconify/vue'
import riIcons from '@iconify-json/ri/icons.json'

addCollection(riIcons)

需要先安装图标集包：

bash 复制代码

pnpm add -D @iconify-json/ri