From 4b956111cd806483edd8f03e29514d94d4a712e7 Mon Sep 17 00:00:00 2001
From: Vjacheslav Trushkin <cyberalien@gmail.com>
Date: Sat, 7 Jan 2023 10:17:14 +0200
Subject: [PATCH] feat(utils): support color parameter for css functions

---
 packages/utils/src/css/common.ts          | 13 +++++---
 packages/utils/src/css/icon.ts            |  4 ++-
 packages/utils/src/css/icons.ts           |  2 +-
 packages/utils/src/css/types.ts           |  3 ++
 packages/utils/tests/icon-to-css-test.ts  | 28 ++++++++++++++++-
 packages/utils/tests/icons-to-css-test.ts | 38 +++++++++++++++++------
 6 files changed, 70 insertions(+), 18 deletions(-)

diff --git a/packages/utils/src/css/common.ts b/packages/utils/src/css/common.ts
index f33c920..05482de 100644
--- a/packages/utils/src/css/common.ts
+++ b/packages/utils/src/css/common.ts
@@ -60,11 +60,14 @@ export function generateItemCSSRules(
 	}
 
 	// Get SVG
-	const svg = iconToHTML(icon.body.replace(/currentColor/g, '#000'), {
-		viewBox: `${icon.left} ${icon.top} ${icon.width} ${icon.height}`,
-		width: icon.width.toString(),
-		height: icon.height.toString(),
-	});
+	const svg = iconToHTML(
+		icon.body.replace(/currentColor/g, options.color || 'black'),
+		{
+			viewBox: `${icon.left} ${icon.top} ${icon.width} ${icon.height}`,
+			width: icon.width.toString(),
+			height: icon.height.toString(),
+		}
+	);
 
 	// Generate URL
 	const url = svgToURL(svg);
