Appearance

Iconify Updates 2022 ​

所有图标组件已更新 29 Nov ​

所有图标组件均已更新！

此版本修复了图标加载函数中的一个错误，该错误可能导致在用户尝试加载不存在的图标时，Promise 实例挂起。

带有图标搜索引擎的全新 Iconify API 软件 16 Nov ​

Iconify API 已采用现代开发流程重写，目前正运行于 Iconify 公共 API 服务器 上。

这是一个酝酿已久的重大版本发布。

API 功能 ​

新版本完全开源，使用 TypeScript 编写。它具备以下功能：

  • 为图标组件提供图标数据并动态生成 SVG。
  • 提供图标集列表和图标列表。
  • 搜索图标。
  • 从各种来源导入图标集，并在无需重启服务器的情况下自动保持更新（暂无文档，但代码已就绪）。

它是一个 Node.js HTTP 服务器，无需安装任何额外软件。您只需安装 NPM 依赖项、构建项目、进行可选配置并启动服务器即可。

API 文档 ​

请参阅 Iconify API 软件文档。

新文档包含 API 查询文档，其中涵盖了搜索引擎的相关说明。开发者可以利用它创建各种允许用户搜索和选择图标的项目，例如网站构建器或主题定制器中的图标选择器。

使用开源图标集或您自己的图标来托管您专属的 Iconify API！构建用于搜索、浏览和选择图标的应用程序，并将其集成到各种工具中！您所需的一切现已准备就绪。

如有任何疑问，请 加入 Discord 服务器 或在 API 源代码仓库 中提问。

Icon Web 组件已更新 8 Oct ​

IconifyIcon Web 组件已更新！

此版本修复了一些 bug，并开放了 shadow root 供外部访问，允许开发者修改图标内容。

图标组件、Utils 和 Tools 的新主版本 8 Sep ​

经过数月的努力，许多软件包的新主版本已发布：

此外，还发布了 Iconify Tools 的新次版本，该版本使用了更新后的 utils 和 types 软件包。

更新内容：

  • 在 types 中，为图标集添加了新属性：显示最后修改时间的 lastModified，以及用于图标集信息的 tags，可用于按标签而非类别过滤图标集。
  • Web 组件 现已稳定。它旨在取代旧的 SVG 框架及框架特定组件。与旧版图标组件不同，Web 组件在服务端渲染方面表现极佳。
  • 所有图标组件均已移除对齐属性。对齐功能在一段时间前看似是个好主意，但实际上并未被使用，只会无故增加包体积。如果您确实需要对齐功能，Web 组件支持 preserveAspectRatio 属性，该属性会传递给 <svg>。
  • 图标组件的渲染模式，尽管并非所有组件都支持该功能。
  • 各处进行了大量内部更改，旨在提升性能并减小打包体积。

图标组件的下一个主要版本 30 Jun ​

图标组件的重大更新！

新的 Web 组件已作为测试版发布。旧图标组件的新主要版本也已发布，使用 @next 标签。

有哪些新变化？

  • Web 组件。
  • 新的图标渲染模式。
  • 许多内部更改，使组件运行更快且打包体积更小。

Web 组件 ​

与其他图标组件不同，Web 组件在 Shadow DOM 中渲染图标。这意味着：

  • 图标与主文档分离，从而带来更好的性能和更浅的 DOM 树。
  • 它与服务器端渲染配合极佳！所有 UI 框架看到的只是 <iconify-icon /> 标签，实际图标仅在浏览器中渲染，且独立于所使用的 UI 框架。

Web 组件可以在不使用任何 UI 框架的情况下使用，其性能优于 SVG 框架。

它也可以与大多数 UI 框架配合使用：

  • Svelte、Vue 2、Vue 3、Ember、Lit（以及使用这些框架的 SSR 框架）可以直接与该 Web 组件配合使用，无需任何自定义包装器。
  • React 也可以直接使用，但有一些注意事项，例如使用 class 而不是 className。有一个专为 React 提供的包装器，允许使用 className 并提供类型定义：@iconify-icon/react。
  • SolidJS 目前在使用 Web 组件时存在问题，需要自定义包装器。请参阅 @iconify-icon/solid。

