Appearance

Iconify Updates 2023 ​

Iconify Tools 版本 4.0.0 28 Dec ​

Iconify Tools 版本 4.0.0 已发布。

这是一个破坏性更新，详见下文。

变更内容 ​

有哪些变更？

  • 从 Figma 导入图标时支持并行请求。这是一项重大改进，可将导入时间缩短 5 倍！
  • 内置的 fetch 已被替换为 axios，速度更快，且支持配置代理服务器。
  • 解决了处理大型图标时调用栈过大的问题。这需要引入破坏性更新，详见下文。

破坏性更新 ​

部分函数原本是不必要的异步函数。

为了允许在同步环境（例如 Tailwind CSS 插件的配置文件）中使用 Iconify Tools，Iconify Tools 的某个先前版本引入了异步函数的同步变体。但这在处理超大图标（500kb+ 的图标……是的，它们确实存在……）时导致了调用栈过大的问题。

版本 4.0.0 将以下函数改为同步函数：

  • validateColors() - 检查 SVG 中的调色板（用于检查图标中的颜色）。
  • parseColors() - 解析 SVG 中的调色板（用于更改颜色）。
  • parseSVGStyle() - 查找 SVG 中的内联样式并进行解析，为每个条目调用回调函数。这是一个非常基础的解析器，无法处理高级 CSS。
  • cleanupGlobalStyle() - 查找图标中的 <style> 并将其应用到元素上。这是一个非常基础的解析器，无法处理高级 CSS。
  • parseSVG() - 解析 SVG，为每个元素调用回调函数。许多解析图标的内部函数都会使用它。
  • deOptimisePaths() - 移除旧版软件不支持的某些路径优化。

以下函数已被移除，因为不再需要它们：

  • validateColorsSync() - 请使用 validateColors()。
  • parseColorsSync() - 请使用 parseColors()。
  • parseSVGStyleSync() - 请使用 parseSVGStyle()。
  • parseSVGSync() - 请使用 parseSVG()。

Cheerio 类型 ​

旧版本依赖于 @types/cheerio。此版本使用 cheerio 内置的 TypeScript 文件。

这是一个破坏性更新，因为如果你的项目中使用了 @types/cheerio，在使用 Iconify Tools 时可能会遇到 TypeScript 错误。解决方案是不要使用 @types/cheerio，较新版本的 cheerio 已提供类型定义。

新增内容 ​

新增属性：

  • axiosConfig - 用于配置 axios 的属性。可从 @iconify/tools/lib/download/api 导入，其值包含 axios 请求的选项，例如，要配置代理，请设置 proxy 属性。

类中的新增方法：

  • SVG 实例中的 toPrettyString() 方法。它会生成格式化后的字符串。

新图标集网站预览 25 Dec ​

新图标集网站的早期预览版现已在 preview.iconify.design 上线！

这是一个完全重新构建的图标集网站，基于 Nuxt 驱动。

早期预览版支持浏览和搜索图标。

主要新功能：

  • 动态可滚动分页。浏览图标时，每页显示的图标数量取决于您的浏览器窗口大小。您也可以直接滚动浏览图标，而无需使用分页。
  • 高级筛选器（点击右上角筛选器附近的箭头按钮）。您可以按网格、许可证和调色板筛选图标集。
  • 图标自定义。您可以更改颜色、具有透明度元素的透明度以及图标大小。未来将提供更多选项。
  • 更好的代码示例。旧版本侧重于与 Iconify 图标组件配合使用，而新版本主要侧重于其他使用图标的方法：SVG、CSS。图标组件的代码同样会提供。

目的是什么？ ​

重写的主要目的是创建可复用的代码库。

该代码库日后还可用于为设计软件、Web 平台和应用程序创建各种插件。

当前状态 ​

目前，这仅是一个预览版。

这还不是一个完整的 Nuxt 应用，目前所有组件仅在客户端运行。

您可以在此处、X/Twitter 和 Mastodon 上关注最新动态。

Iconify for Tailwind 更新 25 Nov ​

Iconify for Tailwind 的新版本已发布。

主要变更是增加了图标缩放选项，以及完全移除图标尺寸的功能。

通过将选项 scale 设置为 0，您可以移除默认尺寸并使用自定义图标大小：

jsaddDynamicIconSelectors({
   scale: 0
});
html<span class="h-6 w-6 icon-[mdi-light--forum]"></span>

