Icons

v3.0 Version - Iconify

The v3.0 icon library has been upgraded to Iconify, supporting a massive collection of icon libraries including Remix Icon, Material Design Icons, Font Awesome, and 150+ icon sets.

Recommended Icon Library

To ensure consistent icon style throughout the system, the project exclusively uses the Remix Icon library:

• Iconify - Remix Icon
• Remix Icon Official Website

Usage

Use the ArtSvgIcon component to display icons:

<template>
  <!-- Basic usage -->
  <ArtSvgIcon icon="ri:home-line" />

  <!-- Custom size -->
  <ArtSvgIcon icon="ri:user-line" class="text-2xl" />

  <!-- Custom color -->
  <ArtSvgIcon icon="ri:heart-fill" class="text-red-500" />

  <!-- Combined usage -->
  <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>

Style Customization

Control icon styles using Tailwind CSS class names:

<!-- Size control -->
<ArtSvgIcon icon="ri:home-line" class="text-sm" />
<!-- Small -->
<ArtSvgIcon icon="ri:home-line" class="text-base" />
<!-- Default -->
<ArtSvgIcon icon="ri:home-line" class="text-2xl" />
<!-- Large -->
<ArtSvgIcon icon="ri:home-line" class="text-4xl" />
<!-- Extra large -->

<!-- Color control -->
<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" />

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

Offline Icon Usage

By default, Iconify dynamically loads icon data from CDN. If your project is deployed in an intranet environment, you need to enable offline icon support.

1. Install Offline Icon Packages

Install the corresponding icon sets as needed:

# Install Remix Icon (required for the system)
pnpm add -D @iconify-json/ri

# Install other icon sets (optional)
pnpm add -D @iconify-json/svg-spinners
pnpm add -D @iconify-json/line-md

# Or install all icon sets at once (large size, not recommended)
pnpm add -D @iconify/json

2. Configure Offline Icon Loader

Configure the icon sets to load in src/utils/ui/iconify-loader.ts:

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

// Import offline icon data
import riIcons from "@iconify-json/ri/icons.json";
import lineMd from "@iconify-json/line-md/icons.json";

// Register offline icon sets
addCollection(riIcons);
addCollection(lineMd);

3. Enable Offline Icons

Import the offline icon loader in src/main.ts:

import "@utils/ui/iconify-loader"; // Offline icon loading

Tips

• Offline icons are bundled into the project at build time, no network requests required
• Only install and register the icon sets you actually use to avoid excessive bundle size
• Offline mode works in both intranet and internet environments

Note

If you add a new icon set, you need to:

1. Install the corresponding @iconify-json/[icon-set-name] package
2. Import and register it in iconify-loader.ts
3. Restart the development server

---

v2.x Version - Iconfont

The project icons are provided by iconfont, with 600+ built-in icons that can meet most icon requirements.

If you need to add or customize the icon library, you can visit this link System Icon Library, and after entering, you can add it to your own project for use.

Usage

You can find the Icon section in the menu, which contains all the icons. Click to copy to get the icon's Unicode or Font class.

Unicode Usage

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

Font Class Usage

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

Icon Library Directory

Icon library directory: src/assets/icons/system

Note

To facilitate user extension of the icon library, system icons use the iconfont-sys class name by default instead of iconfont

Icon Library Expired

Please click the community button at the top and join the QQ group to contact the group owner or administrator to replace the link