Skip to content

Options for Tailwind CSS

Iconify plugin for Tailwind CSS has several options.

The options object is passed as parameter to the plugin:

jsaddDynamicIconSelectors({
   prefix: 'icon-hover',
   overrideOnly: true,
   scale: 0,
});

Options

Supported options:

  • prefix, string - prefix for dynamic class names.
  • overrideOnly, boolean - if enabled, removes duplicate CSS.
  • iconSets - icon sets as an object, it can be used for location of icon sets or custom icon sets.
  • scale - scales icons. See below.

prefix

Option prefix sets prefix for dynamic class names.

Default value is "icon".

For example, if you set it to "icon-hover", like in a code sample above, you can use icons as "icon-hover-[mdi-ligh--home]".

Value must not include "-" at the end. Class names will always have "-" added after prefix. That's how Tailwind CSS dynamic class names work.

You can use multiple instances of plugin with different prefix values to support different configuration options, like in example below.

overrideOnly

If enabled, generated CSS will include only rules that override icons.

For example, with configuration in code example above, plugin will generate the following CSS for "icon-hover-[mdi-light--arrow-right]":

css.icon-hover-\[mdi-light--arrow-right\] {
   --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='M4 12h12.25L11 6.75l.66-.75l6.5 6.5l-6.5 6.5l-.66-.75L16.25 13H4v-1Z'/%3E%3C/svg%3E");
}

This can be used in combination with default selectors to swap icon on hover without duplicating CSS:

js/** @type {import('tailwindcss').Config} */
module.exports = {
   plugins: [
       // Plugin with dynamic selectors for '.icon-'
       addDynamicIconSelectors(),
       // Plugin with dynamic selectors that contains
       // only css for overriding icon for '.icon-hover-'
       addDynamicIconSelectors({
           prefix: 'icon-hover',
           overrideOnly: true,
       }),
   ],
};
tailwind.config.js
Usage example:
html<span class="icon-[mdi--bell-outline] hover:icon-hover-[mdi--bell-off]"></span>

iconSets

With iconSets you can use custom files for icon sets.

Option is an object, where key is an icon set prefix, and value is one of the following:

  • string: location of icon set JSON file in IconifyJSON format.
  • IconifyJSON: loaded icon set.
  • function: callback that returns IconifyJSON icon set. Due to Tailwind plugin system limitations, callback must be synchronous.

Make sure icon set includes info property with palette set. This is used by plugin to tell if an icon set contains icons with hardcoded palette or monotone icons. Mixed icon sets cannot be used. See IconifyInfo type.

jsaddDynamicIconSelectors({
   iconSets: {
       test: './icon-sets/test.json',
   },
});

scale

Icons are rendered as background or mask images for a container element, not as SVG. Container element must have dimensions defined in CSS.

Plugin automatically sets height of container to "1em", width is calculated using icon's width/height ratio.

You can use option scale to scale it.

0 scale

Setting width and height for a container element is not always welcome.

For example, in situation where you want to set custom dimensions using classes like "w-6 h-6". Because "w-6" class generates CSS with the same specificity as CSS generated by this plugin, it might not work as expected, so to avoid any issues, you might want plugin to not add width and height to icons.

This can be done by setting option scale to 0.

If you set scale to 0, a container element will not have any dimensions by default, so you must set width and height for each icon.

Example:

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

Released under the Apache 2.0 License.