请参阅 Iconify 插件文档。

新的里程碑 12 Nov ​

Iconify 已达到一个新的里程碑：超过 20 万个开源图标！

支持 require-trusted-types-for 脚本策略 22 Jun ​

多个图标组件已更新：

  • Iconify Icon Web 组件
  • SVG 框架
  • Iconify for React

新版本软件包可在具有严格内容安全策略 "require-trusted-types-for 'script';" 的环境中运行。

Iconify 图标组件依赖 innerHTML 来渲染 SVG，而非进行不必要的复杂 HTML 解析。

但这并非必需。Iconify 生态系统中的所有图标均通过了极为严格的验证。 不允许包含脚本、事件监听器、外部资源、位图图像和字体的图标。 所有未知的标签和属性均会被移除。

关于 require-trusted-types-for 安全策略 ​

上述安全策略要求库在将 HTML 赋值给 DOM 元素的 innerHTML 属性之前，必须先对其进行清理。

要将该策略添加到您的文档中，您只需将以下代码添加到页面头部：

html<meta
 http-equiv="Content-Security-Policy"
 content="require-trusted-types-for 'script';"
/>

然而，请注意，该策略并未提供任何实际的安全性，几乎毫无用处！

清理 HTML 的过程没有任何规范，完全由库自行决定如何清理 HTML。
这意味着库完全可以仅模拟清理过程，而无需执行任何实际的清理操作。

您的网站安全不应依赖此类无用的“安全”策略。

Iconify Tools 3.0 25 May ​

Iconify Tools 3.0 版本现已发布。

变更内容：

这些变更的主要目的是允许在不支持异步操作的环境（如各类工具的配置文件）中使用 Iconify Tools 导入和解析图标。

图标搜索改进 19 May ​

Iconify API 中的图标搜索引擎已得到大幅改进。

新版本会优先显示与搜索查询相关的结果，使您更容易找到想要的图标。

对比： API 结果对比

新搜索功能将自动提供给所有使用 API 的用户，因此它可在 Iconify 网站、Figma/Sketch 插件 和 Icones 上使用。

全新的 Iconify 网站 16 May ​

欢迎来到全新的 Iconify 网站！

本站已从零开始重写，由 Vitepress 驱动。

新网站包含：

  • 旧网站的内容（基础页面、新闻等）。
  • 文档，现已支持搜索。

网站现已开源，您可以在 GitHub 仓库 上编辑或提交修改建议。

附言：Vitepress 太棒了！

全新的 Iconify 文档 21 Feb ​

Iconify 文档已重新组织，许多部分已重写。

新文档专注于开发者体验，旨在帮助开发者从 Iconify 生态系统中找到合适的工具。

查看全新改进的 Iconify 文档。

Iconify Icon Web 组件中的自定义 CSS 28 Jan ​

Iconify Icon Web 组件已更新。

新版本新增了向图标追加自定义 CSS 的函数：appendCustomStyle()。

该函数可通过以下方式导入：

  • 从 iconify-icon 包导入。
  • 作为 Web 组件构造函数的静态方法。
  • 作为任意 <iconify-icon> 元素实例的方法。

目前存在以下限制：

  • 它会影响在调用该函数后渲染的所有 <iconify-icon> 实例。
  • 它不会影响在调用该函数前创建的实例。
  • 目前尚无法仅为单个图标单独添加 CSS。

这些限制将在后续版本中移除。

示例 ​

jsimport { appendCustomStyle } from 'iconify-icon';

appendCustomStyle('svg [stroke-width="2"] { stroke-width: 1.5; }');

这会将调用该函数后渲染的所有图标中的 stroke-width 从 2 更改为 1.5。

使用 Iconify 组件时不包含 width 和 height 的 SVG 27 Jan ​

Iconify 图标组件已更新。

新版本支持从生成的 <svg> 中移除 width 和 height 属性。如果你使用 CSS 来调整图标大小，有时需要这样做。

要移除 width 或 height，请将其设置为以下值之一："unset"、"undefined" 或 "none"。

示例 ​

在 @iconify/vue 组件中的示例用法：

vue<Icon icon="mdi:home" height="unset" />

这将从渲染的 <svg> 元素中同时移除 width 和 height。

仅移除单个属性 ​

如果你只想移除一个属性（例如 width），则需要为 height 设置一个值：

