• 准备开始
• 安装
• addIconSelectors 插件
  • 使用方法
• addDynamicIconSelectors 插件
  • 使用方法

Iconify 是一套面向开发人员和设计人员的工具，旨在以一致的方式轻松使用不同的图标集。
优点：

• 图标数量庞大：Iconify 支持超过 100 个图标集，包含数万个图标。
• 灵活性高：支持多种格式，包括 SVG 和字体图标。
• 跨框架支持：可在 Vue、React、Svelte、Angular 等框架中使用。

准备开始

先决条件

项目中使用了Tailwind CSS 若没有点击这里开始

在vitepress中使用

点我跳转：Vitepress for Tailwind CSS

安装

运行以下命令以将图标添加到项目：

pnpm

pnpm i -D @iconify/tailwind

npm

npm i -D @iconify/tailwind

yarn

yarn add -D @iconify/tailwind

addIconSelectors 插件

与 addDynamicIconSelectors 区别

• 更紧凑的CSS，重用通用代码
• 更简洁的图标名称

缺点

• 需要引入

配置tailwind.config.js

/** 引入addIconSelectors */
import { addIconSelectors } from '@iconify/tailwind'

/** @type {import('tailwindcss').Config} */
export default {
  content: [],
  theme: {
    extend: {},
  },
  plugins: [
    addIconSelectors([ 
      // Iconify 插件，需要编写图标集列表才能加载
      'mdi', 
      'mdi-light', 
      'carbon', 
      'simple-icons', 
      'logos'
    ]) 
  ],
}

使用addIconSelectors 插件时，还需要将图标集安装为开发依赖项。您可以安装完整的软件包 @iconify/json 或图标集的软件包，要使用 @iconify-json/{prefix}。

如果要使用mdi-light--home，请安装 @iconify-json/mdi-light 包。

pnpm i -D @iconify-json/mdi-light

例如：

<span class="iconify mdi-light--home"></span>

输出：

去哪里获取这些图标

iconify.design 超过 200,000 个开源图标库

使用方法

要将图标添加到 HTML，首先创建一个具有两个类名的 <span> 元素：

• 将图标呈现为背景或蒙版图像的类名。
• 带有图标名称的类名（CSS 包含图标数据）。
  

例子：

<span class="iconify mdi--alarm"></span>
<span class="iconify mdi-light--home"></span>
<span class="iconify carbon--edit-off"></span>
<span class="iconify-color logos--vitejs"></span>
<span class="iconify-color logos--typescript-icon-round"></span>
<span class="iconify simple-icons--vuedotjs"></span>

输出：

addDynamicIconSelectors 插件

与 addIconSelectors 区别

• 无需配置插件
• 每个图标一个类名

缺点

• 类名奇奇怪怪

配置tailwind.config.js

/** 引入addDynamicIconSelectors */
import { addDynamicIconSelectors } from '@iconify/tailwind'

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ['./src/*.html'],
  plugins: [
    // Iconify plugin
    addDynamicIconSelectors(), 
  ],
}

使用方法

类名的语法是这样的：[str]icon-[{prefix}--{name}]，其中{prefix}是图标集前缀，{name}是图标名称。

例子：

<span class="icon-[ph--alarm-duotone]"></span>
<span class="icon-[fluent-emoji-flat--alarm-clock]"></span>
<span class="icon-[carbon--edit-off]"></span>