Icon workflow

Implement and consume icons without sacrificing performance or scalability

• Add the new icon

• Register the icon

• Display the icon

• Source code and list of attributes

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