0.0.9 • Published 2 years ago

@hyoban/tailwindcss-icons v0.0.9

Weekly downloads
-
License
MIT
Repository
-
Last release
2 years ago

💛 You can help the author become a full-time open-source maintainer by sponsoring him on GitHub.


@egoist/tailwindcss-icons

Use any icon from Iconify

npm version npm downloads

Install

npm i @egoist/tailwindcss-icons -D

Usage

In your tailwind.config.js:

const { iconsPlugin, getIconCollections } = require("@egoist/tailwindcss-icons")

module.exports = {
  plugins: [
    iconsPlugin({
      // Select the icon collections you want to use
      // You can also ignore this option to automatically discover all icon collections you have installed
      collections: getIconCollections(["mdi", "lucide"]),
    }),
  ],
}

You also need to install @iconify/json (full icon collections, 50MB) or @iconify-json/{collection_name} (individual icon package):

# install every icon:
npm i @iconify/json -D

# or install individual packages like this:
npm i @iconify-json/mdi @iconify-json/lucide -D

Then you can use the icons in your HTML:

<!-- pattern: i-{collection_name}-{icon_name} -->
<span class="i-mdi-home"></span>

Search the icon you want to use here: https://icones.js.org

Plugin Options

OptionTypeDefaultDescription
prefixstringiClass prefix for matching icon rules
scalenumber1Scale relative to the current font size
extraPropertiesRecord<string, string>{}Extra CSS properties applied to the generated CSS.
collectionNamesAliaskey in CollectionNames?: string{}Alias to customize collection names.

Custom Icons

You can also use custom icons with this plugin, for example:

module.exports = {
  plugins: [
    iconsPlugin({
      collections: {
        foo: {
          icons: {
            "arrow-left": {
              // svg body
              body: '<path d="M10 19l-7-7m0 0l7-7m-7 7h18"/>',
              // svg width and height, optional
              width: 24,
              height: 24,
            },
          },
        },
      },
    }),
  ],
}

Then you can use this custom icon as class name: i-foo-arrow-left.

Generate Icon Dynamically

The idea is from @iconify/tailwind, thanks to the author of Iconify for the great work!

If you want to install @iconify/json and use whatever icon you want, you should add another plugin to your tailwind.config.js.

This is because we can not provide autocomplete for all icons from @iconify/json, it will make your editor slow.

const { iconsPlugin, dynamicIconsPlugin } = require("@egoist/tailwindcss-icons")

module.exports = {
  plugins: [iconsPlugin(), dynamicIconsPlugin()],
}

Then you can use icons dynamically like <span class="i-[mdi-light--home]"></span>.

Sponsors

sponsors

License

MIT © EGOIST

0.0.9

2 years ago

0.0.8

2 years ago

0.0.7

2 years ago

0.0.6

2 years ago

0.0.5

2 years ago

0.0.4

2 years ago