Iconify 入门：统一 150+ 图标集
Element Plus 的图标、Material 的图标、FontAwesome 的图标……每个图标库一套引入方式。Iconify 让所有图标变成同一行代码。
Iconify 是什么
Iconify 是图标界的包管理器：它聚合了 150+ 主流图标集、20 多万个图标（Material Symbols、FontAwesome 6、Bootstrap Icons、Tabler……），统一成一个 API 和一套组件用法。
核心思路：所有图标统一处理成 SVG 字符串数据，通过统一的组件按需渲染。你不再需要关心「这个图标在哪个库、怎么引入」，只需要记住图标集前缀 + 图标名。
pnpm add @iconify/svelte # Svelte（本站前台用）
pnpm add @iconify/vue # Vue（后台用）
# 常用图标集数据也一并装上，离线可用：
pnpm add @iconify-json/material-symbols @iconify-json/fa6-solid @iconify-json/fa6-brands @iconify-json/fa6-regular
用法：一行一个图标
<script setup>
import Icon from '@iconify/svelte';
// ...省略 svelte 包装，以 svelte 为例的心智
</script>
<!-- 前缀:名字 的格式 -->
<Icon icon="material-symbols:menu-book-outline-rounded" />
<Icon icon="fa6-brands:github" />
<Icon icon="fa6-solid:heart" width="20" />
图标集前缀:图标名——记住这个模式，全网 20 万图标都是这一行写法。想找图标：去 icon-sets.iconify.design 按关键词搜，选中后直接复制这行代码。
离线数据 vs 在线 API
Iconify 有两种工作模式，部署前要刻意选择：
模式一：本地打包（推荐，本站用法）。安装 @iconify-json/xxx 数据包后，构建时图标 SVG 直接内联进产物，运行时零请求。图标即代码，离线可用，没有外部依赖：
// Astro + unplugin-icons 或对应框架插件会自动从本地 json 取数据
import Icon from '@iconify/svelte';
// 构建时解析 @iconify-json/material-symbols 里的数据
模式二：运行时 API。不装数据包时，组件会向 api.iconify.design 发请求取 SVG。优点是零构建配置，缺点是运行时依赖第三方服务——目标用户网络到不了这个 API 时图标全挂。生产站慎用，内网环境禁用。
本站的用法
本站同时装了 @iconify/svelte 和四套本地数据包（material-symbols、fa6-solid、fa6-brands、fa6-regular），前台组件里大量使用：
<!-- 知识库卡片上的图标 -->
<Icon icon="material-symbols:menu-book-outline-rounded" />
<!-- 错误提示 -->
<Icon icon="material-symbols:error-outline-rounded" />
<!-- 文档计数 -->
<Icon icon="material-symbols:description-outline-rounded" />
选 Material Symbols 做功能图标（风格统一、覆盖全）、FontAwesome 做品牌 logo（GitHub、微信等品牌图只有它全），功能图标一套 + 品牌图标一套是最省心的组合。
三个实用细节
尺寸与颜色。SVG 图标继承 currentColor——图标颜色跟着文字颜色走，深浅色主题零适配：
<span style="color: #7dd3fc">
<Icon icon="fa6-solid:star" /> <!-- 图标自动变蓝 -->
</span>
按需加载与体积。本地数据包模式 + 构建摇树，最终产物只包含实际用到的图标（每个 1~2KB），比引入整个图标字体（几百 KB）轻一个量级。
与组件库图标共存。Element Plus 自带 @element-plus/icons-vue，不必弃用——后台 Element 组件里用它自家的，前台自绘区域用 Iconify，互不冲突。Iconify 里其实也有 element 系图标集，统一与否看团队取舍。
什么时候直接用 SVG
Iconify 覆盖不了的场景：自定义设计的业务图标（自家产品的专有图形）——设计师给的 SVG 直接放 assets 里用组件包，没必要塞进 Iconify 体系。图标库解决的是「通用图标」，专属图形永远是自己的资产。
小结
Iconify 把「找图标、装图标、用图标」统一成了一件事：<Icon icon="前缀:名字" />。生产部署记住一条：装 @iconify-json/xxx 本地数据包走构建时内联，别依赖运行时 API。配合 currentColor 继承，深浅色主题的图标适配就自动完成了。