tailwindcss-plugin-icons - npm Package Compare versions

Comparing version 2.0.1 to 2.0.2

dist/index.d.ts

		@@ -10,3 +10,3 @@ import * as tailwindcss_types_config from 'tailwindcss/types/config'
		declare const Icons: {
		(options: TailwindcssPluginIconsOptions): {
		(options: Options): {
		handler: tailwindcss_types_config.PluginCreator
		@@ -25,12 +25,4 @@ config?: tailwindcss_types_config.Config \| undefined
		}
		declare type TailwindcssPluginIconsOptions = (
		pluginApi: PluginAPI
		) => IconSetOptionsRecord
		declare type Options = (pluginApi: PluginAPI) => IconSetOptionsRecord

		export {
		IconSetOptions,
		IconSetOptionsRecord,
		Icons,
		SCALE,
		TailwindcssPluginIconsOptions
		}
		export { IconSetOptions, IconSetOptionsRecord, Icons, Options, SCALE }

package.json

		{
		"name": "tailwindcss-plugin-icons",
		"version": "2.0.1",
		"version": "2.0.2",
		"description": "Tailwind CSS icons with classes",
		@@ -5,0 +5,0 @@ "license": "MIT",

README.md

		@@ -19,5 +19,5 @@ # tailwindcss-plugin-icons

		1. Search the available icon sets at [Icônes](https://icones.js.org/collection/all?s=) or [Iconify](https://icon-sets.iconify.design/) and choose the icons your project needs
		2. Install the icon sets with `npm install @iconify-json/[the-collection-you-want]`. For example [heroicons](https://heroicons.com/) `npm install @iconify-json/heroicons-outline @iconify-json/heroicons-solid`
		3. Configure the plugin in your `tailwind.config.js` (see the [example app](https://stackblitz.com/github/JensDll/tailwindcss-plugin-icons/tree/main/playground/vue?file=tailwind.config.js) for a complete example with comments):
		1. Search the available icon sets at [Icônes](https://icones.js.org/collection/all?s=) or [Iconify](https://icon-sets.iconify.design/) and choose the icons your project needs.
		2. Install the icon sets with `npm install @iconify-json/[the-collection-you-want]`.
		3. Configure the plugin in your `tailwind.config.js`:

		@@ -27,37 +27,45 @@ ```js

		/**
		* @type {import('tailwindcss-plugin-icons').Options}
		*/
		const options = ({ theme }) => ({
		heroiconsOutline: {
		icons: {
		lockOpen: {},
		lockClosed: {},
		plusCircle: {
		cursor: 'pointer',
		color: theme('colors.emerald.600'),
		'&:hover': {
		color: theme('colors.emerald.700')
		}
		},
		minusCircle: {
		cursor: 'pointer',
		color: theme('colors.red.600'),
		'&:hover': {
		color: theme('colors.red.700')
		},
		'.dark &': {
		color: theme('colors.red.400')
		}
		},
		'trash?bg': {}
		},
		scale: 1.5,
		location: 'https://esm.sh/@iconify-json/heroicons-outline@1.1.4/icons.json'
		}
		})

		/**
		* @type {import('tailwindcss').Config}
		*/
		module.exports = {
		[...]
		plugins: [
		Icons(({ theme }) => ({
		heroiconsOutline: {
		icons: {
		lockOpen: {},
		lockClosed: {},
		plusCircle: {
		cursor: 'pointer',
		color: theme('colors.emerald.600'),
		'&:hover': {
		color: theme('colors.emerald.700')
		}
		},
		minusCircle: {
		cursor: 'pointer',
		color: theme('colors.red.600'),
		'&:hover': {
		color: theme('colors.red.700')
		},
		'.dark &': {
		color: theme('colors.red.400')
		}
		},
		'trash?bg': {}
		},
		scale: 1.5
		location: 'https://example.com/icons.json'
		}
		}))
		]
		plugins: [Icons(options)]
		}
		```

		`Options` gets forwarded all of the [Tailwind CSS plugin API](https://tailwindcss.com/docs/plugins) and returns the selected icons with optional default style and scale. After the icon's name, you can pass `?bg` or `?mask` to force a specific render method (see also [example](https://stackblitz.com/github/JensDll/tailwindcss-plugin-icons/tree/main/playground/vue?file=tailwind.config.js)).

		<!-- markdownlint-disable-next-line ol-prefix -->
		4. Write icons with [Tailwind CSS](https://tailwindcss.com/docs/installation) classes directly in your markup:
		@@ -64,0 +72,0 @@

dist/index.cjs