Customising icons in Iconify for Tailwind CSS

This documentation covers customise option for addDynamicIconSelectors plugin.

Customise callback

Option customise allows you to change content of icons.

What is it for?

• You can change stroke-width in icons that use stroke.
• You can change colors in icons that use hardcoded palette, such as emojis.
• You can change animation duration in animated icons.
• You can change opacity of semi-transparent elements.
• You can add extra shapes to icons.

...and so on. You have full control over SVG content.

Usage

customise option is a function, which has 3 parameters:

• content, string. Icon content.
• name, string. Icon name.
• prefix, string. Icon set prefix.

Function should return modified content. If there is nothing to modify, it should return original content value.

Example

Example of using customise option to change stroke-width in Tabler icons:

jsaddDynamicIconSelectors({
   // Change prefix
   // Thin icons will be used as <span class="icon-thin-[tabler--app-window]"></span>
   // and <span class="icon-[tabler--app-window]"></span> will still have default 2px stroke
   prefix: 'icon-thin',
   // Customise content
   customise: (content, name, prefix) => {
       switch (prefix) {
           case 'tabler':
               return content.replaceAll('stroke-width="2"', 'stroke-width="1"');
       }
       return content;
   }
})