agerix/iconify
2
0
Fork 0
mirror of https://github.com/iconify/iconify.git synced 2025-01-07 15:44:05 +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 // Get SVG
const svg = iconToHTML(icon.body.replace(/currentColor/g, '#000'), { const svg = iconToHTML(
viewBox: `${icon.left} ${icon.top} ${icon.width} ${icon.height}`, icon.body.replace(/currentColor/g, options.color || 'black'),
width: icon.width.toString(), {
height: icon.height.toString(), viewBox: `${icon.left} ${icon.top} ${icon.width} ${icon.height}`,
}); width: icon.width.toString(),
height: icon.height.toString(),
}
);
// Generate URL // Generate URL
const url = svgToURL(svg); const url = svgToURL(svg);

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

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

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

@ -30,7 +30,7 @@ export function getIconsCSS(
const errors: string[] = []; const errors: string[] = [];
// Get mode // Get mode
const palette = iconSet.info?.palette; const palette = options.color ? true : iconSet.info?.palette;
let mode = let mode =
options.mode || options.mode ||
(typeof palette === 'boolean' && (palette ? 'background' : 'mask')); (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 // If true, result will always be square item
forceSquare?: boolean; 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( const expectedURL = svgToURL(
`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16">${icon.body.replace( `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16">${icon.body.replace(
/currentColor/g, /currentColor/g,
'#000' 'black'
)}</svg>` )}</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', () => { test('Mask with options', () => {
const icon: IconifyIcon = { const icon: IconifyIcon = {
body: '<path d="M0 0h16v16z" fill="#f00" />', 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( svgToURL(
`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16">${iconSet.icons[ `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16">${iconSet.icons[
name name
].body.replace(/currentColor/g, '#000')}</svg>` ].body.replace(/currentColor/g, color)}</svg>`
); );
expect( expect(
@ -54,6 +54,24 @@ describe('Testing CSS for multiple icons', () => {
.icon--test-prefix--airplane { .icon--test-prefix--airplane {
background-image: ${expectedURL('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( svgToURL(
`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16">${iconSet.icons[ `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16">${iconSet.icons[
name name
].body.replace(/currentColor/g, '#000')}</svg>` ].body.replace(/currentColor/g, color)}</svg>`
); );
expect( expect(
@ -162,11 +180,11 @@ describe('Testing CSS for multiple icons', () => {
}, },
width: 24, width: 24,
}; };
const expectedURL = (name: string) => const expectedURL = (name: string, color = 'black') =>
svgToURL( svgToURL(
`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 16" width="24" height="16">${iconSet.icons[ `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 16" width="24" height="16">${iconSet.icons[
name name
].body.replace(/currentColor/g, '#000')}</svg>` ].body.replace(/currentColor/g, color)}</svg>`
); );
expect( expect(
@ -234,11 +252,11 @@ describe('Testing CSS for multiple icons', () => {
}, },
width: 24, width: 24,
}; };
const expectedURL = (name: string) => const expectedURL = (name: string, color = 'black') =>
svgToURL( svgToURL(
`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 16" width="24" height="16">${iconSet.icons[ `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 16" width="24" height="16">${iconSet.icons[
name name
].body.replace(/currentColor/g, '#000')}</svg>` ].body.replace(/currentColor/g, color)}</svg>`
); );
expect( expect(
@ -306,11 +324,11 @@ describe('Testing CSS for multiple icons', () => {
}, },
width: 24, width: 24,
}; };
const expectedURL = (name: string) => const expectedURL = (name: string, color = 'black') =>
svgToURL( svgToURL(
`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 16" width="24" height="16">${iconSet.icons[ `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 16" width="24" height="16">${iconSet.icons[
name name
].body.replace(/currentColor/g, '#000')}</svg>` ].body.replace(/currentColor/g, color)}</svg>`
); );
expect( expect(