跳到主要内容

Iconify 图标使用指南

项目中关于 Iconify 图标的使用主要分为两种方式。v3.9.2+支持

一、使用 Icon 组件（旧版，不推荐）​

该组件支持两种加载模式：

  1. local 模式：扫描项目中所有使用的图标，将其打包成一个单独的 JS 文件，在项目启动时进行全量加载。
  2. online 模式：按需请求图标数据。在图标初次渲染时发起网络请求，成功后将数据缓存至 localStorage，后续加载会优先从本地缓存中获取。

配置说明：
可通过修改 .env.development 和 .env.production 文件中的 VITE_GLOB_ICONIFY_USE_TYPE 环境变量，来分别控制开发和生产环境所使用的加载模式。

开发环境默认是：online

生产环境默认是：local

使用示例：
从 Iconify 或 Netlify 获取图标名（格式为 图标集:图标名），例如 ion:language：

<template>
  <Icon icon="ion:language" />
</template>

<script setup>
import { Icon } from '/@/components/Icon';
</script>

二、使用 Iconify 原生组件（新版，推荐）​

优势：支持按需加载，自动进行代码分割（Chunk），有助于减小首屏打包体积，提升加载速度。

使用示例：
从 Iconify 或 Netlify 获取图标名（格式为 图标集:图标名），例如 ion:language。在模板中使用时的转换规则如下：

转换规则：Iconify + 大驼峰的图标集 + 大驼峰的图标名

Iconify + Ion + Language  →  <IconifyIonLanguage />
<template>
  <IconifyIonLanguage />
</template>

项目中的使用示例​

您可以直接在本地运行项目来查看完整的图标使用示例：