Icon workflow
Implement and consume icons without sacrificing performance or scalability
Add the new icon
Icons can be added and managed easily within their own files.
Icons: libs\constants\src\lib\icons
Create a new file for the new icon.
Example: icon-bitcoin.constant.ts
Update the file according with the icon information.
import { Icon } from '@full-stack-typescript/models';
export const ICON_BITCOIN: Icon = {
name: 'bitcoin',
data: '<svg xmlns="http://www.w3.org/2000/svg" width="800" height="800" fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6V4m4 2V4m0 2H7m7 0a3 3 0 1 1 0 6m-5 6v-6m0-6v6m1 8v-2m4 2v-2m-5-6h6a3 3 0 1 1 0 6H7"/></svg>'
};Note: the property that controls the icon's color must use the value currentColor to enable styling through the icon component.
Update the index.ts file to export the new icon.
Register the icon
Icons are registered in the feature module that displays the icon. This enables the best tree-shaking and ensures the highest application performance.
In the feature module component, register the icon:
Import the IconsModule in the feature module.
Register the icon for use in the component.
export class IconExamplesComponent {
private iconRegistryService = inject(IconRegistryService);
constructor() {
this.iconRegistryService.registerIcons([ICON_BITCOIN]);
}
}Display the icon
Once an icon is registered it can be used and configured in the template.
<full-stack-typescript-icons [name]="'bitcoin'" [color]="'#b5a33f'" [height]="'175'" [width]="'175'"></full-stack-typescript-icons>Source code and list of attributes
Icon customizations and configuration requirements can be viewed from its source code.
Reference: libs\features\icons\src\lib\icons.component.ts
Last updated