Skip to content

Commit

Permalink
Merge branch 'next'
Browse files Browse the repository at this point in the history
  • Loading branch information
@cyberalien
cyberalien committed Dec 28, 2023
2 parents 0c09974 + f8a2c1c commit b1573e1
Show file tree
Hide file tree
Showing 90 changed files with 3,842 additions and 4,001 deletions.
6 changes: 3 additions & 3 deletions @iconify-demo/create-bundle/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,8 +13,8 @@
},
"devDependencies": {
"@iconify/iconify": "^3.1.1",
"@iconify/json": "^2.2.121",
"@types/node": "^18.18.0",
"typescript": "^5.2.2"
"@iconify/json": "^2.2.162",
"@types/node": "^20.10.5",
"typescript": "^5.3.3"
}
}
4 changes: 2 additions & 2 deletions @iconify-demo/doc-samples/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
"@iconify/tools": "workspace:^"
},
"devDependencies": {
"@types/node": "^18.18.0",
"typescript": "^5.2.2"
"@types/node": "^20.10.5",
"typescript": "^5.3.3"
}
}
6 changes: 3 additions & 3 deletions @iconify-demo/doc-samples/src/icon-set/for-each.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ const iconSet = new IconSet({

// Synchronous example: renaming all icons
console.log('Starting synchronous forEach()');
iconSet.forEachSync((name) => {
iconSet.forEach((name) => {
iconSet.rename(name, 'renamed-' + name);
console.log(`Renaming: ${name}`);
});
Expand All @@ -48,15 +48,15 @@ console.log('Starting async forEach()');
// Clean up icon
console.log(`Cleaning up: ${name}`);
try {
await cleanupSVG(svg);
cleanupSVG(svg);
} catch (err) {
// Something went wrong: remove icon
iconSet.remove(name);
return;
}

// Change colors to red
await parseColors(svg, {
parseColors(svg, {
defaultColor: 'red',
callback: (attr, colorStr, color) => {
return !color || isEmptyColor(color) ? colorStr : 'red';
Expand Down
54 changes: 26 additions & 28 deletions @iconify-demo/doc-samples/src/icon-set/list.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,35 +37,33 @@ console.log(iconSet.list(['icon', 'variation', 'alias']));
// [ 'add', 'debug-pause', 'triangle-left' ]
console.log(iconSet.list(['icon']));

// Function can also be used to parse all icons in icon set
(async () => {
const icons = iconSet.list();
for (let i = 0; i < icons.length; i++) {
const name = icons[i];
const svg = iconSet.toSVG(name);
if (svg) {
// Clean up icon
try {
await cleanupSVG(svg);
} catch (err) {
// Something went wrong: remove icon
iconSet.remove(name);
continue;
}
// Function can also be used to parse all icons in icon set, though `forEach()` is a better choice for this code
const icons = iconSet.list();
for (let i = 0; i < icons.length; i++) {
const name = icons[i];
const svg = iconSet.toSVG(name);
if (svg) {
// Clean up icon
try {
cleanupSVG(svg);
} catch (err) {
// Something went wrong: remove icon
iconSet.remove(name);
continue;
}

// Change colors to red
await parseColors(svg, {
defaultColor: 'red',
callback: (attr, colorStr, color) => {
return !color || isEmptyColor(color) ? colorStr : 'red';
},
});
// Change colors to red
parseColors(svg, {
defaultColor: 'red',
callback: (attr, colorStr, color) => {
return !color || isEmptyColor(color) ? colorStr : 'red';
},
});

// Update code
iconSet.fromSVG(name, svg);
}
// Update code
iconSet.fromSVG(name, svg);
}
}

// Export updated icon set
console.log(iconSet.export());
})();
// Export updated icon set
console.log(iconSet.export());
61 changes: 30 additions & 31 deletions @iconify-demo/doc-samples/src/icon-set/to-svg.ts
View file
Original file line number Diff line number Diff line change
@@ -1,38 +1,37 @@
import { blankIconSet, parseColors, isEmptyColor } from '@iconify/tools';

// Wrap in async anonymous function to allow 'await'
(async () => {
// Create icon set, add one icon
const iconSet = blankIconSet('');
iconSet.setIcon('add', {
body: '<path d="M14 7v1H8v6H7V8H1V7h6V1h1v6h6z"/>',
});
// Create an icon set, add one icon
const iconSet = blankIconSet('');
iconSet.setIcon('add', {
body: '<path d="M14 7v1H8v6H7V8H1V7h6V1h1v6h6z"/>',
});

// Export icon
const svg = iconSet.toSVG('add');
if (!svg) {
throw new Error('Icon is missing');
}
// Export icon to SVG class instance
// Note: SVG instance is not attached to icon set, so it is not updated automatically (see code below).
const svg = iconSet.toSVG('add');
if (!svg) {
throw new Error('Icon is missing');
}

// Set fill to 'currentColor'
await parseColors(svg, {
// If a shape uses default color (used in this example), change it to 'currentColor'.
defaultColor: 'currentColor',
// Set fill to 'currentColor'
parseColors(svg, {
// If a shape uses default color (used in this example), change it to 'currentColor'.
defaultColor: 'currentColor',

// Callback to change colors. Not called in this example because there are no colors in sample icon.
callback: (attr, colorStr, color) => {
// color === null -> color cannot be parsed -> return colorStr
// isEmptyColor() -> checks if color is empty: 'none' or 'transparent' -> return color object
// without changes (though color string can also be returned, but using object is faster)
// for everything else return 'currentColor'
return !color ? colorStr : isEmptyColor(color) ? color : 'currentColor';
},
});
// Callback to change colors. Not called in this example because there are no colors in sample icon.
callback: (attr, colorStr, color) => {
// color === null -> color cannot be parsed -> return colorStr
// isEmptyColor() -> checks if color is empty: 'none' or 'transparent' -> return color object
// without changes (though color string can also be returned, but using object is faster)
// for everything else return 'currentColor'
return !color ? colorStr : isEmptyColor(color) ? color : 'currentColor';
},
});

// Update icon, used in example above that uses 'iconSet.toString()'
iconSet.fromSVG('add', svg);
// Icon instance is not attached to icon set, so it is not updated automatically.
// Update icon in icon set
iconSet.fromSVG('add', svg);

// Log to show icon (two identical ways to do it)
console.log(svg.toString());
console.log(iconSet.toString('add'));
})();
// Log to show icon (two ways to do it, one from icon set, one from icon instance)
console.log(svg.toString());
console.log(iconSet.toString('add'));
89 changes: 45 additions & 44 deletions @iconify-demo/doc-samples/src/icon/colors.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,55 +26,56 @@ const iconSet = new IconSet({
},
});

(async () => {
await iconSet.forEach(async (name, type) => {
if (type !== 'icon') {
// Ignore aliases and variations: they inherit content from parent icon, so there is nothing to change
return;
}
// Parse all icons in icon set
iconSet.forEach((name, type) => {
if (type !== 'icon') {
// Ignore aliases and variations: they inherit content from parent icon, so there is nothing to change
return;
}

const svg = iconSet.toSVG(name);
if (svg) {
await parseColors(svg, {
// Change default color to 'currentColor'
defaultColor: 'currentColor',
// Get icon as SVG class instance
const svg = iconSet.toSVG(name);
if (svg) {
// Parse colors in SVG instance
parseColors(svg, {
// Change default color to 'currentColor'
defaultColor: 'currentColor',

// Callback to parse each color
callback: (attr, colorStr, color) => {
if (!color) {
// color === null, so color cannot be parsed
// Return colorStr to keep old value
return colorStr;
}
// Callback to parse each color
callback: (attr, colorStr, color) => {
if (!color) {
// color === null, so color cannot be parsed
// Return colorStr to keep old value
return colorStr;
}

if (isEmptyColor(color)) {
// Color is empty: 'none' or 'transparent'
// Return color object to keep old value
return color;
}
if (isEmptyColor(color)) {
// Color is empty: 'none' or 'transparent'
// Return color object to keep old value
return color;
}

// Black color: change to 'currentColor'
if (compareColors(color, stringToColor('black'))) {
return 'currentColor';
}
// Black color: change to 'currentColor'
if (compareColors(color, stringToColor('black'))) {
return 'currentColor';
}

// White color: belongs to white background rectangle: remove rectangle
if (compareColors(color, stringToColor('white'))) {
return 'remove';
}
// White color: belongs to white background rectangle: remove rectangle
if (compareColors(color, stringToColor('white'))) {
return 'remove';
}

// Unexpected color. Add code to check for it
throw new Error(
`Unexpected color "${colorStr}" in attribute ${attr}`
);
},
});
// Unexpected color. Add code to check for it
throw new Error(
`Unexpected color "${colorStr}" in attribute ${attr}`
);
},
});

// Update icon in icon set
iconSet.fromSVG(name, svg);
}
});
// Update icon in icon set
iconSet.fromSVG(name, svg);
}
});

// Export icon set
console.log(iconSet.export());
})();
// Export icon set
console.log(iconSet.export());
40 changes: 19 additions & 21 deletions @iconify-demo/doc-samples/src/icon/icon-set.ts
View file
Original file line number Diff line number Diff line change
@@ -1,24 +1,22 @@
(async () => {
await iconSet.forEach(async (name, type) => {
if (type !== 'icon') {
// Ignore aliases and variations: they inherit content from parent icon, so there is nothing to change
return;
}
iconSet.forEach(async (name, type) => {
if (type !== 'icon') {
// Ignore aliases and variations: they inherit content from parent icon, so there is nothing to change
return;
}

const svg = iconSet.toSVG(name);
if (svg) {
// Change colors to red
await parseColors(svg, {
defaultColor: 'red',
callback: (attr, colorStr, color) => {
return !color || isEmptyColor(color) ? colorStr : 'red';
},
});
const svg = iconSet.toSVG(name);
if (svg) {
// Change colors to red
parseColors(svg, {
defaultColor: 'red',
callback: (attr, colorStr, color) => {
return !color || isEmptyColor(color) ? colorStr : 'red';
},
});

// Update icon from SVG instance
iconSet.fromSVG(name, svg);
}
});
// Update icon from SVG instance
iconSet.fromSVG(name, svg);
}
});

// The rest of code here
})();
// The rest of code here
33 changes: 33 additions & 0 deletions @iconify-demo/doc-samples/src/icon/mask-colors.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
import { SVG, convertSVGToMask } from '@iconify/tools';

const svg = new SVG(
`<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48">
<g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="4">
<path fill="#2F88FF" stroke="#000" d="M44.0001 24C44.0001 35.0457 35.0458 44 24.0001 44C18.0266 44 4.00006 44 4.00006 44C4.00006 44 4.00006 29.0722 4.00006 24C4.00006 12.9543 12.9544 4 24.0001 4C35.0458 4 44.0001 12.9543 44.0001 24Z"/>
<path stroke="#fff" d="M14 18L32 18"/>
<path stroke="#fff" d="M14 26H32"/>
<path stroke="#fff" d="M14 34H24"/>
</g>
</svg>`
);

// Convert to mask
convertSVGToMask(svg, {
// Treat black as solid
solid: '#000',
// No transparent colors
transparent: [],
// Custom opacity for other colors
custom: (color) => {
switch (color) {
case '#fff':
return 0.75; // same as returning '#bfbfbf'

case '#2f88ff':
return 0.25; // same as returning '#404040'
}
},
});

// Output result
console.log(svg.toString());
21 changes: 21 additions & 0 deletions @iconify-demo/doc-samples/src/icon/mask-demo.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
import { SVG, convertSVGToMask } from '@iconify/tools';

const svg = new SVG(
`<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="M6.5 20C4.98 20 3.68333 19.4767 2.61 18.43C1.53667 17.3767 1 16.0933 1 14.58C1 13.28 1.39 12.12 2.17 11.1C2.95667 10.08 3.98333 9.43 5.25 9.15C5.67 7.61667 6.50333 6.37667 7.75 5.43C9.00333 4.47667 10.42 4 12 4C13.9533 4 15.6067 4.68 16.96 6.04C18.32 7.39333 19 9.04667 19 11C20.1533 11.1333 21.1067 11.6333 21.86 12.5C22.62 13.3533 23 14.3533 23 15.5C23 16.7533 22.5633 17.8167 21.69 18.69C20.8167 19.5633 19.7533 20 18.5 20" fill="white"/>
<path d="M6.5 18H18.5C19.2 18 19.79 17.7567 20.27 17.27C20.7567 16.79 21 16.2 21 15.5C21 14.8 20.7567 14.21 20.27 13.73C19.79 13.2433 19.2 13 18.5 13H17V11C17 9.62 16.5133 8.44 15.54 7.46C14.5667 6.48667 13.3867 6 12 6C10.62 6 9.44 6.48667 8.46 7.46C7.48667 8.44 7 9.62 7 11H6.5C5.53333 11 4.71 11.3433 4.03 12.03C3.34333 12.71 3 13.5333 3 14.5C3 15.4667 3.34333 16.3 4.03 17C4.71 17.6667 5.53333 18 6.5 18Z" fill="#444"/>
<circle cx="19" cy="19" r="5" fill="red"/>
<path d="M18 16H20V18H22V20H20V22H18V20H16V18H18V16Z" fill="white"/>
</svg>`
);

// Convert to mask without changing any colors, use them as an alpha channel
convertSVGToMask(svg, {
// Set rectangle color to currentColor
color: 'currentColor',
// Use custom option instead of options above, returning color as is
custom: (color) => color,
});

// Output result
console.log(svg.toString());
16 changes: 16 additions & 0 deletions @iconify-demo/doc-samples/src/icon/mask-white.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
import { SVG, convertSVGToMask } from '@iconify/tools';

const svg = new SVG(
`<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M14 4H10C6.22876 4 4.34315 4 3.17157 5.17157C2.32803 6.01511 2.09185 7.22882 2.02572 9.25H21.9743C21.9082 7.22882 21.672 6.01511 20.8284 5.17157C19.6569 4 17.7712 4 14 4Z" fill="black"/>
<path d="M10 20H14C17.7712 20 19.6569 20 20.8284 18.8284C22 17.6569 22 15.7712 22 12C22 11.5581 22 11.142 21.9981 10.75H2.00189C2 11.142 2 11.5581 2 12C2 15.7712 2 17.6569 3.17157 18.8284C4.34315 20 6.22876 20 10 20Z" fill="black"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M5.25 16C5.25 15.5858 5.58579 15.25 6 15.25H10C10.4142 15.25 10.75 15.5858 10.75 16C10.75 16.4142 10.4142 16.75 10 16.75H6C5.58579 16.75 5.25 16.4142 5.25 16Z" fill="white"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M11.75 16C11.75 15.5858 12.0858 15.25 12.5 15.25H14C14.4142 15.25 14.75 15.5858 14.75 16C14.75 16.4142 14.4142 16.75 14 16.75H12.5C12.0858 16.75 11.75 16.4142 11.75 16Z" fill="white"/>
</svg>`
);

// Convert to mask, converting black color to solid, white to transparent (default options)
convertSVGToMask(svg);

// Output result
console.log(svg.toString());
Loading

0 comments on commit b1573e1

Please sign in to comment.