fix(utils): detect palette in getIconsCSS

packages/utils/package.json

@@ -3,7 +3,7 @@
 	"type": "module",
 	"description": "Common functions for working with Iconify icon sets used by various packages.",
 	"author": "Vjacheslav Trushkin",
-	"version": "2.1.3",
+	"version": "2.1.4",
 	"license": "MIT",
 	"bugs": "https://github.com/iconify/iconify/issues",
 	"homepage": "https://iconify.design/",

packages/utils/src/css/icon.ts

@@ -14,7 +14,7 @@ export function getIconCSS(
 	// Get mode
 	const mode =
 		options.mode ||
-		(options.color || icon.body.indexOf('currentColor') === -1
+		(options.color || !icon.body.includes('currentColor')
 			? 'background'
 			: 'mask');
 

packages/utils/src/css/icons.ts

@@ -41,13 +41,26 @@ export function getIconsCSSData(
 		options.mode ||
 		(typeof palette === 'boolean' && (palette ? 'background' : 'mask'));
 	if (!mode) {
-		// Cannot get mode: need either mode set in options or icon set with info
-		mode = 'mask';
-		errors.push(
-			'/* cannot detect icon mode: not set in options and icon set is missing info, rendering as ' +
-				mode +
-				' */'
-		);
+		// Attempt to detect mode from first available icon
+		for (let i = 0; i < names.length; i++) {
+			const icon = getIconData(iconSet, names[i]);
+			if (icon) {
+				mode = icon.body.includes('currentColor')
+					? 'mask'
+					: 'background';
+				break;
+			}
+		}
+
+		if (!mode) {
+			// Failed to detect mode
+			mode = 'mask';
+			errors.push(
+				'/* cannot detect icon mode: not set in options and icon set is missing info, rendering as ' +
+					mode +
+					' */'
+			);
+		}
 	}
 
 	// Get variable name

packages/utils/tests/icons-to-css-test.ts

@@ -3,7 +3,7 @@ import { getIconsCSS } from '../lib/css/icons';
 import type { IconifyJSON } from '@iconify/types';
 
 describe('Testing CSS for multiple icons', () => {
-	test('Background', () => {
+	test('Monotone icons', () => {
 		const iconSet: IconifyJSON = {
 			prefix: 'test-prefix',
 			icons: {
@@ -31,8 +31,38 @@ describe('Testing CSS for multiple icons', () => {
 				].body.replace(/currentColor/g, color)}</svg>`
 			);
 
+		// Detect mode: mask
 		expect(
-			getIconsCSS(iconSet, ['empty', '123', 'airplane'], {
+			getIconsCSS(iconSet, ['activity', '123', 'airplane'], {
+				format: 'expanded',
+			})
+		).toBe(`.icon--test-prefix {
+  display: inline-block;
+  width: 1em;
+  height: 1em;
+  background-color: currentColor;
+  -webkit-mask: no-repeat center / 100%;
+  mask: no-repeat center / 100%;
+  -webkit-mask-image: var(--svg);
+  mask-image: var(--svg);
+}
+
+.icon--test-prefix--activity {
+  --svg: ${expectedURL('activity')};
+}
+
+.icon--test-prefix--123 {
+  --svg: ${expectedURL('123')};
+}
+
+.icon--test-prefix--airplane {
+  --svg: ${expectedURL('airplane')};
+}
+`);
+
+		// Force mode: background
+		expect(
+			getIconsCSS(iconSet, ['123'], {
 				format: 'expanded',
 				mode: 'background',
 			})
@@ -43,17 +73,9 @@ describe('Testing CSS for multiple icons', () => {
   background: no-repeat center / 100%;
 }
 
-.icon--test-prefix--empty {
-  background-image: ${expectedURL('empty')};
-}
-
 .icon--test-prefix--123 {
   background-image: ${expectedURL('123')};
 }
-
-.icon--test-prefix--airplane {
-  background-image: ${expectedURL('airplane')};
-}
 `);
 
 		// Force background by setting color

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": "0.1.1",
+	"version": "0.1.2",
 	"license": "MIT",
 	"main": "./dist/plugin.js",
 	"types": "./dist/plugin.d.ts",