vue<Icon icon="mdi:home" width="unset" height="1em" />

这将仅移除 width 属性。

Web 组件 ​

此功能在 iconify-icon Web 组件中不可用，因为它无法按预期工作。

Iconify for Tailwind CSS 11 Jan ​

现已提供适用于 Tailwind CSS 的 Iconify 插件。

该 Iconify 插件目前处于早期开发阶段，但已具备完整功能。

它会为图标生成 CSS，将图标用作背景和遮罩图像。这使您无需任何组件，也无需内联 SVG 即可使用图标。

详情请参阅 Iconify for Tailwind 软件包。

HTML ​

HTML 中的使用示例：

html<span class="icon--mdi-light icon--mdi-light--account"></span>
<span class="icon--fluent-emoji icon--fluent-emoji--megaphone"></span>

使用 Iconify API 为图标生成 CSS 9 Jan ​

Iconify API 现在可以动态为图标生成 CSS。

您只需在 API 中链接到 /{prefix}.css?icons=icon-names，其中 "{prefix}" 是图标集前缀，"icon-names" 是以逗号分隔的图标名称列表。

这使您无需任何组件，也无需内联 SVG 即可使用图标。

单色图标 ​

最棒的是，它同样适用于单色图标！

单色图标会以颜色渲染，并设置为 currentColor，就像图标字体或内联 SVG 一样！它是如何实现的？通过将图标用作遮罩图像，并将背景颜色设置为 currentColor。

有关示例，请参阅 Iconify API 文档。

示例 ​

此示例展示了来自 Noto Emoji 图标集、使用硬编码调色板的图标。

样式表链接：https://api.iconify.design/noto.css?icons=1st-place-medal,2nd-place-medal。

它将生成以下样式表：

css.icon--noto {
   display: inline-block;
   width: 1em;
   height: 1em;
   background: no-repeat center / 100%;
}

.icon--noto--1st-place-medal {
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 128 128' width='128' height='128'%3E%3Cpath fill='%23176CC7' d='M69.09 4.24c-1.08.96-9.48 17.63-9.48 17.63l-6.25 25.21l24.32-2.23S97.91 7.23 98.32 6.36c.73-1.58 1.12-2.23-1.67-2.23c-2.79-.01-26.55-.79-27.56.11z'/%3E%3Cpath fill='%23FCC417' d='M81.68 43.29c-1.21-.65-36.85-1.21-37.69 0c-.76 1.1-.65 6.13-.28 6.78c.37.65 12.35 6.22 12.35 6.22l-.01 2.03s.66 1.59 7.34 1.59s7.37-1.35 7.37-1.35l.06-2.05s10.49-5.24 11.04-5.7c.56-.47 1.03-6.87-.18-7.52zM70.7 51.62s-.03-1.4-.72-1.75c-.69-.35-11.8-.29-12.74-.24c-.94.05-.94 1.73-.94 1.73l-7.6-3.7v-.74l28.3.2l.05.84l-6.35 3.66z'/%3E%3Cpath fill='%23FDFFFF' d='M59.26 51.17c-.94 0-1.48.98-1.48 2.67c0 1.58.54 2.91 1.73 2.81c.98-.08 1.32-1.58 1.23-2.91c-.09-1.58-.29-2.57-1.48-2.57z'/%3E%3Cpath fill='%23FCC417' d='M28.98 90.72c0 23.96 21.66 34.63 36.06 34.12c15.88-.57 34.9-12.95 33.75-35.81C97.7 67.37 79.48 57.1 63.7 57.21c-18.34.13-34.72 12.58-34.72 33.51z'/%3E%3Cpath fill='%23FA912C' d='M64.53 120.67c-.25 0-.51 0-.76-.01c-7.5-.25-14.91-3.41-20.33-8.66c-5.8-5.62-8.98-13.22-8.94-21.39c.09-19.95 17.53-29.2 29.36-29.2h.1c16.03.07 29.19 12.53 29.56 29.42c.16 7.52-2.92 15.41-8.96 21.35c-5.64 5.53-13.12 8.49-20.03 8.49zm-.69-55.94c-10.61 0-26.3 8.68-26.34 25.88c-.03 12.86 9.93 26.08 26.52 26.64c6.32.2 12.83-2.22 18.09-7.39c5.46-5.37 8.53-12.29 8.42-18.99c-.24-14.53-12.12-26.09-26.54-26.15c-.04 0-.12.01-.15.01z'/%3E%3Cpath fill='%23FEFFFA' d='M57.82 60.61c-.69-.95-8.51-.77-15.9 6.45c-7.13 6.97-7.9 13.54-6.53 13.92c1.55.43 3.44-6.53 9.97-12.38c6-5.36 13.84-6.1 12.46-7.99zm30.25 25.87c-2.41.34.09 7.56-5.5 15.64c-4.85 7.01-10.35 9.55-9.71 11.09c.86 2.06 9.67-3.07 13.75-11.43c3.7-7.57 3.26-15.56 1.46-15.3z'/%3E%3Cpath fill='%23FA912C' d='M55.85 77.02c-.52.77-.05 7.52.26 7.82c.6.6 5.16-1.55 5.16-1.55l-.17 18.05s-3.35-.04-3.7.09c-.69.26-.6 7.22-.09 7.56s14.18.52 14.7-.17c.52-.69.39-6.78.15-7.06c-.43-.52-3.7-.31-3.7-.31s.28-26.58.19-27.43s-1.03-1.38-2.15-1.12s-10.32 3.62-10.65 4.12z'/%3E%3Cpath fill='%232E9DF4' d='M25.51 3.72c-.63.58 23.46 43.48 23.46 43.48s4.04.52 13.06.6s13.49-.52 13.49-.52S56.79 4.15 55.67 3.72c-.55-.22-7.97-.3-15.22-.38c-7.26-.09-14.34-.18-14.94.38z'/%3E%3C/svg%3E");
}