渲染模式 ​

Web 组件和几乎所有旧版图标组件现在都支持渲染模式。图标可以渲染为 SVG、带背景的 SPAN 或带遮罩的 SPAN。

这主要是为了解决浏览器在 SVG 动画方面的问题。如果图标渲染为 SVG，动画要等到整个文档加载完成后才会开始，而广告或跟踪器加载失败等小问题可能会破坏这一过程。如果图标渲染为背景或遮罩，动画将按预期工作。

请参阅渲染模式文档。

对齐方式 ​

旧版图标组件包含对齐属性。当同时设置了图标的宽度和高度，且与图标内容的宽高比不匹配时，这些属性可用于控制图标内容的对齐方式。它本质上是 SVG preserveAspectRatio 属性的包装器。

在新版图标组件中，不再支持对齐属性。它们并未被广泛使用，但确实显著增加了打包体积。

如果您确实需要使用对齐属性，Web 组件支持 preserveAspectRatio 属性，其工作方式与 SVG 中完全相同。因此，请切换到 Web 组件并调整您的代码。

Sketch 插件更新 15 Jun ​

适用于 Sketch 的 Iconify 插件新版本已发布。

此更新会在导入前清理图标中的动画，从而使使用 SVG 动画的图标能够导入到 Sketch 中。

可在插件的 GitHub 仓库下载。

Twitter 和 Discord 29 May ​

现在可以通过以下平台获取 Iconify 的支持：

Iconify Icon Web 组件 1 May ​

全新的 <iconify-icon /> Web 组件已发布。

详情请参阅 NPM 包说明。

这是 Iconify 项目的一个重要里程碑。它通过提供一个用于渲染图标的现代 Web 组件，极大地提升了开发体验。

使用示例：

html<script src="https://code.iconify.design/iconify-icon/0.0.2/iconify-icon.min.js"></script>
html<iconify-icon icon="material-symbols:account-circle"></iconify-icon>

它的使用与 SVG 框架一样简单，但无需额外费心去监听 DOM 中的占位符。它还兼容任何组件框架。

为什么它比现有的 SVG 框架和图标组件更好？

Shadow DOM ​

与 SVG 框架和旧版组件不同，<iconify-icon /> 会在 Shadow DOM 中渲染图标。这意味着什么？这意味着图标与父级 HTML 文档是相互隔离的。

使用 Shadow DOM 的优势：

  • 不会与文档的样式表发生冲突。
  • 与 SSR（服务端渲染）完美兼容。

服务端渲染正变得越来越普遍。水合（hydration）过程可能会很混乱，尤其是当图标需要包含唯一 ID 时。这一直是图标组件面临的一大难题。借助 Web 组件，服务端脚本只需渲染 <iconify-icon />，而无需包含实际的图标代码；在水合阶段，React 等框架也不会检查图标内容。这意味着以下几点：不再需要在服务端渲染实际的图标；无需为遮罩等元素生成唯一 ID；Web 组件可以从 API 加载图标数据，而无需关心框架如何看待它，因为对框架而言，它们只需渲染一个简单的标签。

渲染模式 ​

SVG 2 动画一直不太流行，原因很充分：目前在浏览器中，动画必须等到整个文档加载完成后才会开始。像广告加载缓慢这样的小事都可能导致动画无法运行。

如何解决这个问题？可以通过将图标渲染为背景图像或遮罩图像来解决。背景和遮罩图像不受文档计时器的影响。

<iconify-icon /> 支持多种渲染模式来解决此问题。图标可以渲染为 <svg />，也可以渲染为带有内联样式的 <span />（相关文档文章将很快补充）。

<span /> 用于渲染带有 SVG 2 动画的图标。除了解决动画延迟问题外，SVG 2 动画在作为背景或遮罩使用时性能也会大幅提升。

