chore(tailwind): add square option to plugin, fix lint

plugins-demo/tailwind-demo/package.json

@@ -9,6 +9,7 @@
 	},
 	"keywords": [],
 	"devDependencies": {
+		"@iconify-json/fa6-regular": "^1.1.21",
 		"@iconify-json/mdi-light": "^1.1.10",
 		"@iconify-json/vscode-icons": "^1.1.36",
 		"@iconify/tailwind": "workspace:*",

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

@@ -41,6 +41,12 @@
 					class="iconify mdi-light--home h-12 w-12 text-red-600"
 				></span>
 			</p>
+			<p>
+				Scaled non-square icons:
+				<span
+					class="fa6-mask fa6-regular-bookmark text-blue-600"
+				></span>
+			</p>
 		</section>
 		<section class="mb-2">
 			<h1 class="text-2xl">Dynamic selectors plugin, custom options</h1>

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

@@ -91,6 +91,15 @@ module.exports = {
 			scale: 0,
 			// No prefixes list: reusing data from plugin above
 		}),
+		// Main plugin, no square and scale
+		addIconSelectors({
+			maskSelector: '.fa6-mask',
+			backgroundSelector: '.fa6-bg', // unused
+			iconSelector: '.{prefix}-{name}',
+			square: false,
+			scale: 2,
+			prefixes: ['fa6-regular'],
+		}),
 		// Plugin with clean selectors: requires writing all used icons in first parameter
 		addCleanIconSelectors(['mdi-light:home']),
 		// Plugin with dynamic selectors

plugins/tailwind/.eslintignore

@@ -0,0 +1,2 @@
+lib
+dist

plugins/tailwind/.eslintrc.cjs

@@ -0,0 +1,33 @@
+module.exports = {
+	env: {
+		browser: true,
+		es6: true,
+		node: true,
+	},
+	extends: [
+		'eslint:recommended',
+		'plugin:@typescript-eslint/recommended',
+		'plugin:@typescript-eslint/recommended-requiring-type-checking',
+		'plugin:prettier/recommended',
+	],
+	globals: {
+		Atomics: 'readonly',
+		SharedArrayBuffer: 'readonly',
+	},
+	parser: '@typescript-eslint/parser',
+	parserOptions: {
+		tsconfigRootDir: __dirname,
+		project: ['tsconfig.json', 'tests/tsconfig.json'],
+		extraFileExtensions: ['.cjs'],
+	},
+	plugins: ['@typescript-eslint'],
+	rules: {
+		'no-mixed-spaces-and-tabs': ['off'],
+		'no-unused-vars': ['off'],
+	},
+	overrides: [
+		{
+			files: ['src/**/*.ts', 'tests/*.ts'],
+		},
+	],
+};

plugins/tailwind/package.json

@@ -2,7 +2,7 @@
 	"name": "@iconify/tailwind",
 	"description": "Iconify plugin for Tailwind CSS",
 	"author": "Vjacheslav Trushkin <cyberalien@gmail.com> (https://iconify.design)",
-	"version": "1.1.1",
+	"version": "1.1.2",
 	"license": "MIT",
 	"main": "./dist/plugin.js",
 	"types": "./dist/plugin.d.ts",

plugins/tailwind/src/helpers/loader.ts

@@ -19,7 +19,9 @@ export function locateIconSet(prefix: string): LocatedIconSet | undefined {
 			main,
 			info,
 		};
