Iconify 中文文档 News

适用于 SolidJS 的 SVG + CSS 组件

Fri, 06 Mar 2026 00:00:00 GMT

适用于 SolidJS 的 SVG + CSS 组件

继推出 Vue、Svelte 和 React 组件之后，现已发布全新且易于使用的 SolidJS 图标组件。

详情请参阅适用于 SolidJS 的 SVG + CSS。

目前有超过 200 个图标组件包，每个图标集对应一个：

@iconify-solid/material-symbols 用于 Material Symbols 图标
@iconify-solid/solar 用于 Solar 图标
@iconify-solid/tabler 用于 Tabler 图标

……以此类推。

要导入图标组件，请从 @iconify-solid/prefix/icon 导入默认导出项，其中 "prefix" 为图标集前缀，"icon" 为图标名称。

示例：

import GithubIcon from "@iconify-solid/ri/github-line";

function GithubLink() {

  return (

    <a href="https://github.com/iconify">

      <GithubIcon height="1em" />

    a>

  );

}

当 Iconify 图标集更新时，这些包将自动更新。

适用于 React 的 SVG + CSS 组件

Wed, 04 Mar 2026 00:00:00 GMT

适用于 React 的 SVG + CSS 组件

继 Vue 和 Svelte 组件之后，全新易于使用的 React 图标组件现已发布。

详情请参阅适用于 React 的 SVG + CSS。

目前有超过 200 个图标组件包，每个图标集对应一个：

@iconify-react/material-symbols 用于 Material Symbols 图标
@iconify-react/solar 用于 Solar 图标
@iconify-react/tabler 用于 Tabler 图标

……以此类推。

要导入图标组件，请从 @iconify-react/prefix/icon 导入默认导出项，其中 "prefix" 为图标集前缀，"icon" 为图标名称。

示例：

import GithubIcon from "@iconify-react/ri/github-line";

function GithubLink() {

  return (

    <a href="https://github.com/iconify">

      <GithubIcon height="1em" />

    a>

  );

}

当 Iconify 图标集更新时，这些包将自动更新。

多个软件包的更新

Fri, 28 Nov 2025 00:00:00 GMT

多个软件包的更新

多个 Iconify 软件包的新次版本已发布：

以及昨天发布的 Iconify Tools 新主版本。

所有这些发布的目标都是一致的：减少依赖项的数量。在某些情况下，这些发布将依赖项的数量减少到了原来的一半以下。

如今，当开发者和 NPM 软件包日益成为恶意攻击的目标时，停止依赖不必要和过时的依赖项比以往任何时候都更加重要。

所有软件包的行为与之前保持一致，更改仅限于内部。

Iconify Tools 更新

Thu, 27 Nov 2025 00:00:00 GMT

Iconify Tools 更新

Iconify Tools 的新主版本已发布。

变更：

不再支持 CommonJS。
减少了依赖项的数量和体积。
使用新的自定义 XML 解析器。

CommonJS 支持

最大的变化是移除了对 CommonJS 的支持。

许多依赖项已不再支持 CommonJS，这使得在提供 CommonJS 支持的同时无法更新这些依赖项。为了保持所有内容处于最新状态，新版本也移除了对 CommonJS 的支持。

如果出于某些原因您仍然需要 CommonJS，请安装版本 4：

npm install @iconify/tools@cjs --save

新的 XML 解析器

SVG 现在由自定义解析器进行解析，该解析器比旧解析器小得多。

这大幅减少了包体积和依赖项数量。

迁移

无需进行任何操作。旧代码应能在新版本中正常运行。

Figma 更新

Wed, 26 Nov 2025 00:00:00 GMT

Figma 更新

Iconify 图标集从多个来源进行更新，但主要来源于 Git 仓库和 Figma 文档。

遗憾的是，目前已无法再从 Figma 文档进行更新。

Figma 对 API 查询实施了严格的速率限制，导致无法通过 Figma API 获取包含大量 SVG 的文档。

受影响的图标集

这对 Iconify 有何影响？

这将影响从 Figma 获取的现有图标集的更新——这些图标集将不再维护。

Iconify Tools 移除了 axios

Tue, 25 Nov 2025 00:00:00 GMT

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

Tue, 18 Nov 2025 00:00:00 GMT

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 更新

Tue, 04 Nov 2025 00:00:00 GMT

Iconify for Tailwind CSS 更新

适用于 Tailwind 4 的 Iconify 插件已更新。

共有两项更改：

插件现在支持自定义图标集。
修复了动态选择器插件中 square 选项无法正常工作的问题。

请参阅 Tailwind 4 中的自定义图标文档。

Svelte 的 Icon 组件更新

Mon, 03 Nov 2025 00:00:00 GMT

Svelte 的 Icon 组件更新

Iconify Svelte 图标组件的新次版本已发布。

此更新修复了在同一页面使用大量图标（超过 5000 个）时触发 Svelte 中 "effect_update_depth_exceeded" 错误的问题。

这也略微改变了组件的行为。现在图标会立即渲染，无需等待组件挂载，这在使用 SvelteKit 时可能会引发水合警告。

此外，ssr 属性已被移除，因为它已不再使用。

适用于 Svelte 的 SVG + CSS 组件

Tue, 30 Sep 2025 00:00:00 GMT

适用于 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 图标集更新时，这些包将自动更新。

Iconify 中文文档 News

适用于 SolidJS 的 SVG + CSS 组件

适用于 SolidJS 的 SVG + CSS 组件 ​

适用于 React 的 SVG + CSS 组件

适用于 React 的 SVG + CSS 组件 ​

多个软件包的更新

多个软件包的更新 ​

Iconify Tools 更新

Iconify Tools 更新 ​

CommonJS 支持 ​

新的 XML 解析器 ​

迁移 ​

Figma 更新

Figma 更新 ​

受影响的图标集 ​

Iconify Tools 移除了 axios

Iconify Tools 移除了 axios ​

Iconify Unplugin

Iconify Unplugin ​

Iconify for Tailwind CSS 更新

Iconify for Tailwind CSS 更新 ​

Svelte 的 Icon 组件更新

Svelte 的 Icon 组件更新 ​

适用于 Svelte 的 SVG + CSS 组件

适用于 Svelte 的 SVG + CSS 组件 ​

适用于 SolidJS 的 SVG + CSS 组件

适用于 React 的 SVG + CSS 组件

多个软件包的更新

Iconify Tools 更新

CommonJS 支持

新的 XML 解析器

迁移

Figma 更新

受影响的图标集

Iconify Tools 移除了 axios

Iconify Unplugin

Iconify for Tailwind CSS 更新

Svelte 的 Icon 组件更新

适用于 Svelte 的 SVG + CSS 组件