getIconsCSS()

This function is part of Iconify Utils package.

Function getIconsCSS() generates stylesheet for several icons from an icon set to render them as background or mask images.

It generates code multiple icons from an icon set, splitting common code and icon-specific code. To generate code for one icon without splitting code, see getIconContentCSS().

If, instead of using icons as content of a pseudo-elements, you want to use icons as background or mask images, see getIconsCSS().

To use icons in HTML, all you need to do is create any element, such as <span> with class names for an icon set and icon.

Color and size

When using icons as content of pseudo-elements, currentColor cannot be used, so icons must have a hardcoded color.

Icons also must have fixed dimensions, which cannot be changed in CSS.

If you want to use icons with currentColor in CSS or want to resize icons using CSS, you should use getIconsCSS() instead.

Usage

Function has the following parameters:

• iconSet, IconifyJSON. Icon set data.
• names, string[]. Array of icon names.
• options. Options object, optional.

Function returns string with stylesheet for icons.

Options

The options object has the following properties:

• height, number. Icon height. Required.
• width, number. Icon width, optional. If not set, it is calculated using icon's width/height ratio and height option.
• color, string. Color to replace currentColor with. This should be used to change color of monotone icon, otherwise icon will be rendered black.
• iconSelector, string. Selector for icon, defaults to ".icon--{prefix}--{name}::after". Variable "{prefix}" is replaced with icon set prefix, "{name}" with icon name.
• format. Stylesheet formatting option. Matches options used in Sass. Supported values: "expanded", "compact", "compressed".
• rules, Record<string,string>. Extra rules to add to CSS.

Result

Example of generated stylesheet:

css.icon--tabler--code::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='none' stroke='black' 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::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%3Cg fill='none' stroke='black' 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");
}

.icon--tabler--view-360::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%3Cg fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cellipse cx='12' cy='12' rx='4' ry='9'/%3E%3Cpath d='M3 12c0 2.21 4.03 4 9 4s9-1.79 9-4s-4.03-4-9-4s-9 1.79-9 4z'/%3E%3C/g%3E%3C/svg%3E");
}

That code can be used in HTML with any element, such as <span> with class names for both common code and icon specific code:

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

Color option

Important note about color option: you cannot use CSS variables. Color is not added to style, it is changed inside icon. Icon is not inlined in HTML, it is treated as an external resource. Elements of icon cannot be targeted or styled, just like any other image linked with url(), therefore, CSS variables are not available in icon.

If you want to use different colors for different icons, you need to call getIconsContentCSS() multiple times with different values for the color option.

If you want to have several entries of the same monotone icon with different colors, you need to call getIconsContentCSS() multiple times with different values for the color and iconSelector options.

Example

generate-css.ts

tsimport { readFile } from 'node:fs/promises';
import { getIconsContentCSS } from '@iconify/utils';

// Read icon set from 'tabler.json', parse JSON file
const iconSet = JSON.parse(await readFile('./tabler.json', 'utf8'));

// Get CSS for 3 icons
const css = getIconsContentCSS(
   iconSet,
   ['code', 'crystal-ball', 'view-360'],
   {
       height: 32
   }
);

// Log it
console.log(css);

Result:

css.icon--tabler--code::after {
   content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='32' height='32'%3E%3Cpath fill='none' stroke='black' 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::after {
   content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='32' height='32'%3E%3Cg fill='none' stroke='black' 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");
}

.icon--tabler--view-360::after {
   content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='32' height='32'%3E%3Cg fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M3 12a9 9 0 1 0 18 0a9 9 0 1 0-18 0'/%3E%3Cpath d='M8 12a4 9 0 1 0 8 0a4 9 0 1 0-8 0'/%3E%3Cpath d='M3 12c0 2.21 4.03 4 9 4s9-1.79 9-4s-4.03-4-9-4s-9 1.79-9 4z'/%3E%3C/g%3E%3C/svg%3E");
}

Usage in HTML:

html<p>Code icon: <span class="icon--tabler icon--tabler--code"></span></p>
<p>
   Crystal ball icon:
   <span class="icon--tabler icon--tabler--crystal-ball"></span>
</p>
<p>
   360&deg; view icon: <span class="icon--tabler icon--tabler--view-360"></span>
</p>