什么是 Iconify？
Iconify 是一个开源的图标框架，提供超过 200 套图标集的 150 万个矢量图标，支持 SVG、字体和 Web 组件等多种输出格式。它不绑定特定框架，可以在任何前端项目中使用，包括 Vue、React、Svelte、Angular 以及纯 HTML。核心特性是按需加载图标，只请求当前页面用到的图标，极大减少网络请求和项目体积。
Iconify 与 Font Awesome、Material Icons 这类传统图标库有什么区别？
传统图标库通常只包含一套图标集，而 Iconify 聚合了数百套开源图标集（如 Material Design Icons、Font Awesome、IonIcons、Feather 等）。更重要的是，Iconify 采用按需加载机制：你不会下载整个图标库，而是当页面需要某个图标时，从 CDN 动态获取该图标的 SVG 代码。这消除了重复打包的负担，也让图标版本更新更及时。
Iconify 是如何工作的？
Iconify 使用一个轻量级的运行时库（约 2KB gzip），它会在页面中解析 <iconify-icon> 自定义元素或框架组件。当遇到未加载的图标时，运行时向 Iconify CDN（或自托管服务器）发送请求，获取对应图标的 SVG 数据并渲染。所有图标数据都是矢量，支持颜色、尺寸、旋转等样式修改。离线场景下，也可以预先下载并缓存图标。
支持哪些前端框架？
官方提供了针对 React、Vue 2/3、Svelte、Angular、Ember、Solid 等主流框架的专用组件，同时支持原生 Web Component（<iconify-icon>），这意味着你可以在纯 HTML 页面或任何 JavaScript 框架中使用。每个组件都保留了框架的响应式特性和属性绑定方式。
如何在 React 项目中使用 Iconify？
安装 @iconify/react 包，然后导入 Icon 组件并传入 icon 属性，例如 <Icon icon="mdi:home" />。图标名称格式为“图标集前缀:图标名”，例如 mdi:home 表示 Material Design Icons 中的 home 图标。你也可以通过 width、height、color 等属性控制样式。
图标名称的命名规则是什么？
采用“集合前缀:图标名”的格式，例如 fa:solid/user 或 ion:home-outline。所有受支持的图标集及其前缀可以在 Iconify 官方文档的“图标集列表”中查到。注意图标名通常包含连字符或点，不建议自己猜测，最好从官方浏览器中复制。
有没有可视化的图标搜索工具？
有。官方提供了在线图标浏览器（https://icon-sets.iconify.design/），你可以按关键词搜索，预览不同风格的图标，并一键复制代码或组件标记。该浏览器还支持按集合筛选、调整大小和颜色。
我可以在自己的项目中自托管图标数据吗？
可以。Iconify 支持将图标数据打包成 JSON 文件并部署到自己的 CDN 或服务器。使用 @iconify/tools 和 @iconify/utils 可以自定义构建流程，选择需要的图标集并生成优化后的数据文件。运行时组件只需配置 @iconify/react 或原生自定义元素的 mode 属性即可指向自托管地址。
使用 Iconify 会影响页面性能吗？
相反，它通常能提升性能。因为 Iconify 只加载实际使用的图标（每个图标仅需一次 HTTP 请求，之后由浏览器缓存），而传统图标库即使只用一个图标，也可能需要加载整个字体文件或 CSS 文件。Iconify 的运行时仅约 2KB gzip，加载图标 SVG 数据通常只需几十字节到几 KB。对于有大量图标的项目，性能优势非常明显。
是否支持自定义图标？比如上传自己的 SVG？
Iconify 本身不提供上传功能，但你可以将自己的 SVG 转换成 Iconify 图标格式，然后通过运行时加载。使用 @iconify/tools 可以将 SVG 转换为 Iconify 标准 JSON 文件，并挂载到自托管服务器或直接内联到项目中。此外，你可以直接使用 <iconify-icon> 的 innerHTML 或 src 属性来渲染任意 SVG 内容。
如何动态更改图标的颜色和大小？
通过 CSS 或属性直接控制。例如 <iconify-icon icon="mdi:home" style="color: red; font-size: 24px;"></iconify-icon>，或者使用框架组件的 props：color="red"、width="24"、height="24"。注意某些图标集包含多色图标，颜色属性可能会作用于文件中的默认颜色值。
Iconify 是否支持旋转、翻转、动画？
支持简单的旋转和翻转：通过 rotate 属性（值可为 90/180/270 或 0/1/2/3）和 flip 属性（horizontal/vertical）。动画功能需要配合 CSS 过渡或 keyframes，因为图标输出的是静态 SVG，你可以直接对 SVG 元素应用 CSS 动画。另外，一些图标集本身提供了动画变体（如 Mdi 的 spinner 图标），直接使用即可。
如何获取所有可用图标集的列表？
访问 Official Icon Collections 页面（https://icon-sets.iconify.design/），该页面以表格形式列出所有受支持的图标集，包括名称、前缀、图标数量、许可证等信息。你也可以通过 API https://api.iconify.design/collections 获取 JSON 格式的列表。
Iconify 是否遵守开源许可证？
Iconify 框架本身采用 MIT 许可证。其聚合的图标集遵循各自原作者的许可证（大多数是 MIT、Apache 2.0、CC BY 4.0 或开源免费使用）。使用时需注意每个图标集的许可证条款。Iconify 团队会尽量列出每个集合的许可证信息，但最终还是以图标集原仓库为准。
为什么有些图标显示为占位符或空白？
可能原因：图标名称拼写错误（区分大小写）；图标集前缀写错；网络请求被拦截；CDN 地址不可达（某些地区需要自建镜像）；或者图标本身在某些集合中被移除或改名。建议先在官方浏览器中搜索确认图标存在，并检查浏览器控制台是否有网络错误。
是否支持 TypeScript？
是的。所有官方框架组件都提供了 TypeScript 类型定义。例如 @iconify/react 类型文件包含了 Icon 组件的 props 类型，可直接在 TypeScript 项目中获得类型检查和智能提示。
如何在 Nuxt.js 或 Next.js 中使用 Iconify？
对于 Nuxt 3，可以安装 @iconify/vue 并注册为全局组件，或在页面中直接使用。对于 Next.js，推荐安装 @iconify/react 并用作客户端组件（如果需要在服务端渲染，需考虑图标数据的预加载策略）。官方文档提供了 Nuxt 和 Next 的具体集成示例。
Iconify 与 SVG 字体的区别是什么？
SVG 字体（如 Symbol 字体）通常将所有图标打包在一个 SVG 文件中，并利用 CSS 的 font-family 渲染。Iconify 采用按需加载的 SVG 片段，不依赖字体渲染机制，因此图标清晰度不受缩放影响（无锯齿），且支持多色和渐变。另外，Iconify 的图标更易用 CSS 进行精细控制。
有官方 Discord 或社区吗？
是的。Iconify 在 Discord 上有官方服务器，链接可在官网右下角找到。GitHub 仓库的 Issues 和 Discussions 也是社区讨论的主要场所。开发者可以在这里提问、报告 bug 或贡献图标集。
是否可以在 Electron 或桌面应用中使用？
可以。由于 Iconify 基于 Web 技术，在 Electron 渲染进程中使用与浏览器完全相同。只需要注意网络访问权限，如果应用离线，需要预先下载图标数据并启用本地缓存或自托管。
如何贡献新的图标集？
Iconify 项目欢迎社区贡献。你可以在 GitHub 的 iconify/collections-json 仓库中提交 Pull Request，按照 Iconify 的图标集格式提供 JSON 数据。详细的贡献指南可以在官方文档的“贡献”部分找到。注意提交的图标集必须是开源且允许重新分发的。
