From 6c6eec1c71faf57ebab35097a4c9150871bb6fa1 Mon Sep 17 00:00:00 2001
From: Vjacheslav Trushkin <cyberalien@gmail.com>
Date: Thu, 26 Dec 2024 10:05:04 +0200
Subject: [PATCH] chore: add options to tailwind plugin

---
 plugins-demo/tailwind4-demo/src/App.vue       |  2 +-
 .../tailwind4-demo/src/assets/main.css        |  5 ++
 plugins/tailwind/package.json                 |  2 +-
 plugins/tailwind/src/plugin.ts                | 55 ++++++++++++++-----
 4 files changed, 49 insertions(+), 15 deletions(-)

diff --git a/plugins-demo/tailwind4-demo/src/App.vue b/plugins-demo/tailwind4-demo/src/App.vue
index f2697bc..6430145 100644
--- a/plugins-demo/tailwind4-demo/src/App.vue
+++ b/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>
diff --git a/plugins-demo/tailwind4-demo/src/assets/main.css b/plugins-demo/tailwind4-demo/src/assets/main.css
index 7726e74..77bd40f 100644
--- a/plugins-demo/tailwind4-demo/src/assets/main.css
+++ b/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);
 }
diff --git a/plugins/tailwind/package.json b/plugins/tailwind/package.json
index 2bee8c9..9925f3b 100644
--- a/plugins/tailwind/package.json
+++ b/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",
diff --git a/plugins/tailwind/src/plugin.ts b/plugins/tailwind/src/plugin.ts
index 0eca6f9..26411ac 100644
--- a/plugins/tailwind/src/plugin.ts
+++ b/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 {};
+					}
+				},
+			});
+		};
 	});
 }