diff --git a/packages/utils/src/css/icon.ts b/packages/utils/src/css/icon.ts
index 6ba45d5..0afb3f7 100644
--- a/packages/utils/src/css/icon.ts
+++ b/packages/utils/src/css/icon.ts
@@ -14,7 +14,9 @@ export function getIconCSS(
 	// Get mode
 	const mode =
 		options.mode ||
-		(icon.body.indexOf('currentColor') === -1 ? 'background' : 'mask');
+		(options.color || icon.body.indexOf('currentColor') === -1
+			? 'background'
+			: 'mask');
 
 	// Get variable name
 	let varName = options.varName;
diff --git a/packages/utils/src/css/icons.ts b/packages/utils/src/css/icons.ts
index 5755775..1631c99 100644
--- a/packages/utils/src/css/icons.ts
+++ b/packages/utils/src/css/icons.ts
@@ -30,7 +30,7 @@ export function getIconsCSS(
 	const errors: string[] = [];
 
 	// Get mode
-	const palette = iconSet.info?.palette;
+	const palette = options.color ? true : iconSet.info?.palette;
 	let mode =
 		options.mode ||
 		(typeof palette === 'boolean' && (palette ? 'background' : 'mask'));
diff --git a/packages/utils/src/css/types.ts b/packages/utils/src/css/types.ts
index 122a397..9548a0a 100644
--- a/packages/utils/src/css/types.ts
+++ b/packages/utils/src/css/types.ts
@@ -40,6 +40,9 @@ export interface IconCSSSharedOptions {
 
 	// If true, result will always be square item
 	forceSquare?: boolean;
+
+	// Set color for monotone icons
+	color?: string;
 }
 
 /**
diff --git a/packages/utils/tests/icon-to-css-test.ts b/packages/utils/tests/icon-to-css-test.ts
index fe46268..b439370 100644
--- a/packages/utils/tests/icon-to-css-test.ts
+++ b/packages/utils/tests/icon-to-css-test.ts
@@ -63,7 +63,7 @@ describe('Testing CSS for icon', () => {
 		const expectedURL = svgToURL(
 			`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16">${icon.body.replace(
 				/currentColor/g,
-				'#000'
+				'black'
 			)}</svg>`
 		);
 
@@ -85,6 +85,32 @@ describe('Testing CSS for icon', () => {
 `);
 	});
 
+	test('Change color', () => {
+		const icon: IconifyIcon = {
+			body: '<path d="M0 0h16v16z" fill="currentColor" stroke="currentColor" stroke-width="1" />',
+		};
+		const expectedURL = svgToURL(
+			`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16">${icon.body.replace(
+				/currentColor/g,
+				'purple'
+			)}</svg>`
+		);
+
+		expect(
+			getIconCSS(icon, {
+				format: 'expanded',
+				color: 'purple',
+			})
+		).toBe(`.icon {
+  display: inline-block;
+  width: 1em;
+  height: 1em;
+  background: no-repeat center / 100%;
+  background-image: ${expectedURL};
+}
+`);
+	});
+
 	test('Mask with options', () => {
 		const icon: IconifyIcon = {
 			body: '<path d="M0 0h16v16z" fill="#f00" />',
diff --git a/packages/utils/tests/icons-to-css-test.ts b/packages/utils/tests/icons-to-css-test.ts
index 26e28b1..14f7485 100644
--- a/packages/utils/tests/icons-to-css-test.ts
+++ b/packages/utils/tests/icons-to-css-test.ts
@@ -24,11 +24,11 @@ describe('Testing CSS for multiple icons', () => {
 				},
 			},
 		};
-		const expectedURL = (name: string) =>
+		const expectedURL = (name: string, color = 'black') =>
 			svgToURL(
 				`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16">${iconSet.icons[
 					name
-				].body.replace(/currentColor/g, '#000')}</svg>`
+				].body.replace(/currentColor/g, color)}</svg>`
 			);
 
 		expect(
@@ -54,6 +54,24 @@ describe('Testing CSS for multiple icons', () => {
 .icon--test-prefix--airplane {
   background-image: ${expectedURL('airplane')};
 }
+`);
+
+		// Force background by setting color
+		expect(
+			getIconsCSS(iconSet, ['empty'], {
+				format: 'expanded',
+				color: 'red',
+			})
+		).toBe(`.icon--test-prefix {
+  display: inline-block;
+  width: 1em;
+  height: 1em;
+  background: no-repeat center / 100%;
+}
+
+.icon--test-prefix--empty {
+  background-image: ${expectedURL('empty', 'red')};
+}
 `);
 	});
 
@@ -93,11 +111,11 @@ describe('Testing CSS for multiple icons', () => {
 				},
 			},
 		};
-		const expectedURL = (name: string) =>
+		const expectedURL = (name: string, color = 'black') =>
 			svgToURL(
 				`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16">${iconSet.icons[
 					name
-				].body.replace(/currentColor/g, '#000')}</svg>`
+				].body.replace(/currentColor/g, color)}</svg>`
 			);
 
 		expect(
@@ -162,11 +180,11 @@ describe('Testing CSS for multiple icons', () => {
 			},
 			width: 24,
 		};
-		const expectedURL = (name: string) =>
+		const expectedURL = (name: string, color = 'black') =>
 			svgToURL(
 				`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 16" width="24" height="16">${iconSet.icons[
 					name
-				].body.replace(/currentColor/g, '#000')}</svg>`
+				].body.replace(/currentColor/g, color)}</svg>`
 			);
 
 		expect(
@@ -234,11 +252,11 @@ describe('Testing CSS for multiple icons', () => {
 			},
 			width: 24,
 		};
-		const expectedURL = (name: string) =>
+		const expectedURL = (name: string, color = 'black') =>
 			svgToURL(
 				`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 16" width="24" height="16">${iconSet.icons[
 					name
-				].body.replace(/currentColor/g, '#000')}</svg>`
+				].body.replace(/currentColor/g, color)}</svg>`
 			);
 
 		expect(
@@ -306,11 +324,11 @@ describe('Testing CSS for multiple icons', () => {
 			},
 			width: 24,
 		};
-		const expectedURL = (name: string) =>
+		const expectedURL = (name: string, color = 'black') =>
 			svgToURL(
 				`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 16" width="24" height="16">${iconSet.icons[
 					name
-				].body.replace(/currentColor/g, '#000')}</svg>`
+				].body.replace(/currentColor/g, color)}</svg>`
 			);
 
 		expect(