chars()
This function is part of IconSet class in Iconify Tools.
Function chars() exports characters map. Function is used by export() function to add characters map to IconifyJSON data.
Usage
Function has one parameter:
- names, string[]. Optional. List of icons to check.
Function returns a simple Record<string,string> object. Key is character, in hexadecimal form (such as "u1f3cc"), value is name of icon.
Character map
What is the purpose of characters map?
It is used to generate icon fonts. Each icon in an icon font has a character assigned to it. Even when using ligatures, ligatures point to a character, so character is needed.
How to assign a character to icon?
You can assign a character to icon by using toggleCharacter() method.
Example
chars-example.ts
ts
import { blankIconSet } from '@iconify/tools';
// Create icon set, add few icons and characters
const iconSet = blankIconSet('test-prefix');
iconSet.setIcon('add', {
body: '<path d="M14 7v1H8v6H7V8H1V7h6V1h1v6h6z"/>',
});
iconSet.toggleCharacter('add', 'f001', true);
iconSet.setIcon('triangle-left', {
body: '<g fill="currentColor"><path d="M10.44 2l.56.413v11.194l-.54.393L5 8.373v-.827L10.44 2z"/></g>',
});
iconSet.toggleCharacter('triangle-left', 'f002', true);
iconSet.setVariation('triangle-right', 'triangle-left', {
hFlip: true,
});
iconSet.toggleCharacter('triangle-right', 'f003', true);
// Set character for icon that does not exist (will fail)
iconSet.toggleCharacter('whatever', 'f005', true);
// Export characters map
console.log(iconSet.chars());
// Characters map is also exported in export():
console.log(iconSet.export());chars() result:
json
{
"f001": "add",
"f002": "triangle-left",
"f003": "triangle-right"
}export() result:
json
{
"prefix": "test-prefix",
"icons": {
"add": { "body": "<path d=\"M14 7v1H8v6H7V8H1V7h6V1h1v6h6z\"/>" },
"triangle-left": {
"body": "<g fill=\"currentColor\"><path d=\"M10.44 2l.56.413v11.194l-.54.393L5 8.373v-.827L10.44 2z\"/></g>"
}
},
"aliases": {
"triangle-right": { "parent": "triangle-left", "hFlip": true }
},
"chars": {
"f001": "add",
"f002": "triangle-left",
"f003": "triangle-right"
}
}