agerix/iconify
2
0
Fork 0
mirror of https://github.com/iconify/iconify.git synced 2025-01-06 07:20:40 +00:00
Code Issues Releases Activity

feat(utils): support color parameter for css functions

Browse Source
This commit is contained in:
Vjacheslav Trushkin 2023-01-07 10:17:14 +02:00
parent a742cf1d94
commit 4b956111cd
6 changed files with 70 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
packages/utils/src/css/common.ts
View File

@ -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);

4
packages/utils/src/css/icon.ts
View File

@ -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;

2
packages/utils/src/css/icons.ts
View File

@ -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'));

3
packages/utils/src/css/types.ts
View File

@ -40,6 +40,9 @@ export interface IconCSSSharedOptions {
// If true, result will always be square item
forceSquare?: boolean;
// Set color for monotone icons
color?: string;
}
/**

28
packages/utils/tests/icon-to-css-test.ts
View File

@ -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" />',

38
packages/utils/tests/icons-to-css-test.ts
View File

@ -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(