.icon--noto--2nd-place-medal {
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 128 128' width='128' height='128'%3E%3Cpath fill='%23176CC7' d='M69.09 4.24c-1.08.96-9.48 17.63-9.48 17.63l-6.25 25.21l24.32-2.23S97.91 7.23 98.32 6.36c.73-1.58 1.12-2.23-1.67-2.23c-2.79-.01-26.55-.79-27.56.11z'/%3E%3Cpath fill='%23CECDD2' d='M81.68 43.29c-1.21-.65-36.85-1.21-37.69 0c-.76 1.1-.33 6.87-.04 7.56c.52 1.2 12.03 6.43 12.03 6.43l-.22 2.38s.94.24 7.63.24s8.01-.34 8.01-.34l.02-2.15s10.36-5.04 10.88-5.74c.44-.58.59-7.73-.62-8.38zm-10.61 9.12s.33-1.47-.36-1.81c-.69-.35-12.53-.19-13.47-.14c-.94.05-.94 1.73-.94 1.73l-7.6-4.53v-.74l28.3.2l.05.84l-5.98 4.45z'/%3E%3Cpath fill='%23FDFFFF' d='M59.26 51.17c-.94 0-1.48.98-1.48 2.67c0 1.58.54 2.91 1.73 2.81c.98-.08 1.32-1.58 1.23-2.91c-.09-1.58-.29-2.57-1.48-2.57z'/%3E%3Cpath fill='%23CECDD2' d='M28.97 91.89c0 23.96 22.05 34.13 36.46 33.7c16.79-.5 34.51-13.24 33.36-36.1C97.7 67.83 79.33 58.2 63.55 58.31c-18.34.14-34.58 12.65-34.58 33.58z'/%3E%3Cpath fill='%239B9B9D' d='M64.53 121.13c-.25 0-.51 0-.76-.01c-7.5-.25-14.91-3.41-20.33-8.66c-5.8-5.62-8.98-13.22-8.94-21.39c.09-19.95 17.53-29.2 29.36-29.2h.1c16.03.07 29.19 12.53 29.56 29.42c.16 7.52-2.92 15.41-8.96 21.35c-5.64 5.53-13.12 8.49-20.03 8.49zm-.69-55.94c-10.61 0-26.3 8.68-26.34 25.88c-.03 12.86 9.93 26.08 26.52 26.64c6.32.2 12.83-2.22 18.09-7.39c5.46-5.37 8.53-12.29 8.42-18.99c-.26-14.53-12.14-26.09-26.56-26.16c-.02 0-.1.02-.13.02z'/%3E%3Cpath fill='%23FEFFFA' d='M58.09 61.47c-.69-.95-7.76-.68-15.37 5.87c-7.56 6.51-8.69 13.71-7.33 14.09c1.55.43 3.44-6.53 9.97-12.38c6-5.35 14.1-5.69 12.73-7.58zm29.79 26.25c-2.41.34.09 7.56-5.5 15.64c-4.85 7.01-10.35 9.55-9.71 11.09c.86 2.06 9.67-3.07 13.75-11.43c3.69-7.56 3.25-15.55 1.46-15.3z'/%3E%3Cpath fill='%232E9DF4' d='M25.51 3.72c-.63.58 23.46 43.48 23.46 43.48s4.04.52 13.06.6s13.49-.52 13.49-.52S56.79 4.15 55.67 3.72c-.55-.22-7.97-.3-15.22-.38c-7.26-.09-14.34-.18-14.94.38z'/%3E%3Cpath fill='%239B9B9D' d='M56.85 86.35c1.04.01 1.97-1.4 2.83-2.26c1.83-1.84 3.75-3.3 5.94-1.32C71 87.66 60.2 92.62 56.1 99.4c-3.06 5.06-3.68 8.95-2.83 9.99s21.54.99 21.82.47c.28-.52.57-7.45.09-7.78s-10.65-.14-10.65-.14s.85-1.98 4.34-5c3.83-3.31 6.9-7.86 6.08-13.24c-1.7-11.12-12.9-11.53-17.75-7.66c-4.73 3.77-3.71 10.27-.35 10.31z'/%3E%3C/svg%3E");
}

