Clean class names for Tailwind CSS

Iconify plugin for Tailwind CSS package has several plugins. This documentation covers addCleanIconSelectors plugin.

Function addCleanIconSelectors() creates icons with clean class names.

Deprecation notice

This plugin is deprecated!

It has been replaced with addIconSelectors plugin.

Usage

Open tailwind.config.js, import addCleanIconSelectors from @iconify/tailwind and add it to the list of plugins.

Example tailwind.config.js:

jsconst { addCleanIconSelectors } = require('@iconify/tailwind');

/** @type {import('tailwindcss').Config} */
module.exports = {
   content: ['./src/*.html'],
   plugins: [
       // Iconify plugin: clean version
       addCleanIconSelectors(['mdi-light:home']),
   ],
};

Example icon with clean class names:

html<span class="icon--mdi-light icon--mdi-light--home"></span>

Note that element has two class names:

• "icon--mdi-light" that contains common CSS for all icons from icon set.
• "icon--mdi-light--home" that contains only SVG for specific icon.

By putting common rules in "icon--mdi-light", there is less duplicate code in generated CSS, which is much cleaner.

Parameters

There are 2 parameters for addCleanIconSelectors():

• List of icon names.
• Options object, optional.

Icon names

Unlike addDynamicIconSelectors(), this plugin requires list of used icons.

This is needed because of Tailwind CSS limitations. For classes like "icon--mdi-light--home" it is not possible to create Tailwind CSS plugin that matches partial class, like all classes that start with "icon--". Such functionality is possible only for classes that include "-[something]", like "icon-[mdi-light--home]".

The value of the first parameter is an array of strings or comma separated list of names as a string. Supported strings:

• Icon names, like "mdi-light:home".
• Class names, like ".icon--mdi-light--home" or "icon--mdi-light--home" (with and without starting dot).

Note that if you are using class names, the format is always the same: "icon--" + icon set prefix + "--" + icon name, regardless of options.

Safelist or HTML

Unfortunately, listing icon names in plugin parameter is not enough. Tailwind CSS needs to see those class names used somewhere, or it ignores CSS generated by plugin. So you need to add class names to HTML that is scanned by Tailwind CSS or add it to safelist property of config, like other class names.

This could be a hassle, so that's one of the reasons why this plugin is listed only in advanced usage. Tailwind CSS developers aren't making things easy for plugin developers.

Options

The options parameter can be used to customise class names.

It has the following properties:

• All options from getIconsCSS() from Iconify Utils package.
• iconSets property for icon sets, same as in addDynamicIconSelectors options.

Multiple instances

You can add plugin to the plugin list in Tailwind CSS config multiple times, with different options or different list of icons.