From bce4af62b221121ab9aea9d0dacf5fc8c511e5a5 Mon Sep 17 00:00:00 2001
From: JB Hutch <jbhutch01@gmail.com>
Date: Fri, 24 Nov 2023 11:42:55 -0500
Subject: [PATCH] Add scale option to tailwind plugin

---
 plugins/tailwind/src/dynamic.ts            | 10 +++++-
 plugins/tailwind/src/options.ts            |  3 ++
 plugins/tailwind/tests/dynamic-css-test.ts | 36 ++++++++++++++++++++++
 3 files changed, 48 insertions(+), 1 deletion(-)

diff --git a/plugins/tailwind/src/dynamic.ts b/plugins/tailwind/src/dynamic.ts
index 094f7df..3619eff 100644
--- a/plugins/tailwind/src/dynamic.ts
+++ b/plugins/tailwind/src/dynamic.ts
@@ -8,7 +8,7 @@ import type { DynamicIconifyPluginOptions } from './options';
  */
 export function getDynamicCSSRules(
 	icon: string,
-	options: DynamicIconifyPluginOptions = {}
+	{ scale = 1, ...options }: DynamicIconifyPluginOptions = {}
 ): Record<string, string> {
 	const nameParts = icon.split(/--|\:/);
 	if (nameParts.length !== 2) {
@@ -34,6 +34,14 @@ export function getDynamicCSSRules(
 		throw new Error(`Cannot find "${icon}". Bad icon name?`);
 	}
 
+	if (scale) {
+		generated.common.rules.height = scale + 'em'
+		generated.common.rules.width = scale + 'em'
+	} else {
+		delete generated.common.rules.height
+		delete generated.common.rules.width
+	}
+
 	return {
 		// Common rules
 		...(options.overrideOnly || !generated.common?.rules
diff --git a/plugins/tailwind/src/options.ts b/plugins/tailwind/src/options.ts
index dfc8a16..8a5982a 100644
--- a/plugins/tailwind/src/options.ts
+++ b/plugins/tailwind/src/options.ts
@@ -27,4 +27,7 @@ export interface DynamicIconifyPluginOptions
 
 	// Include icon-specific selectors only
 	overrideOnly?: true;
+
+	// Scale relative to the the default value, (ex. scale: 2 = 2em). Set to 0 to disable default value.
+	scale?: number
 }
diff --git a/plugins/tailwind/tests/dynamic-css-test.ts b/plugins/tailwind/tests/dynamic-css-test.ts
index 2ac16ca..d8d8d17 100644
--- a/plugins/tailwind/tests/dynamic-css-test.ts
+++ b/plugins/tailwind/tests/dynamic-css-test.ts
@@ -29,6 +29,42 @@ describe('Testing dynamic CSS rules', () => {
 		});
 	});
 
+	it('Scale appropriate sets height/width default value', () => {
+		const data = getDynamicCSSRules('mdi-light--home', {
+			scale: 2,
+		});
+		expect(data).toEqual({
+			'display': 'inline-block',
+			'width': '2em',
+			'height': '2em',
+			'background-color': 'currentColor',
+			'-webkit-mask-image': 'var(--svg)',
+			'mask-image': 'var(--svg)',
+			'-webkit-mask-repeat': 'no-repeat',
+			'mask-repeat': 'no-repeat',
+			'-webkit-mask-size': '100% 100%',
+			'mask-size': '100% 100%',
+			'--svg': data['--svg'],
+		});
+	});
+
+	it('Scale removes default value', () => {
+		const data = getDynamicCSSRules('mdi-light--home', {
+			scale: 0,
+		});
+		expect(data).toEqual({
+			'display': 'inline-block',
+			'background-color': 'currentColor',
+			'-webkit-mask-image': 'var(--svg)',
+			'mask-image': 'var(--svg)',
+			'-webkit-mask-repeat': 'no-repeat',
+			'mask-repeat': 'no-repeat',
+			'-webkit-mask-size': '100% 100%',
+			'mask-size': '100% 100%',
+			'--svg': data['--svg'],
+		});
+	});
+
 	it('Missing icon', () => {
 		let threw = false;
 		try {