Iconify Updates 2025
多个软件包的更新
多个 Iconify 软件包的新次版本已发布：
以及昨天发布的 Iconify Tools 新主版本。
所有这些发布的目标都是一致的：减少依赖项的数量。 在某些情况下，这些发布将依赖项的数量减少到了原来的一半以下。
如今，当开发者和 NPM 软件包日益成为恶意攻击的目标时，停止依赖不必要和过时的依赖项比以往任何时候都更加重要。
所有软件包的行为与之前保持一致，更改仅限于内部。
Iconify Tools 更新
Iconify Tools 的新主版本已发布。
变更：
- 不再支持 CommonJS。
- 减少了依赖项的数量和体积。
- 使用新的自定义 XML 解析器。
CommonJS 支持
最大的变化是移除了对 CommonJS 的支持。
许多依赖项已不再支持 CommonJS， 这使得在提供 CommonJS 支持的同时无法更新这些依赖项。 为了保持所有内容处于最新状态，新版本也移除了对 CommonJS 的支持。
如果出于某些原因您仍然需要 CommonJS，请安装版本 4：
npm install @iconify/tools@cjs --save新的 XML 解析器
SVG 现在由自定义解析器进行解析，该解析器比旧解析器小得多。
这大幅减少了包体积和依赖项数量。
迁移
无需进行任何操作。旧代码应能在新版本中正常运行。
Figma 更新
Iconify 图标集从多个来源进行更新，但主要来源于 Git 仓库和 Figma 文档。
遗憾的是，目前已无法再从 Figma 文档进行更新。
Figma 对 API 查询实施了严格的速率限制，导致无法通过 Figma API 获取包含大量 SVG 的文档。
受影响的图标集
这对 Iconify 有何影响？
这将影响从 Figma 获取的现有图标集的更新——这些图标集将不再维护。
Iconify Tools 移除了 axios
通常此处仅发布重大更新，但本次更新可能会对部分用户造成破坏性影响。
Iconify Tools 包已更新， 其中主要仅包含依赖项更新和少量修复， 但有一处更改可能具有破坏性：移除了对 axios 的依赖。
如果出于某些原因你需要使用 axios，可以通过新增的 setFetch() 函数进行设置：
import axios from "axios";
import { setFetch } from "@iconify/tools";
const fetchAxios = axios.create({
adapter: "fetch",
});
setFetch(fetchAxios);Iconify Unplugin
隆重推出一种全新的图标渲染方式：Iconify Unplugin。
它有何不同之处？
- 与其他解决方案不同，它将图标拆分为 SVG + CSS。这大幅减少了 HTML 体积，同时仍能完整渲染 SVG。
- 与按需加载图标不同，Unplugin Iconify 在构建阶段生成图标，因此图标会被打包并即时渲染。
- 不再使用预构建的图标组件，而是按需生成组件，允许你自定义组件。
- 支持多种框架。目前仅支持 Vue、Svelte、React 和 Preact。未来将很快添加更多支持。
请参阅 GitHub 仓库。
工作原理示意图：
文档尚未准备就绪，请参阅 GitHub 仓库 中的 readme 文件。
如果你曾使用过 Unplugin Icons 包（Iconify Unplugin 深受其启发），那么 Unplugin Icons 文档 可能会对你有所帮助。两者的用法非常相似。
Iconify for Tailwind CSS 更新
适用于 Tailwind 4 的 Iconify 插件 已更新。
共有两项更改：
- 插件现在支持自定义图标集。
- 修复了动态选择器插件中 square 选项无法正常工作的问题。
请参阅 Tailwind 4 中的自定义图标 文档。
Svelte 的 Icon 组件更新
Iconify Svelte 图标组件 的新次版本已发布。
此更新修复了在同一页面使用大量图标（超过 5000 个）时触发 Svelte 中 "effect_update_depth_exceeded" 错误的问题。
这也略微改变了组件的行为。现在图标会立即渲染，无需等待组件挂载，这在使用 SvelteKit 时可能会引发水合警告。
此外，ssr 属性已被移除，因为它已不再使用。
适用于 Svelte 的 SVG + CSS 组件
继 Vue 组件之后，现已发布全新且易于使用的 Svelte 图标组件。
详情请参阅 适用于 Svelte 的 SVG + CSS。
组件使用了 Svelte runes，需要 Svelte 5 版本。
目前有超过 200 个图标组件包，每个图标集对应一个：
- @iconify-svelte/material-symbols 用于 Material Symbols 图标
- @iconify-svelte/solar 用于 Solar 图标
- @iconify-svelte/tabler 用于 Tabler 图标
……以此类推。
要导入图标组件，请从 @iconify-svelte/prefix/icon 导入默认导出项，其中 "prefix" 是图标集前缀，"icon" 是图标名称。
示例：
import GithubIcon from "@iconify-svelte/ri/github-line";然后在 Svelte 模板中使用：
<GithubIcon height="1em" />当 Iconify 图标集更新时，这些包将自动更新。
适用于 Vue 的 SVG + CSS 组件
全新易于使用的 Vue 图标组件已发布。
详情请参阅 适用于 Vue 的 SVG + CSS。
目前有超过 200 个图标组件包，每个图标集对应一个：
- @iconify-vue/material-symbols 用于 Material Symbols 图标
- @iconify-vue/solar 用于 Solar 图标
- @iconify-vue/tabler 用于 Tabler 图标
……以此类推。
要导入图标组件，请从 @iconify-vue/prefix/icon 导入默认项，其中 "prefix" 为图标集前缀，"icon" 为图标名称。
示例：
import GithubIcon from "@iconify-vue/ri/github-line";然后在 Vue 模板中使用：
<GithubIcon height="1em" />当 Iconify 图标集更新时，这些包将自动同步更新。
SVG + CSS 的回退组件
在大多数使用场景下，SVG + CSS 是渲染图标的最佳方式。
然而，目前最新版本的 Safari 浏览器尚不支持该方式。
这意味着需要为 Safari 用户提供一个回退方案，以便在不使用 CSS 的情况下将图标渲染为完整的 SVG。
已为以下框架创建了回退组件：
- Vue：@iconify/css-vue。
- Svelte：@iconify/css-svelte。
- React：@iconify/css-react。
目前，只有 Vue 版本被标记为稳定版，因为它已在生产环境中经过充分测试。
React 和 Svelte 组件应该也是稳定的，因为它们与 Vue 组件共享代码库， 但由于依赖这些组件的图标组件尚未发布，这两个 组件目前尚无实际用途，也无法进行充分测试。
不再支持 CommonJS
Iconify Utils 的新主版本已发布。
此版本仅包含一项更改：移除对 CommonJS 的支持。
越来越多的 NPM 包正在移除对 CommonJS 的支持。 我尽可能长时间地同时支持 CJS 和 ESM，但 Iconify Utils 包所使用的一些依赖 已不再支持 CommonJS，因此是时候做出选择了：是保留过时的依赖，还是移除对 CommonJS 的支持。
在现代开发中，CommonJS 已无立足之地。它是过去的遗留物。
如果您的构建流程需要 CommonJS 支持，我强烈建议您更新代码。
如果您无法更新，仍然可以使用 Iconify Utils 的版本 2。您可以使用以下命令安装旧版本：
npm install @iconify/utils@cjs200 个图标集
Iconify 迎来了一个新的里程碑：200 个开源图标集！
衷心感谢所有发布并维护开源图标的开发者。大多数开发者可能并未意识到，目前已有如此多出色的开源图标集。你几乎可以为任何事物找到对应的图标。
Iconify 图标组件更新
所有 Iconify 图标组件 的新主版本已发布。
变更（适用于所有组件）：
- 移除了若干先前已弃用的函数。
Vue 组件的额外变更：
- 组件已使用 Vue 的组合式 API 重写。
- 新增 load 事件，在从 API 加载图标数据时触发。
Svelte 组件的额外变更：
- 组件已使用 Svelte 5 的 runes 语法重写。
- 将 onLoad 事件更改为 onload 回调，以适配新的 Svelte 5 语法。
有关更多详细信息，请参阅迁移指南，其中详细说明了每一项变更以及您需要在代码中做出的修改。
Iconify for Svelte 更新
Iconify 的 Svelte 图标组件 已使用 Svelte 5 的 runes 重写。
之前的版本使用的是 Svelte 4 语法。
组件的第 5 版可以通过 @next 标签进行安装：
npm install --save @iconify/svelte@next尽管 Svelte 5 支持旧语法，但最好更新该组件以确保其面向未来。
此外，本次更新还包含以下更改：
- 之前已弃用的函数 disableCache() 和 enableCache() 已被移除。
- 之前已弃用的函数 iconExists() 已被移除。请改用 iconLoaded()（功能完全相同……更多详情将在后续的版本说明中介绍）。
Iconify for Vue 更新
Vue 的 Iconify 图标组件 已使用 Vue 的组合式 API 重写。
之前的版本依赖于选项式 API。
组件的第 5 版可以使用 @next 标签进行安装：
npm install --save @iconify/vue@next如果您更倾向于使用选项式 API，仍然可以使用 Iconify 图标组件的第 4 版。
为什么使用组合式 API？
许多 Vue 开发者正在逐渐放弃选项式 API，现在有一个新选项 可以从 Vue 打包文件中移除对选项式 API 的支持："__VUE_OPTIONS_API__"。
如果存在依赖选项式 API 的组件，就意味着无法使用该新选项。
对于 Iconify 图标组件而言，使用哪种 API 没有任何区别， 使用任一 API 都没有明显优势，因此切换到组合式 API 是合理的。
其他变更
此外，新版本包含以下破坏性更新：
- 已移除 enableStorage 和 disableStorage 函数。它们在上一个版本中已被弃用。
- 移除了通配符导出，该导出在 Windows 上使用 Nuxt Icon 构建 Nuxt 应用时会导致 Node 警告。
Iconify API 更新
Iconify API 3.1.1 版本已发布。
本次更新包含一项关键错误修复。如果您正在运行 API 实例，请尽快进行更新。
API 可通过以下途径获取：
请参阅 API 文档。
Tailwind CSS 4 的 Iconify 插件
Tailwind CSS 4 的 Iconify 插件现已可用。
该插件可与 Tailwind CSS 4 中新增的 @plugin 指令配合使用：
@plugin "@iconify/tailwind4";详情请参阅插件文档。
Iconify 组件更新
所有 Iconify 图标组件 的新次版本已发布。
此更新仅影响按需从 Iconify API 加载图标数据的组件。
本次更新移除了使用 localStorage 缓存图标的功能，使所有组件均符合 GDPR 规范。
为什么要移除它？
在项目早期，API 尚不稳定且没有离线解决方案时，将图标缓存在存储中是一项非常有用的策略。
如今已有其他解决方案，例如各种 CSS 方案和 Unplugin Icons。
从 API 加载图标的 Iconify 图标组件仅应在确保有网络连接的情况下使用。 这些组件不应用于可离线运行的应用程序。 如需离线使用，请参阅上方链接中的替代方案。
此外，所有 Iconify 图标组件都具备冗余机制，在主 Iconify API 主机无法访问时，可从备用 API 加载图标。因此，不再需要额外的缓存层。
代码变更
管理 localStorage 缓存的代码不仅被禁用，而是已被彻底移除。
这使得组件的包体积减少了约 10%。
函数 enableStorage 和 disableStorage 仍保留可用，以避免破坏用户的现有代码， 但它们实际上已不执行任何操作。 它们将在组件的新主版本中被移除。