clean

title: Clean Class Names in Iconify for Tailwind CSS
types:
  IconifyJSON: '/docs/types/iconify-json.md'
functions:
  addDynamicIconSelectors: './index.md'
  getIconsCSS: '/docs/libraries/utils/get-icons-css.md'

Clean class names for Tailwind CSS

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

Function [func]addCleanIconSelectors() creates icons with clean class names.

Deprecation notice

This plugin is deprecated!

It has been replaced with addIconSelectors plugin.

Usage

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

Example [file]tailwind.config.js:

const { 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:

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

Note that element has two class names:

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

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

Parameters

There are 2 parameters for [func]addCleanIconSelectors():

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

Icon names

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

This is needed because of Tailwind CSS limitations. For classes like [str]icon--mdi-light--home it is not possible to create Tailwind CSS plugin that matches partial class, like all classes that start with [str]icon--. Such functionality is possible only for classes that include [str]-[something], like [str]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 [str]mdi-light:home.
• Class names, like [str].icon--mdi-light--home or [str]icon--mdi-light--home (with and without starting dot).

Note that if you are using class names, the format is always the same: [str]icon-- + icon set prefix + [str]-- + 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 [prop]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 [func]getIconsCSS() from Iconify Utils package.
• [prop]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.