Appearance

getIconCSS() ​

此函数属于 Iconify Utils 包。

函数 getIconCSS() 用于生成样式表，将图标渲染为背景图像或遮罩图像。

它仅为单个图标生成代码。若要同时为多个图标生成代码，请参阅 getIconsCSS()。

如果您不想将图标用作背景或遮罩图像，而是想将其用作伪元素的内容，请参阅 getIconContentCSS()。

要在 HTML 中使用图标，您只需创建任意元素（例如 <span>），并为其指定在 iconSelector 选项中传入的类名即可。

颜色 ​

单色图标将渲染为遮罩图像，其背景颜色设置为 currentColor。这意味着图标将使用与文本相同的颜色。

要更改图标颜色，只需更改文本颜色即可。

Monotone icon used as mask: (hover to see color change)

Icons with palette used as background:

带调色板的图标将渲染为背景图像。

您还可以使用 color 选项将单色图标转换为带调色板的图标。请参阅下方的 "颜色选项" 部分。

用法 ​

该函数包含以下参数：

  • icon，IconifyIcon。图标数据。
  • options。选项对象，可选。

函数返回包含图标样式表的 string 类型字符串。

选项 ​

options 对象包含以下属性：

  • iconSelector，string。图标的选择器，默认为 ".icon"。
  • pseudoSelector，boolean。如果图标的选择器是伪选择器（例如 ".icon-home:after"），请将其设置为 true。
  • varName，string。用于图标的变量名称，默认为 "svg"。设置为 null 可禁用。
  • forceSquare，boolean。强制图标宽度为 1em。
  • color：string。设置单色图标的颜色。同时会将图标渲染为背景图像。
  • mode："mask" 或 "background"。强制将图标渲染为遮罩图像或背景图像。如果未设置，将根据图标内容自动检测模式：包含 currentColor 的图标将渲染为遮罩图像，其他图标则渲染为背景图像。
  • format。样式表格式化选项。与 Sass 中使用的选项匹配。支持的值："expanded"、"compact"、"compressed"。
  • rules，Record<string,string>。要添加到 CSS 中的额外规则。

结果 ​

生成的样式表示例：

css.icon {
   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: 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 20v-6h4v6h5v-8h3L12 3L2 12h3v8h5Z'/%3E%3C/svg%3E");
}

该代码可在 HTML 中与任意元素配合使用，例如使用您在 iconSelector 选项中传入的类名的 <span> 元素：

html<span class="icon"></span>

颜色选项 ​

关于 color 选项的重要说明：您不能使用 CSS 变量。颜色不会添加到样式中，而是直接在图标内部进行修改。图标不会以内联方式嵌入 HTML，而是被视为外部资源。图标的各个元素无法被选中或设置样式，就像通过 url() 链接的任何其他图像一样，因此图标内部无法使用 CSS 变量。

如果您想使用 CSS 变量设置颜色，请不要使用 color 选项，而应通过在样式表或内联样式中更改文本颜色来为图标添加颜色：

html<span class="icon" style="color: var(--icon-color)"></span>

示例 ​

为单色图标生成 CSS：

generate-css.ts
tsimport { getIconCSS } from '@iconify/utils';

// Icon data. This example uses monotone icon that will be used as mask-image
const iconData = {
   body: '<path fill="currentColor" d="M10 20v-6h4v6h5v-8h3L12 3L2 12h3v8h5Z"/>',
   width: 24,
   height: 24,
};

// Generate CSS
const css = getIconCSS(iconData, {
   iconSelector: '.icon-home',
});

// Log stylesheet
console.log(css);
Result:
css.icon-home {
   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: 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='%23000' d='M10 20v-6h4v6h5v-8h3L12 3L2 12h3v8h5Z'/%3E%3C/svg%3E");
}
Usage in HTML:
html<span class="icon-home"></span>

为带调色板的图标生成 CSS：

generate-css.ts
tsimport { getIconCSS } from '@iconify/utils';

// Icon data. This example uses icon with palette that will be used as background-image
const iconData = {
   body: '<path fill="#fcea2b" d="M36.2 13.3A22.8 22.8 0 1 0 59 36.1a22.79 22.79 0 0 0-22.8-22.8Z"/><path fill="#ea5a47" 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"/><g fill="none" stroke="#000"><circle cx="36" cy="36" r="23" stroke-miterlimit="10" stroke-width="2"/><path 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"/><path 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"/><path 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"/></g>',
   width: 72,
   height: 72,
};

// Generate CSS
const css = getIconCSS(iconData, {
   iconSelector: '.emoji--annoyed-face-with-tongue',
   varName: null,
});

// Log stylesheet
console.log(css);
Result:
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");
}
Usage in HTML:
html<span class="emoji--annoyed-face-with-tongue"></span>

为图标使用伪元素：

generate-css.ts
tsimport { getIconCSS } from '@iconify/utils';

// Icon data. This example uses icon with 'currentColor' that will be used as mask-image
const iconData = {
   body: '<path fill="currentColor" d="m10 15.172l9.192-9.193l1.415 1.414L10 18l-6.364-6.364l1.414-1.414z"/>',
   width: 24,
   height: 24,
};

// Generate CSS
const css = getIconCSS(iconData, {
   pseudoSelector: true,
   iconSelector: '.checkbox-checked:before',
});

// Log stylesheet
console.log(css);
Result:
css.checkbox-checked:before {
   display: inline-block;
   width: 1em;
   height: 1em;
   content: '';
   background-color: currentColor;
   -webkit-mask: no-repeat center / 100%;
   mask: no-repeat center / 100%;
   -webkit-mask-image: var(--svg);
   mask-image: var(--svg);
   --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='%23000' d='m10 15.172l9.192-9.193l1.415 1.414L10 18l-6.364-6.364l1.414-1.414z'/%3E%3C/svg%3E");
}
Usage in HTML:
html<a href="#" class="checkbox-checked">Checkbox (icon is shown before it)</a>