chore(tailwind): allow scale 0 in plugin

plugins-demo/tailwind-demo/src/index.html

@@ -32,6 +32,12 @@
 					></span>
 				</span>
 			</p>
+			<p>
+				Using width/height to resize icon:
+				<span
+					class="iconify-nosize mdi-light--home h-12 w-12 text-blue-600"
+				></span>
+			</p>
 		</section>
 		<section class="mb-2">
 			<h1 class="text-2xl">Dynamic selectors plugin, custom options</h1>
@@ -98,7 +104,9 @@
 			</p>
 			<p>
 				Custom size set via width/height:
-				<span class="h-12 w-12 scaled-icon-[mdi-light--forum]"></span>
+				<span
+					class="h-12 w-12 scaled-icon-[mdi-light--forum] text-red-600"
+				></span>
 			</p>
 		</section>
 	</body>

plugins-demo/tailwind-demo/tailwind.config.js

@@ -84,6 +84,14 @@ module.exports = {
 				},
 			],
 		}),
+		// Main plugin, no size
+		addIconSelectors({
+			maskSelector: '.iconify-nosize',
+			backgroundSelector: '',
+			scale: 0,
+			// Empty prefixes list: reusing data from plugin above
+			prefixes: [],
+		}),
 		// Plugin with clean selectors: requires writing all used icons in first parameter
 		addCleanIconSelectors(['mdi-light:home']),
 		// Plugin with dynamic selectors

plugins/tailwind/src/preparsed.ts

@@ -29,12 +29,19 @@ export function getCSSRulesForPlugin(options: IconifyPluginOptions) {
 	const varName = fullOptions.varName || 'svg';
 
 	// Scale icons
-	const overrideRules: Record<string, string> = fullOptions.scale
-		? {
-				width: fullOptions.scale + 'em',
-				height: fullOptions.scale + 'em',
-		  }
-		: {};
+	const scale = fullOptions.scale ?? 1;
+	const adjustScale = (obj: Record<string, string>) => {
+		if (!scale) {
+			// Delete width and height
+			delete obj['width'];
+			delete obj['height'];
+		} else if (scale !== 1) {
+			// Set custom width and height
+			obj['width'] = scale + 'em';
+			obj['height'] = scale + 'em';
+		}
+		return obj;
+	};
 
 	// Add common rules
 	const maskSelector = fullOptions.maskSelector ?? '.iconify';
@@ -42,21 +49,23 @@ export function getCSSRulesForPlugin(options: IconifyPluginOptions) {
 		fullOptions.backgroundSelector ?? '.iconify-color';
 	if (maskSelector) {
 		rules[maskSelector] = Object.assign(
-			getCommonCSSRules({
-				mode: 'mask',
-				varName,
-			}),
-			overrideRules,
+			adjustScale(
+				getCommonCSSRules({
+					mode: 'mask',
+					varName,
+				})
+			),
 			fullOptions.extraMaskRules || {}
 		);
 	}
 	if (backgroundSelector) {
 		rules[backgroundSelector] = Object.assign(
-			getCommonCSSRules({
-				mode: 'background',
-				varName,
-			}),
-			overrideRules,
+			adjustScale(
+				getCommonCSSRules({
+					mode: 'background',
+					varName,
+				})
+			),
 			fullOptions.extraBackgroundRules || {}
 		);
 	}