Iconify Updates 2024
Iconify 图标组件、工具库和工具的新版本
发布了以下软件包的新次版本：
- Iconify Utils。
- Iconify Tools。
- Iconify Icon Web 组件 及其封装器。
- 适用于 Vue、React 和 Svelte 的 Iconify Icon 组件。
- 适用于 Tailwind CSS 的 Iconify 插件。
包含 2 项变更：
- 图标命名要求
- 自定义图标加载器
命名规范变更
最大的变更在于命名规范。
此前，所有组件仅允许包含小写字母、数字和短横线的图标名称：[a-z0-9-]。
现在这些限制已被移除。允许使用任何非空字符串。
自定义加载器
图标组件现在支持自定义图标加载器，你可以使用以下函数之一进行定义：
- setCustomIconLoader()。
- setCustomIconsLoader()。
它的作用是什么？
- 从自定义源加载图标，而非使用 Iconify API。
- 自定义图标。
目前，新的 Nuxt Icon 组件正使用它在 Nuxt 应用中加载自定义图标。
请参阅 Iconify Icon 组件文档。
Penpot 的 Iconify 插件
Penpot 的 Iconify 插件现已可用
浏览图标的新网站
经过数月的辛勤工作，Iconify 图标集网站 已全面重建。
全新的图标集网站现已上线。由 Nuxt 驱动！
有哪些更新？
- 界面更简洁，专注于开发者体验。告别色彩过载。
- 为每个图标集展示更多示例。
- 收藏图标集，自定义列表。
- 搜索功能仅搜索当前可见的图标集：收藏的图标集、图标集列表或已筛选的图标集。
- 提供更优质的图标代码示例。
新 Logo
旧 Logo 只是一个临时方案。它本应在很久以前就被一个合适的独特标志所取代，但由于 时间紧迫和缺乏灵感（设计独特的标志真的非常难！），我们花了数年时间才构思出 新 Logo。
新 Logo 终于准备就绪。
多年来，Iconify 项目已成为开源图标的家园。 许多开发者和设计师在日常工作流程中使用 Iconify 来寻找最优质的开源图标。
新 Logo 代表一个房屋图标，以独立的线条形式呈现。
Figma 插件重写
适用于 Figma 的 Iconify 插件新版本现已上线！
您可以从 Figma 官网的 Iconify 插件页面 进行安装。
这是一次完全重写，而非小幅更新。插件中采用的新 UI 也将很快应用于全新的 Iconify 网站。
主要新功能：
- 更出色的 UI 和 UX。
- 图标集的高级筛选功能。
- 收藏图标集与自定义图标集列表。
- 每个图标集的详细许可信息，搜索结果中的图标也会同步显示。
- 浏览图标时无需再翻页。
- 快速导入按钮。
- 支持颜色样式（仅限纯色）。
- 更精准的拖放操作。
Figma 插件预览
Figma 的 Iconify 插件已重新设计。
不过，它尚未正式上线。还需要更多测试。
此外，该插件的旧版本已备份在仓库的 archive/v3-dist 分支中，因此在新版本上线后，您仍可使用旧版本。
有关更多详细信息和截图，请参阅插件重新设计页面。
Iconify 包语法更新
Iconify 包 @iconify-json/* 使用 JSON 文件来存储数据。
此前，JSON 文件使用旧的 assert 语法进行导入：
import icons from './icons.json' assert { type: 'json' };现在所有包均使用新的 with 语法：
import icons from './icons.json' with { type: 'json' };所有运行时均支持新语法。对于 Node.js，你需要 18 或更高版本。
如果你正在使用 Node 16 或更早版本，建议进行升级。旧的导入语法已被 Node 弃用 并即将移除，因此继续使用旧语法已不可行。
UnoCSS 和 Unplugin Icons 更新
UnoCSS 和 Unplugin Icons 均已更新。
虽然这些库不属于 Iconify 项目的一部分，但它们共享相同的图标加载器，这些加载器包含在 Iconify Utils 包 中。
这是一次相当大的更新。
变更：
- 修复了 scale 选项。详见下文。
- cwd 选项现在可以是路径数组，从而便于在 monorepo 中搜索多个 node_modules 目录。
- 为 customize 回调添加了两个参数，其中一个是可变的图标数据。这允许自定义图标内容。
缩放
在旧版本中，非方形图标的 scale 选项存在 bug：
- 如果设置了该选项，会导致 width 与 height 相同，从而渲染出方形图标。
- 如果未设置该选项，则会以正确的宽高比渲染图标。
虽然方形图标可能对细长图标有用，但对于宽图标，这会导致图标部分被裁剪，这显然是一个 bug。
在新版本中，scale 选项会正确缩放图标，保持图标的宽高比。
它现在也能与 customize 选项良好配合，将缩放应用于自定义的图标尺寸。
自定义
在旧版本中，customize 选项几乎没什么用。它只能用于旋转或翻转图标，而且由于缺乏上下文，用户甚至不知道正在自定义哪个图标。
在新版本中，customize 函数新增了两个参数：
- data，包含图标数据的 IconifyIcon 类型。
- name，包含 "prefix:name" 格式图标名称的 string 类型。
图标名称让你知道正在自定义哪个图标。
图标数据是一个可变对象，你可以修改它来自定义图标。 你可以更改具有硬编码调色板的图标颜色、不透明度、动画计时，添加额外形状等等…… 你还可以通过调整 width、height、left 和 top 属性来调整图标大小或添加内边距。
有关图标数据格式，请参阅 IconifyIcon 类型。
示例
将所有图标设为方形：
presetIcons({
customizations: {
customize: (defaultCustomizations, data, name) => {
// 将图标设为方形
const width = data.width ?? 16;
const height = data.height ?? 16;
if (height > width) {
// 设置宽度以匹配高度
data.width = height;
// 通过更改 viewBox 的左侧位置使图标水平居中
data.left = (data.left ?? 0) - (height - width) / 2;
}
return defaultCustomizations
},
}
})更改颜色：
presetIcons({
customizations: {
customize: (defaultCustomizations, data, name) => {
if (name === 'twemoji:blue-square') {
// 将蓝色方块变为红色方块
data.body = data.body.replaceAll('#55ACEE', '#e83933')
}
return defaultCustomizations
},
}
})如果某些功能未正常工作，别忘了你始终可以使用 console.log(data) 来查看图标数据。
Iconify for Tailwind CSS 更新
适用于 Tailwind CSS 的 Iconify 插件 迎来了一次小幅更新：
- 插件 addIconSelectors() 现已支持渲染非正方形图标。
请参阅 addIconSelectors 插件尺寸与颜色文档。
Iconify for React 5.0.0
适用于 React 的 Iconify 图标组件的新主版本已发布。
变更：
- 使用现代 React Hooks 重写。
- 支持 Next.js（作为纯客户端组件）。
- 软件包默认使用 ES 模块，同时也支持 CommonJS。
- 新增 ssr 属性，与近期 Vue 组件的更新类似。
请参阅组件文档。
Iconify for Tailwind CSS 重大更新
Iconify 的 Tailwind CSS 插件 迎来了重大更新：
- 软件包新增了一个插件：addIconSelectors()。
- 现在您可以自定义所有图标。
自定义选项
新的 customise 选项允许您更改图标的内容。
它有什么用？
- 您可以更改使用描边的图标中的 stroke-width。
- 您可以更改使用硬编码调色板的图标（例如表情符号）中的颜色。
- 您可以更改动态图标中的动画持续时间。
- 您可以更改半透明元素的不透明度。
- 您可以向图标添加额外的形状。
……等等。您可以完全控制 SVG 内容。
请参阅自定义选项文档。
新插件
新的 addIconSelectors() 插件取代了旧的 addCleanIconSelectors() 插件，不过旧插件仍然可用。
使用示例：
<span class="iconify ph--alarm-duotone"></span>
<span class="iconify-color fluent-emoji-flat--alarm-clock"></span>
<span class="iconify carbon--edit-off"></span>新插件有哪些优势？
- 为图标生成尽可能小的 CSS。
- 更简洁的图标名称。
- 您可以将同一图标用作遮罩或背景图像。
- 它可以与自定义图标集配合使用。
Iconify for React 重写
React 的 Iconify 图标组件已重写。
新版本已发布为 "5.0.0-beta.1"。你可以通过安装 @iconify/react@next 来使用它。
变更：
- 使用现代函数式 React 重写。旧版组件仍使用类组件。
- 修复了 TypeScript 错误。
- 添加了 ssr 属性，与近期 Vue 组件的更新类似。
SSR 属性
新属性 ssr 启用后，如果图标数据可用，将使图标立即渲染，且不会出现闪烁。
<Icon icon="mdi:home" ssr={true} />为什么默认不启用？
在 SSR 中渲染动态加载的内容比较棘手。 当页面进行水合时，服务器和客户端渲染的内容必须一致。 为避免出现问题，Iconify 图标组件在组件挂载之前不会渲染任何内容，而挂载发生在水合完成之后。
何时使用？
新属性将在数据可用时立即渲染图标，无论组件是否已挂载。
在 SSR（服务器端渲染，如 Next）中使用时应谨慎。 在渲染组件之前，请确保服务器和客户端上都有可用的图标数据。
如果你不使用 SSR，可以安全地使用该属性来强制图标更快渲染，因为不存在水合过程。 当图标数据可用时，它将立即渲染图标。
或者，为了绝对安全，请使用 Iconify Icon Web 组件。无论是否使用 SSR，它都可以安全使用。
Iconify API 3.1.0
Iconify API 3.1.0 版本已发布至 NPM 和 Docker。
修复了一个导致名为 "constructor" 的图标无法正确显示的 bug（代码中某处忘记为对象使用 null 构造函数）。
Figma 插件预览
Figma 新版 Iconify 插件的预览版现已完全可用。
所有功能与页面均运行正常。
此外，该插件的旧版本已备份至仓库的 archive/v3-dist 分支中，因此在新版本正式上线后，您仍可使用旧版本。
Iconify for Vue 4.1.2
Vue 的 Iconify 图标组件 已更新。
4.1.2 版本新增了布尔属性：ssr。
如果启用，只要图标数据可用，图标将立即渲染，不会出现闪烁。
<Icon icon="mdi:home" :ssr="true" />
为什么默认不启用？
在 SSR（服务端渲染）中渲染动态加载的内容比较棘手。 当页面进行水合（hydration）时，服务端和客户端渲染的内容必须保持一致。 为了避免出现问题，Iconify 图标组件在组件挂载之前不会渲染任何内容，而挂载发生在水合完成之后。
何时使用它？
无论挂载状态如何，只要数据可用，新属性就会立即渲染图标。
在 SSR（服务端渲染，如 Nuxt）中使用时应格外小心。 在渲染组件之前，请确保服务端和客户端都已获取到图标数据。
如果你没有使用 SSR，可以安全地使用该属性来强制图标更快渲染，因为不存在水合过程。 只要图标数据可用，它就会立即渲染图标。
或者，为了绝对安全，请使用 Iconify Icon Web 组件。无论是否使用 SSR，它都可以安全使用。
Figma 插件预览
Figma 新版 Iconify 插件的预览版现已可用！
这是一个完全重写的版本，基于 Vue 构建。
新功能简要列表：
- 更紧凑的 UI，在小屏幕上使用更加便捷。
- 提供图标集高级筛选、收藏图标集以及详细的许可信息。
- 图标列表现已支持滚动，您不再需要使用分页。
- 拖放操作更加精准。
- 更好地处理图标尺寸。替换图标时，新图标将以相同尺寸导入。新图标将作为小图标导入。
- 更好地处理动态图标。由于 Figma 不支持动画，因此在导入图标前会正确剥离动画效果。
Iconify Icon 2.1.0
Iconify Icon Web 组件 2.1.0 版本已发布。
Iconify Icon Web 组件使用 IntersectionObserver 来检测图标何时可见。 如果不可见，则不会渲染该图标。 不渲染不可见的图标可大幅提升页面性能，尤其是在使用动画图标时。
新版本添加了 noobserver 属性，可用于禁用 IntersectionObserver：
<iconify-icon icon="line-md:bell-alert-loop" noobserver></iconify-icon>将图标下载为 PNG
在 Iconify 图标集 网站上，您现在可以将图标下载为 PNG 格式！
- 您可以自定义 PNG 尺寸，默认为 512x512。
- 动画 SVG 中的动画效果会被自动移除。
- 您可以下载和/或复制到剪贴板。
- 网站会显示示例 PNG，您可以将其拖放至其他应用程序。它在界面中会缩小显示，但拖放时仍为完整尺寸。
自定义图标描边宽度并移除动画
Iconify 图标集 网站已更新。
您现在可以：
- 更改使用描边的图标的描边宽度。
- 移除动态 SVG 中的动画。
如果您想在设计工具中使用图标，移除 SVG 中的动画将非常有帮助。 目前，所有设计工具均不支持动态 SVG，导入动态图标通常会导致图标损坏或显示为空白。
通过为设计工具移除动画，您可以在设计中使用静态图标，而在 HTML 中使用动态图标。
快速演示：
Iconify Icon 2.0.0
Iconify Icon Web 组件 2.0.0 版本已发布。
请参阅此前发布的 Iconify Icon 2.0.0 Beta 版公告 以获取变更列表。
弃用旧版软件包
是时候弃用一些不再适用的旧版软件包了：
这些旧的图标组件将不再更新，其源代码已归档：
- Vue 2（Vue 3 早已发布，继续支持旧版本已无意义）
- Ember（Ember 框架已过时）
- SVG Framework（最古老的组件，已被 IconifyIcon Web 组件取代）
您仍可在旧项目中使用它们，但建议考虑升级到现代替代方案，例如 Web 组件。
自定义动画 SVG 的速度
Iconify 图标集 网站已更新。
现在您可以更改动画 SVG 的播放速度。
它目前还不是一个完整的编辑器，您只能通过乘以动画时长值来减慢或加快动画速度。
您可以将其用于任何动画图标，例如来自以下图标集的图标：
快速演示：
Iconify Icon 2.0.0-beta.1
Iconify Icon Web 组件 2.0.0 beta 1 版本已发布。
此版本在 SVG 性能方面带来了巨大提升：它使用 IntersectionObserver 来检查 图标对当前访问者是否可见，仅在图标可见时才进行渲染。
作为一个不错的附带效果，带有淡入动画的图标会在其进入视口时开始播放动画。
新版本已应用于本网站以及全新的 Iconify 图标集网站。
要安装 beta 版本，请使用 @next 标签：
npm install --save iconify-icon@next新增 "observe" 属性
您可以通过更改 observe 属性来改变观察器的行为。
默认情况下，该功能是启用的。如需禁用，请将 observe 设置为 "false"。
<iconify-icon icon="mdi:home" observe="false"></iconify-icon>在 IconifyIconHTMLElementClass 的实例中，您可以使用 observe 属性来设置/获取布尔值。
用于浏览图标的新网站
经过数月的辛勤工作，Iconify 图标集网站 已完全重建。
新版图标集网站现已上线。它现在由 Nuxt 驱动！
有哪些新功能？
- 图标集的高级筛选功能。
- 图标的无限智能滚动，显示尽可能多能适配您浏览器窗口的图标。
- 提供多种格式的更优图标代码示例。
- 您可以自定义图标中的所有颜色。如果图标包含半透明元素，您还可以自定义不透明度。
- 深色/浅色模式，在浏览带有硬编码颜色的图标时非常实用。
更多详情和截图：
图标的无限智能滚动
在浏览任何图标集或搜索图标时，图标会占满所有可用的浏览器空间。要显示更多或更少的图标，您只需调整浏览器窗口的大小即可。
您不再需要点击分页来查看更多图标，只需滚动即可。不过，如果您想快速跳转到最后一页，分页功能仍然可用。
图标提示
在浏览搜索结果时，图标会显示有用的提示信息，包括图标尺寸和图标集许可证。
在浏览图标集时不会显示许可证信息，它位于图标集信息中图标的上方。
高级搜索
您现在可以按许可证、网格和调色板筛选图标集。
如果您筛选了图标集，搜索功能将提供一个选项，仅在当前可见的图标集中搜索图标。
更优的代码示例
图标的代码示例已得到改进。
您现在可以复制或下载多种格式和软件包的代码示例。
Iconify 图标组件
旧网站展示了 Iconify 图标组件的示例，而新网站则专注于完整的组件，您可以将其添加到应用程序中，无需额外的依赖项。
虽然 Iconify 图标组件非常方便，但它们需要从 API 加载图标数据，运行成本非常高，目前的 GitHub 赞助 根本无法覆盖。远远不够。 因此，最好鼓励使用不依赖 API 的替代方案。
此外，如果您自定义图标（例如更改不透明度或硬编码颜色），Iconify 图标组件并没有按需执行这些操作的代码。
Iconify 图标组件的代码示例仍然可用。
自定义颜色和不透明度
您现在拥有更多自定义图标代码的选项：
- 您可以更改任何图标中的任意颜色，而不仅仅是 currentColor。
- 包含透明元素的图标的不透明度。
复制图标名称
如果您只需要在项目中使用的图标名称（例如用于 Iconify 图标组件，或用于 UnoCSS 或 Tailwind CSS 中的类名），您现在可以选择图标名称的格式。
将图标名称复制到剪贴板的按钮位于图标名称下拉菜单旁边。
所有更改都会保存在浏览器存储中，因此您无需多次更改设置。
面向未来的设计
此次全新重建最棒的一点是，新代码完全可复用。
该代码库将用于：
- 更新 Figma 的 Iconify 插件。
- 为各种设计和开发软件创建新插件。