-	} catch {}
+	} catch {
+		//
+	}
 
 	// Try `@iconify/json`
 	try {
@@ -27,7 +29,9 @@ export function locateIconSet(prefix: string): LocatedIconSet | undefined {
 		return {
 			main,
 		};
-	} catch {}
+	} catch {
+		//
+	}
 }
 
 /**
@@ -45,13 +49,19 @@ const cache = Object.create(null) as Record<string, IconifyJSON>;
  */
 function loadIconSetFromFile(source: LocatedIconSet): IconifyJSON | undefined {
 	try {
-		const result = JSON.parse(readFileSync(source.main, 'utf8'));
+		const result = JSON.parse(
+			readFileSync(source.main, 'utf8')
+		) as IconifyJSON;
 		if (!result.info && source.info) {
 			// Load info from a separate file
-			result.info = JSON.parse(readFileSync(source.info, 'utf8'));
+			result.info = JSON.parse(
+				readFileSync(source.info, 'utf8')
+			) as IconifyJSON['info'];
 		}
 		return result;
-	} catch {}
+	} catch {
+		//
+	}
 }
 
 /**
@@ -75,7 +85,7 @@ export function loadIconSet(
 	// Try to parse JSON
 	if (source.startsWith('{')) {
 		try {
-			return JSON.parse(source);
+			return JSON.parse(source) as IconifyJSON;
 		} catch {
 			// Invalid JSON
 		}

plugins/tailwind/src/helpers/options.ts

@@ -94,6 +94,9 @@ export interface IconifyPluginOptionsObject {
 	// Scale for icons, defaults to 1
 	scale?: number;
 
+	// Make icons square, defaults to true
+	square?: boolean;
+
 	// Prefixes to load
 	prefixes?: IconifyPluginListOptions;
 

plugins/tailwind/src/plugin.ts

@@ -26,7 +26,7 @@ export function addDynamicIconSelectors(options?: DynamicIconifyPluginOptions) {
 					return getDynamicCSSRules(icon, options);
 				} catch (err) {
 					// Log error, but do not throw it
-					console.error(err.message);
+					console.error((err as Error).message);
 				}
 			},
 		});

plugins/tailwind/src/preparsed.ts

@@ -5,6 +5,7 @@ import {
 } from '@iconify/utils/lib/css/common';
 import { defaultIconProps } from '@iconify/utils/lib/icon/defaults';
 import { parseIconSet } from '@iconify/utils/lib/icon-set/parse';
+import { calculateSize } from '@iconify/utils/lib/svg/size';
 import type {
 	IconifyPluginOptions,
 	IconifyPluginOptionsObject,
@@ -90,6 +91,12 @@ export function getCSSRulesForPlugin(options: IconifyPluginOptionsObject) {
 	// Add icon sets
 	const iconSelector = options.iconSelector || '.{prefix}--{name}';
 
+	// Make icons square
+	const square = options.square !== false;
+
+	// Scale
+	const scale = options.scale ?? 1;
+
 	options.prefixes?.forEach((item) => {
 		let prefix: string;
 		let iconSet: IconifyJSON | undefined;
@@ -162,7 +169,7 @@ export function getCSSRulesForPlugin(options: IconifyPluginOptionsObject) {
 				{
 					mode: 'mask', // not used because varName is set, but required
 					varName,
-					forceSquare: true,
+					forceSquare: square,
 				}
 			);
 
@@ -171,6 +178,11 @@ export function getCSSRulesForPlugin(options: IconifyPluginOptionsObject) {
 				.replace('{prefix}', prefix)
 				.replace('{name}', name);
 
+			// Scale non-square icons
+			if (!square && scale > 0 && scale !== 1 && iconRules.width) {
+				iconRules.width = calculateSize(iconRules.width, scale);
+			}
+
 			// Add to rules
 			rules[selector] = iconRules;
 		});

plugins/tailwind/tsconfig.json

@@ -1,6 +1,6 @@
 {
 	"extends": "./tsconfig-base.json",
-	"include": ["src/**/*.ts", ".eslintrc.js"],
+	"include": ["src/**/*.ts", ".eslintrc.cjs"],
 	"compilerOptions": {
 		"rootDir": "./src",
 		"outDir": "./lib",

pnpm-lock.yaml

@@ -832,6 +832,9 @@ importers:
 
   plugins-demo/tailwind-demo:
     devDependencies:
+      '@iconify-json/fa6-regular':
+        specifier: ^1.1.21
+        version: 1.1.21
       '@iconify-json/mdi-light':
         specifier: ^1.1.10
         version: 1.1.10
@@ -2639,6 +2642,9 @@ packages:
   '@iconify-icons/uil@1.2.3':
     resolution: {integrity: sha512-+UlrTCKJ13k8MdZdBJUdJLwrys6r8/BG3MT+C09Vcqbzh5IKGxS9RdJ7G3XeTn+H2MrIJ/EHWCNNUANlDqLk6A==}
 
+  '@iconify-json/fa6-regular@1.1.21':
+    resolution: {integrity: sha512-xgKt8d9AeMXKc1gfaUUqhYpDZjmC++e6ETsNyW6G0g8n7m2pUsnlpiTDUXGEtalVt6zl7M+HSU9RKrq4ma0rHg==}
+
   '@iconify-json/flat-color-icons@1.1.10':
     resolution: {integrity: sha512-tkkxTEPMYqDtss8tFij/gWfwrnt/NeChZoUGr6l71sWi7jYMwD35dYjFhM2bjtww5MCkVIAJaVx/3QJGUmMD/g==}
 
@@ -11600,6 +11606,10 @@ snapshots:
     dependencies:
       '@iconify/types': 2.0.0
 
+  '@iconify-json/fa6-regular@1.1.21':
+    dependencies:
+      '@iconify/types': 2.0.0
+
   '@iconify-json/flat-color-icons@1.1.10':
     dependencies:
       '@iconify/types': 2.0.0