您可以在 HTML 中这样使用它：

html<span class="icon--noto icon--noto--1st-place-medal"></span>
<span class="icon--noto icon--noto--2nd-place-medal-medal"></span>

API 查询可以进行自定义。有关更多示例和参数，请参阅 Iconify API 文档。

单色图标示例 ​

样式表链接：https://api.iconify.design/mdi-light.css?icons=account,account-alert,home。

它将生成以下样式表：

css.icon--mdi-light {
   display: inline-block;
   width: 1em;
   height: 1em;
   background-color: currentColor;
   -webkit-mask: no-repeat center / 100%;
   mask: no-repeat center / 100%;
   -webkit-mask-image: var(--svg);
   mask-image: var(--svg);
}

.icon--mdi-light--account {
   --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M11.5 14c4.14 0 7.5 1.57 7.5 3.5V20H4v-2.5c0-1.93 3.36-3.5 7.5-3.5m6.5 3.5c0-1.38-2.91-2.5-6.5-2.5S5 16.12 5 17.5V19h13v-1.5M11.5 5A3.5 3.5 0 0 1 15 8.5a3.5 3.5 0 0 1-3.5 3.5A3.5 3.5 0 0 1 8 8.5A3.5 3.5 0 0 1 11.5 5m0 1A2.5 2.5 0 0 0 9 8.5a2.5 2.5 0 0 0 2.5 2.5A2.5 2.5 0 0 0 14 8.5A2.5 2.5 0 0 0 11.5 6Z'/%3E%3C/svg%3E");
}

.icon--mdi-light--account-alert {
   --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M10.5 14c4.14 0 7.5 1.57 7.5 3.5V20H3v-2.5c0-1.93 3.36-3.5 7.5-3.5m6.5 3.5c0-1.38-2.91-2.5-6.5-2.5S4 16.12 4 17.5V19h13v-1.5M10.5 5A3.5 3.5 0 0 1 14 8.5a3.5 3.5 0 0 1-3.5 3.5A3.5 3.5 0 0 1 7 8.5A3.5 3.5 0 0 1 10.5 5m0 1A2.5 2.5 0 0 0 8 8.5a2.5 2.5 0 0 0 2.5 2.5A2.5 2.5 0 0 0 13 8.5A2.5 2.5 0 0 0 10.5 6M20 16v-1h1v1h-1m0-3V7h1v6h-1Z'/%3E%3C/svg%3E");
}

.icon--mdi-light--home {
   --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='m16 8.41l-4.5-4.5L4.41 11H6v8h3v-6h5v6h3v-8h1.59L17 9.41V6h-1v2.41M2 12l9.5-9.5L15 6V5h3v4l3 3h-3v8h-5v-6h-3v6H5v-8H2Z'/%3E%3C/svg%3E");
}

您可以在 HTML 中这样使用它：

