Package Exports

@achamaro/tailwindcss-iconify-icon
@achamaro/tailwindcss-iconify-icon/tailwind-merge-plugin

Readme

@achamaro/tailwindcss-iconify-icon

This plugin uses the Iconify API to automatically download icons specified by arbitrary value, so you do not need to install an icon set in advance.

Installation

npm i -D @achamaro/tailwindcss-iconify-icon

Configuration

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  // ...

  plugins: [
    // ...
    require("@achamaro/tailwindcss-iconify-icon")(),
  ],
};

Options

downloadDir

Type: string
Default: src/assets/icons

The directory to download the icon file.

prefix

Type: string
Default: "i"

class name prefix.

extraProperties

Type: Record<string, string>
Default: { display: "inline-block" }

The following styles are applied by default. This parameter can be used to override them.

[class^="{prefix}-["],
[class*=" {prefix}-["],
[class*=":{prefix}-["] {
  background-size: 100% 100%;
  background-repeat: no-repeat;
  mask-size: 100% 100%;
  mask-repeat: no-repeat;
  height: 1em;
}

customSvg

Type: Record<string, string>
Default: {}

This is a map of the Icon Set Name and the directory where SVG files are stored.

If specified as follows:

{ custom: "src/assets/custom" }

i-[custom/icon] will display src/assets/custom/icon.svg

Usage

Syntax

{prefix}-[{icon_set}/{icon_name}]
{prefix}-[{icon_set}/{icon_name}]/{mask | bg}

modifier

Type: mask | bg
Default: null

Specify background-image or mask-image explicitly.

Example

<i className="i-[simple-icons/iconify]"></i>
<i className="i-[simple-icons/iconify]/bg"></i>

Other

Plugin for tailwind-merge

import { extendTailwindMerge } from "tailwind-merge";
import twMergeIconifyIcon from "@achamaro/tailwindcss-iconify-icon/tailwind-merge-plugin";

const twMerge = extendTailwindMerge(twMergeIconifyIcon());

VSCode Intellisense

The VSCode extension will display the icons that exist at the time tailwind.config.js is loaded as candidates. If you want to display the newly added icons as candidates, please run Reload Window from the Command Palette.

JSPM