Add scale option to tailwind plugin

zsilbi · Nov 24, 2023 · bce4af6 · bce4af6
1 parent 72aa8aa
commit bce4af6
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 1 deletion.
diff --git 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
@@ -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
@@ -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 {