Customising icons in Iconify for Tailwind CSS

This documentation covers customise option for addIconSelectors 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:

jsaddIconSelectors({
   prefixes: ['tabler'],
   customise: (content, name, prefix) => {
       switch (prefix) {
           case 'tabler':
               return content.replaceAll('stroke-width="2"', 'stroke-width="1.5"');
       }
       return content;
   }
})

Conflicts

If you also have a customise option used in entry in prefixes option, that callback has a priority and main customise will not be used for that icon set.