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(
``
);
@@ -85,6 +85,32 @@ describe('Testing CSS for icon', () => {
`);
});
+ test('Change color', () => {
+ const icon: IconifyIcon = {
+ body: '',
+ };
+ const expectedURL = svgToURL(
+ ``
+ );
+
+ 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: '',
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(
``
+ ].body.replace(/currentColor/g, color)}`
);
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(
``
+ ].body.replace(/currentColor/g, color)}`
);
expect(
@@ -162,11 +180,11 @@ describe('Testing CSS for multiple icons', () => {
},
width: 24,
};
- const expectedURL = (name: string) =>
+ const expectedURL = (name: string, color = 'black') =>
svgToURL(
``
+ ].body.replace(/currentColor/g, color)}`
);
expect(
@@ -234,11 +252,11 @@ describe('Testing CSS for multiple icons', () => {
},
width: 24,
};
- const expectedURL = (name: string) =>
+ const expectedURL = (name: string, color = 'black') =>
svgToURL(
``
+ ].body.replace(/currentColor/g, color)}`
);
expect(
@@ -306,11 +324,11 @@ describe('Testing CSS for multiple icons', () => {
},
width: 24,
};
- const expectedURL = (name: string) =>
+ const expectedURL = (name: string, color = 'black') =>
svgToURL(
``
+ ].body.replace(/currentColor/g, color)}`
);
expect(