html<span class="icon--mdi-light icon--mdi-light--account"></span>
<span class="icon--mdi-light icon--mdi-light--account-alert"></span>
<span class="icon--mdi-light icon--mdi-light--home"></span>

参数 ​

API 查询可以进行自定义。

您可以更改选择器、为单色图标设置硬编码颜色，以及下载生成的样式表。

有关更多示例和参数，请参阅 Iconify API 文档。

使用 Iconify Utils 为图标生成 CSS 2 Jan ​

Iconify Utils 中新增了用于为图标生成样式表的函数：

这些函数会生成什么？一个样式表，它将图标渲染为背景图像或遮罩图像。

要在项目中使用图标，你只需生成样式表，然后添加基本元素（例如 <span>）来渲染图标：

html<span class="icon--tabler icon--tabler--code"></span>

示例 ​

使用 getIconCSS() 为具有硬编码调色板的单个图标生成的样式表示例：

css.emoji--annoyed-face-with-tongue {
   display: inline-block;
   width: 1em;
   height: 1em;
   background: no-repeat center / 100%;
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 72 72' width='72' height='72'%3E%3Cpath fill='%23fcea2b' d='M36.2 13.3A22.8 22.8 0 1 0 59 36.1a22.79 22.79 0 0 0-22.8-22.8Z'/%3E%3Cpath fill='%23ea5a47' d='M40.5 41.7c-1.8 4.3-2 6-5.5 8.9c-5.6 4.8-7.6-4.1-5.7-8.9Z'/%3E%3Cg fill='none' stroke='%23000'%3E%3Ccircle cx='36' cy='36' r='23' stroke-miterlimit='10' stroke-width='2'/%3E%3Cpath stroke-miterlimit='10' stroke-width='2' d='M40.5 42.25c-1.8 5.8-6 10.7-9 9.8s-4-4.9-2.3-10.8'/%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2.001' d='M46.8 39.7a4 4 0 0 0 0 6m-23-3c2.3-.8 6.8-1 10.5-1s8.3.2 10.5 1'/%3E%3Cpath stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M48.9 32.4a4.7 4.7 0 0 0-8.6 0m-8.6 0a4.7 4.7 0 0 0-8.6 0'/%3E%3C/g%3E%3C/svg%3E");
}

使用 getIconsCSS() 为来自 Tabler Icons 的多个单色图标生成的样式表示例：

css/* 通用代码合并到一个类中，该类应添加到每个图标 */
.icon--tabler {
   display: inline-block;
   width: 1em;
   height: 1em;
   background-color: currentColor;
   -webkit-mask: no-repeat center / 100%;
   mask: no-repeat center / 100%;
   -webkit-mask-image: var(--svg);
   mask-image: var(--svg);
}

/* 每个图标的 SVG。类名应与上面使用的通用类名组合 */
.icon--tabler--code {
   --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m7 8l-4 4l4 4m10-8l4 4l-4 4M14 4l-4 16'/%3E%3C/svg%3E");
}

.icon--tabler--crystal-ball {
   --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M6.73 17.018a8 8 0 1 1 10.54 0'/%3E%3Cpath d='M5 19a2 2 0 0 0 2 2h10a2 2 0 1 0 0-4H7a2 2 0 0 0-2 2zm6-12a3 3 0 0 0-3 3'/%3E%3C/g%3E%3C/svg%3E");
}

背景或遮罩 ​

生成的代码使用背景或遮罩图像来显示图标。它们有什么区别？

  • 背景图像用于具有硬编码调色板的图标。
  • 遮罩图像与设置为 currentColor 的背景颜色结合使用，用于没有调色板的图标。这种组合会使用当前文本颜色渲染图标，从而通过更改文本颜色即可轻松更改图标颜色。

优势 ​

使用样式表而非内联 SVG 来显示图标的优势：

  • 可与任何框架配合使用。无需特殊组件。
  • DOM 中无额外元素。
  • 即时渲染动画图标。

然而，也存在一些缺点：

  • 无法定位图标中的特定元素，这使得更改 stroke-width 等操作变得不可能。必须在构建时向 getIconCSS() 或 getIconCSS() 提供图标数据时完成。
  • 无法在图标中混合使用 currentColor 和硬编码调色板。在使用 Iconify 图标集时这不是问题，因为不允许此类图标，但在使用自定义图标时可能会成为问题。

文档 ​

有关更多详细信息，请参阅文档：