I would like to integrate an SVG icons into my angular library’s template, and I have the following questions?
- Where should the
/assets
folder be located? Should it reside under/src
or/src/lib
within the library structure? - What modifications are required in the
ng-package.json
and/orangular.json
files? - How should SVG icons be referenced in the component templates? Should they be referenced using relative paths, absolute paths, or does it not matter?
How can I achieve this, please?
Where should the /assets folder be located?
In an Angular library, the recommended location for the /assets folder is under /src, not /src/lib. This ensures that the assets are bundled correctly when the library is built and consumed in applications.
Structure: projects/src/assets/icons/icon.svg
ng-package.json and/or angular.json Modifications
angular.json
{
"projects": {
"library-name": {
"architect": {
"build": {
"options": {
"assets": [
{
"glob": "**/*",
"input": "src/assets",
"output": "assets"
}
]
}
}
}
}
}
}
ng-package.json
{
"$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
"assets": [
"src/assets"
]
}
In the component templates
Use a relative path like this
<img src="assets/icons/my-icon.svg" alt="My Icon">
Use relative paths ensures that the assets are packaged with the library and work seamlessly when the library is consumed in different environments.