From 744a7ca0fbd86c998d4321b1f305a58b92f704b6 Mon Sep 17 00:00:00 2001 From: Vjacheslav Trushkin Date: Mon, 13 May 2024 17:13:01 +0300 Subject: [PATCH] chore(tailwind): update readme --- plugins/tailwind/README.md | 105 +------------------------------------ 1 file changed, 1 insertion(+), 104 deletions(-) diff --git a/plugins/tailwind/README.md b/plugins/tailwind/README.md index 68c981e..2b524eb 100644 --- a/plugins/tailwind/README.md +++ b/plugins/tailwind/README.md @@ -6,110 +6,7 @@ This plugin creates CSS for over 150k open source icons. ## Usage -1. Install packages icon sets. -2. In `tailwind.config.js` import `addDynamicIconSelectors` from `@iconify/tailwind`. - -## HTML - -To use icon in HTML, add class with class name like this: `icon-[mdi-light--home]` - -```html - -``` - -Class name has 3 parts: - -- Selectot prefix, which can be set in `prefix` option of plugin. Default value is `icon`. -- `-` to tell Tailwind that class name is not complete. -- `[{prefix}--{name}]` for icon name, where `{prefix}` is icon set prefix, `{name}` is icon name. - -In Iconify all icon names use the following format: `{prefix}:{name}`. Due to limitations of Tailwind CSS, same format cannot be used with plugin, so instead, prefix and name are separated by double dash: `{prefix}--{name}`. - -### Color, size, alignment - -Monoton icons can change color! See [Iconify documentation](https://iconify.design/docs/usage/css/#monotone) for longer explanation. - -To change icon size or color, change font size or text color, like you would with any text. - -Icon color cannot be changed for icons with hardcoded palette, such as most emoji sets or flag icons. - -To align icon below baseline, add negative vertical alignment, like this (you can also use Tailwind class for that): - -```html - -``` - -## Installing icon sets - -Plugin does not include icon sets. You need to install icon sets separately. - -To install all 150k+ icons, install `@iconify/json` as a dev dependency. - -If you do not want to install big package, install `@iconify-json/` packages for icon sets that you use. - -See [Iconify icon sets](https://icon-sets.iconify.design/) for list of available icon sets and icons. - -See [Iconify documentation](https://iconify.design/docs/icons/json.html) for list of packages. - -## Tailwind config - -Add this to `tailwind.config.js`: - -```js -const { addDynamicIconSelectors } = require('@iconify/tailwind'); -``` - -Then in plugins section add `addDynamicIconSelectors`. - -Example: - -```js -module.exports = { - content: ['./src/*.html'], - theme: { - extend: {}, - }, - plugins: [ - // Iconify plugin - addDynamicIconSelectors(), - ], - presets: [], -}; -``` - -### Options - -Plugin accepts options as a second parameter: - -- `prefix` is class name prefix. Default value is `icon`. Make sure there is no `-` at the end: it is added in classes, but not in plugin parameter. -- `overrideOnly`: set to `true` to generate rules that override only icon data. See below. -- `scale`: sets the default icon height/width value. Can be set to 0 which removes the default height/width. Default is 1 (1em). -- `files`: list of custom files for icon sets. Key is icon set prefix, value is location of `.json` file with icon set in IconifyJSON format. -- `iconSet`: list of custom icon sets. Key is prefix, value is either icon set data in `IconifyJSON` format or a synchronous callback that returns `IconifyJSON` data. - -#### overrideOnly - -You can use `overrideOnly` to load some icons without full rules, such as changing icon on hover when main and hover icons are from the same icon set and have same width/height ratio. - -Example of config: - -```js -plugins: [ - // `icon-` - addDynamicIconSelectors(), - // `icon-hover-` - addDynamicIconSelectors({ - prefix: "icon-hover", - overrideOnly: true, - }), - ], -``` - -and usage in HTML: - -```html - -``` +[See Iconify for Tailwind CSS documentation](https://iconify.design/docs/usage/css/tailwind/#installation). ## License