Appearance

getIconContentCSS() ​

此函数属于 Iconify Utils 包。

函数 getIconContentCSS() 用于生成样式表，将图标渲染为伪元素的内容。

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

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

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

颜色与尺寸 ​

当将图标用作伪元素的内容时，无法使用 currentColor，因此图标必须具有硬编码的颜色。

图标还必须具有固定的尺寸，且无法在 CSS 中更改。

如果您想在 CSS 中使用带有 currentColor 的图标，或希望通过 CSS 调整图标大小，则应改用 getIconCSS()。

用法 ​

该函数包含以下参数：

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

函数返回包含图标样式表的 string。

选项 ​

options 对象包含以下属性：

  • height，number。图标高度。必填。
  • width，number。图标宽度，可选。如果未设置，将根据图标的宽高比和 height 选项计算得出。
  • color，string。用于替换 currentColor 的颜色。应用于更改单色图标的颜色，否则图标将渲染为黑色。
  • iconSelector，string。图标的选择器，默认为 ".icon::after"。
  • format。样式表格式化选项。与 Sass 中使用的选项匹配。支持的值："expanded"、"compact"、"compressed"。
  • rules，Record<string,string>。要添加到 CSS 中的额外规则。

结果 ​

生成的样式表示例：

css.icon::after {
   content: 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 变量。

示例 ​

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

// Icon data
const iconData = {
   body: '<path fill="currentColor" d="M10 20v-6h4v6h5v-8h3L12 3L2 12h3v8h5Z"/>',
   width: 24,
   height: 24,
};

// Generate CSS
const css = getIconContentCSS(iconData, {
   iconSelector: '.icon-home::after',
   height: 24, // Required
   color: '#f00' // Changes `currentColor` to `#f00`
});

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