Iconify 简介及使用指南给大家推荐一个好用的开源图标框架-Iconify，它集成了 100 多个流行的图标集（如

给大家推荐一个好用的开源图标框架-Iconify，它集成了 100 多个流行的图标集（如 Material Design Icons、Font Awesome、Tabler Icons 等），提供了超过 100,000 个高质量矢量图标。它的主要特点包括：

统一访问：通过单一 API 访问多个图标集的图标
按需加载：只加载实际使用的图标，优化性能
多种使用方式：可作为组件、SVG、字体等多种形式使用
框架无关：支持 React、Vue、Svelte 等主流前端框架，也支持纯 HTML

如何使用 Iconify

1. 安装

根据你的项目需求选择安装方式：

# 使用 npm
npm install --save-dev @iconify/json

# 或者使用 yarn
yarn add --dev @iconify/json

2. 基本使用方式

在 HTML 中直接使用

<!-- 通过 CDN 引入 -->
<script src="https://code.iconify.design/3/3.1.0/iconify.min.js"></script>

<!-- 使用图标 -->
<span class="iconify" data-icon="mdi:home"></span>

在 React 中使用

import { Icon } from '@iconify/react';

function MyComponent() {
  return <Icon icon="mdi:home" />;
}

在 Vue 中使用

<template>
  <icon icon="mdi:home" />
</template>

<script>
import { Icon } from '@iconify/vue';

export default {
  components: {
    Icon,
  },
};
</script>

3. 图标命名规则

Iconify 使用 集合:图标名 的格式来引用图标，例如：

mdi:home - Material Design Icons 中的 home 图标
fa-solid:user - Font Awesome Solid 中的 user 图标
carbon:settings - Carbon Design 中的 settings 图标

4. 自定义样式

<span class="iconify" data-icon="mdi:home" style="color: #f00; font-size: 24px;"></span>

或者在 React/Vue 中：

<Icon icon="mdi:home" style={{ color: 'red', fontSize: '24px' }} />

5. 高级用法

按需加载 SVG

import { loadIcon } from '@iconify/core';

async function displayIcon() {
  const svg = await loadIcon('mdi:home');
  document.body.innerHTML = svg;
}

使用 Iconify 提供的工具

import { getIcon } from '@iconify/core';

const iconData = getIcon('mdi:home');
console.log(iconData); // 输出图标数据

资源

Iconify 的强大之处在于它统一了多个图标集的访问方式，并且提供了灵活的集成方案，适合各种规模的项目使用。