@choiceform/tailwindcss-svg-icon

A Tailwind CSS plugin that allows you to use encoded SVG files as CSS data URLs.

Installation

To install the tailwindcss-svg-icon plugin, you can use npm or yarn:

npm install @choiceform/tailwindcss-svg-icon --save-dev

Configuration

// tailwind.config.js
module.exports = {
  plugins: [
    require("tailwindcss-svg-icon")({
      // default options
      classPrefix: "icon",
      defaultSize: 1,
      unit: "rem",
    }),
  ],
};

// package.json
{
  "scripts": {
    ...
  },
  "iconSourcePath": "path/to/icons",
}

Usage

<div class="icon-[folder/iconName]" />

features

Auto completion

This plugin supports code completion in Visual Studio Code. It provides suggestions and auto-completion for your code as you type. This can greatly improve your productivity and help you write code more efficiently.

Customize size

You can customize the default size of the icons by adjusting the defaultSize option. In the tailwind.config.js file, change the value of defaultSize to the size and unit you prefer.

Additionally, you can also use Tailwind CSS's classes to change the size of the icons.

<div className="icon-[sharp/mastodon] w-16 h-16" />

Support the `currentColor` feature for SVG.

By using the currentColor value for the fill or stroke property in your SVG, you can dynamically inherit the color from the parent element. This allows for easy customization and theming of SVG icons.

Example usage:

<!-- SVG file -->
<svg
  xmlns="http://www.w3.org/2000/svg"
  viewBox="0 0 512 512"
  fill="currentColor"
>
  ...
</svg>

<!-- Component -->
<div class="icon-[folder/iconName] text-blue-500" />

In this example, the SVG icon will inherit the color blue-500 from the parent element's text color.

If the SVG does not have the currentColor property, it will render in its original color and cannot have its color changed using Tailwind CSS classes.

Supports Tailwindcss Handling Hover, Focus, and Other States

<div
  className="icon-[balloon-outline] 
  hover:icon-[balloon] hover:text-violet-500"
/>

Supports SVG animations

Credits

This projects uses svgo