然而，在没有动画的情况下，图标作为 <svg /> 渲染性能更好，因此两种模式均受支持，并可通过 mode 属性进行切换。

可以通过使用 mode 属性来切换模式。

SVG 框架和图标组件已更新 31 Mar ​

SVG 框架和图标组件已更新！

本次发布包含以下更改：

  • 替换了上次更新中引入的使用了可选链的代码。遗憾的是，部分开发者（主要是 Vue 2 开发者）仍在使用无法解析现代 JavaScript 的过时构建工具。
  • 将用于验证图标集的过于复杂的函数替换为更简单的函数。此更改减小了所有图标组件的打包体积。差异约为 5% - 8%，具体取决于组件。

SVG 框架和图标组件已更新 19 Mar ​

SVG 框架和图标组件已更新！

此版本主要是内部更改，不影响功能：

  • 已放弃对 Internet Explorer 等老旧浏览器的支持。
  • 许多软件包已切换至 Vitest 进行单元测试，并使用 Unbuild 进行代码构建。
  • 修复了一个 bug：当未找到图标时，loadIcon() 无法拒绝 Promise 实例。

Vue 和 React 组件已更新 28 Feb ​

本次更新解决了以下问题：

  • 修复了 Vue 3 组件中的 SSR 渲染问题。
  • 修复了离线图标组件的导入问题。

图标集重大重构 14 Feb ​

Iconify 图标集仓库 迎来了最大规模的更新。

图标集每隔几天会通过自动化脚本自动更新。在此之前，该脚本使用的是旧代码，无法进行正确的验证。随着 Iconify Tools 2 的发布，现在可以对图标进行正确的分析和验证。

更新脚本已被重写，所有图标集都经过了重新检查，这导致了图标集仓库的重大更新。每一个图标集文件都受到了影响。

此外，还有其他一些变更：

不再维护的图标集 ​

作者不再维护的图标集已被移至新的 "Archive / Unmaintained" 类别。

已移除的图标集 ​

共移除了 15 个图标集。

几年前 Iconify 项目启动时，优质的图标集非常少。许多图标集最初是作为字体设计的。这些图标集中的图标通常设计粗糙，对齐严重偏差，且如今已不再维护。

已移除的图标集将不会出现在 Iconify 网站上，也不会在搜索结果中显示。

不过，图标数据在 NPM 和 API 上仍然可用，因此任何使用这些图标的人都可以继续无中断地使用它们。图标集和图标永远不会从 Iconify 中彻底删除，它们只是被标记为隐藏状态，但仍可继续使用。

新增图标集 ​

新增了多个图标集。

新增的图标集包括 FontAwesome 第 6 版，以及多个包含旗帜的图标集。

由于 FontAwesome 第 6 版重新设计了大多数图标，因此它被作为独立于 FontAwesome 第 5 版的图标集添加，以便两个版本均可使用。

Around.co 赞助 12 Feb ​

Around.co

非常感谢 Around 赞助 Iconify 的 Figma 插件！

Around 是一款专为开发者打造的优秀协作工具。立即了解！

开发 Iconify 是一项全职工作，服务器也需要成本，而开源开发并无报酬，因此我们非常欢迎赞助。感谢 Around 主动联系并提供帮助。

您也可以贡献力量！如果您在项目中使用了 Iconify，请考虑支持 Iconify。

SVG 框架和图标组件已更新 24 Jan ​

SVG 框架和图标组件已更新！

此版本引入了新函数：loadIcon()。这是一个简单易用的函数，它使用 Promise 类来异步加载图标数据。

有关详细信息，请参阅 SVG 框架文档 或 图标组件文档。

新网站 20 Jan ​

欢迎来到全新的 iconify.design 网站！

本网站已从零开始彻底重建。部分区域仍需进行少量更新，但总体而言，相比旧版网站已有巨大提升。

如果您发现任何错误，请在 Iconify 文档仓库 提交工单。