如何使用图标

iconfont 图标

直接引入 IconFont 组件即可

<template>
  <IconFont icon="xxxx"/>
</template>

修改 iconfont.js 文件： 打开 iconfont 官网，找到 我的项目

找对对应项目后，选中 Symbol 标识, 接着点击右侧 “下载至本地” 按钮下载资源 zip 压缩包

将下载好的 zip 解压，找到 iconfont.js 文件，再替换项目中的 iconfont.js 文件即可。

TIP

VTS 目前使用 Symbol 形式，你也可以选择 Unicode 或 Font Class 等其他方式，具体使用方法可参考官方的帮助中心来查阅更多使用方式。

iconify 图标

提示

Iconify 是一个通用的图标库，可以使用统一的 API 加载不同图标集。它支持多种前端框架，包括 Vue、React 和 Svelte。

Icones 是一个基于 Iconify 的在线图标搜索和预览工具，提供了直观的界面，方便查找和复制图标。

Iconify 和 Icones 的关系

• Iconify 提供了图标 API，并允许在前端项目中直接使用这些图标。
• Icones 是一个 UI 工具，帮助开发者快速查找和复制 Iconify 提供的图标名称或 SVG 代码。
• 使用流程：
  1. 访问 Icones
  2. 搜索想要的图标
  3. 复制 icon name（如 mdi-light:home）

使用图标：

<template>
  <!-- 直接使用图标组件，加 AutoIcon 前缀 -->
  <AutoIconMdiLightHome />

  <!-- 语法：`i-图标集:图标名` ，使用 Unocss/Tailwind 的 Utility Class 语法应用样式 -->
  <div class="i-mdi-light:home text-200px c-green"></div>
</template>

预览如下：