chore: add options to tailwind plugin

plugins-demo/tailwind4-demo/src/App.vue

@@ -10,7 +10,7 @@
 				Monotone icons, arrow changes on hover:
 				<span class="text-2xl demo">
 					<span
-						class="icon-[mdi-light--arrow-left] hover:icon-[mdi-light--arrow-right]"
+						class="icon-[mdi-light--arrow-left] hover:icon-override-[mdi-light--arrow-right]"
 					></span>
 					<span class="icon-[mdi-light--forum]"></span>
 				</span>

plugins-demo/tailwind4-demo/src/assets/main.css

@@ -2,6 +2,11 @@
 
 @plugin "@iconify/tailwind4";
 
+@plugin "@iconify/tailwind4" {
+	prefix: 'icon-override';
+	override-only: true;
+}
+
 .demo {
 	color: var(--color-blue-600);
 }

plugins/tailwind/package.json

@@ -3,7 +3,7 @@
 	"description": "Iconify plugin for Tailwind CSS",
 	"type": "module",
 	"author": "Vjacheslav Trushkin <cyberalien@gmail.com> (https://iconify.design)",
-	"version": "1.0.0",
+	"version": "1.0.1",
 	"license": "MIT",
 	"main": "./dist/plugin.js",
 	"types": "./dist/plugin.d.ts",

plugins/tailwind/src/plugin.ts

@@ -1,26 +1,55 @@
 /* eslint-disable @typescript-eslint/unbound-method */
 import plugin from 'tailwindcss/plugin';
 import { getDynamicCSSRules } from './dynamic.js';
+import type { DynamicIconifyPluginOptions } from './helpers/options.js';
 
 /**
  * Generate styles for dynamic selector
  *
  * Usage in HTML: <span class="icon-[mdi-light--home]" />
  */
-function addDynamicIconSelectors(): ReturnType<typeof plugin> {
-	const prefix = 'icon';
-	return plugin(({ matchComponents }) => {
-		matchComponents({
-			[prefix]: (icon: string) => {
-				try {
-					return getDynamicCSSRules(icon);
-				} catch (err) {
-					// Log error, but do not throw it
-					console.error((err as Error).message);
-					return {};
-				}
-			},
+function addDynamicIconSelectors(): ReturnType<typeof plugin.withOptions> {
+	return plugin.withOptions((params: unknown) => {
+		// Clean up options
+		const options: DynamicIconifyPluginOptions = {};
+		Object.entries(params ?? {}).forEach(([key, value]) => {
+			switch (key) {
+				case 'prefix':
+					if (typeof value === 'string') {
+						options.prefix = value;
+					}
+					break;
+
+				case 'overrideOnly':
+				case 'override-only':
+				case 'overrideonly':
+					if (value === true) {
+						options.overrideOnly = true;
+					}
+					break;
+
+				case 'scale':
+					if (typeof value === 'number') {
+						options.scale = value;
+					}
+					break;
+			}
 		});
+
+		const prefix = options.prefix || 'icon';
+		return ({ matchComponents }) => {
+			matchComponents({
+				[prefix]: (icon: string) => {
+					try {
+						return getDynamicCSSRules(icon);
+					} catch (err) {
+						// Log error, but do not throw it
+						console.error((err as Error).message);
+						return {};
+					}
+				},
+			});
+		};
 	});
 }