Selecting icon sets in Iconify for Tailwind CSS

This documentation covers prefixes option for addIconSelectors plugin.

Prefixes list

addIconSelectors() plugin requires setting a list of icon sets you want to use, set as either the only parameter to plugin or as prefixes property in options.

Why is it needed?

• Iconify offers a massive number of icons. Tailwind CSS plugin system requires creating all selectors, which means parsing all icons. By selecting icon sets you want to use, plugin only parses those icon sets, reducing build time.
• It can be used for custom icon sets.

Value of prefixes list is an array, each entry can be:

• A string, containing icon set prefix.
• IconSetOptions object.

If you use a string with icon set prefix, all icons in icon set will be parsed without any changes.

IconSetOptions object gives you more control over icons, allowing you to filter icons, customise icons and load custom icon sets.

IconSetOptions

Object IconSetOptions has the following properties:

• prefix, string. Icon set prefix.
• source, string|IconifyJSON. Icon set source.
• icons, string[]|function. List of icons to load or a callback to filter icons.
• customise, function. Callback to customise icons.

Either prefix or source must be set. If both are set, the icon set is loaded from source, but prefix is set to value of prefix.

Source

Property source of IconSetOptions can be:

• Location of icon set to load in IconifyJSON format.
• Icon set in IconifyJSON format.

Icons

Property icons of IconSetOptions can be used to filter icons in the loaded icon set.

By filtering unused icons, you can improve parsing time, thus making the build process faster.

Customise

Property customise of IconSetOptions can be used to customise icons. For example, to change stroke-width, change certain color in icons with color, change animation duration in animated icons and so on.

Callback has two parameters:

• content, string. SVG content.
• name, string. Icon name.

Callback should return new content. If icon is not modified, it should return value passed in content property.

Examples

Examples of using prefixes option to load custom icon sets and customise icons:

jsaddIconSelectors({
   prefixes: [
       {
           // Change stroke width in Tabler icons
           prefix: 'tabler',
           customise: (content) =>
               content.replaceAll('stroke-width="2"', 'stroke-width="1.5"'),
       },
       {
           // Change color in face emojis from Twitter, also rename icon set
           
           // Change icon set prefix by setting 'prefix' property
           prefix: 'twemoji-red',
           
           // Resolve location of icon set from '@iconify-json/twemoji' package
           // Also below is the same code, using '@iconify/json' package
           source: require.resolve('@iconify-json/twemoji/icons.json'),
           // source: require.resolve('@iconify/json/json/twemoji.json'),
           
           // Filter only icons that contain 'face' to improve plugin performance
           icons: (name) => name.includes('face'),
           
           // Change color
           customise: (content, name) => content.replaceAll('#ffcc4d', '#ff9667'),
       },
       {
           // Load custom icon set. It can be pre-generated using Iconify Tools
           prefix: 'custom',
           source: 'data/custom.json',
           
           // Example of using Iconify Tools icon set as source. Assumes that customIconSet is an IconSet class instance.
           // source: customIconSet.export(),
       },
   ],
})