angular-svg-icon
Advanced tools
Angular 18 component and service for inlining SVGs allowing them to be easily styled with CSS.
The angular-svg-icon is an Angular 18 service and component that provides a means to inline SVG files to allow for them to be easily styled by CSS and code.
The service provides an icon registery that loads and caches a SVG indexed by
its url. The component is responsible for displaying the SVG. After getting the
svg from the registry it clones the SVGElement and the SVG to the component's
inner HTML.
This demo shows this module in action.
$ npm i angular-svg-icon --save
The latest version of the package is for Angular 18.
:grey_exclamation: BREAKING CHANGE: as of angular-svg-icon@18.0.0, the package was converted to use
inject and signal from @common/core for improved performance. Thus method calls that are inputs
should be avoided. Inputs are now signal inputs.
Note on earlier versions of Angular:
See the module's accompanying README.md for instructions.
The angular-svg-icon should work as-is with webpack/angular-cli. Just import the
AngularSvgIconModule and the HttpClientModule.
import { HttpClientModule } from '@angular/common/http';
import { AngularSvgIconModule } from 'angular-svg-icon';
@NgModule({
imports: [ HttpClientModule, AngularSvgIconModule.forRoot() ],
...
})
export class AppModule {}
import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
import { provideHttpClient } from '@angular/common/http';
import { provideAngularSvgIcon } from 'angular-svg-icon';
export const appConfig: ApplicationConfig = {
providers: [
provideZoneChangeDetection({ eventCoalescing: true }),
provideHttpClient(),
provideAngularSvgIcon()
]
};
:grey_exclamation: BREAKING CHANGE: as of angular-svg-icon@9.0.0, an explicit call to forRoot()
must be made on the module's import.
Recommened usage pattern is to import AngularSvgIconModule.forRoot() in only the root AppModule of your application.
In child modules, import only AngularSvgIconModule.
Recommended usage pattern is to import AngularSvgIconModule.forRoot() in the root AppModule of your application.
This will allow for one SvgIconRegistryService to be shared across all modules.
If, for some reason, a lazily loaded module needs encapuslation of the service, then it is possible to load the
AngularSvgIconModule.forRoot() in each lazy loaded module, but such usage precludes loading the package in the root
AppModule.
Basic usage is:
<svg-icon src="images/eye.svg" [svgStyle]="{ 'width.px':90 }"></svg-icon>
Note that without a height or width set, the SVG may not display!
Loading with a name:
<svg-icon src="images/eye.svg" name="eye" [svgStyle]="{ 'width.px':90 }"></svg-icon>
If the SVG was previously loaded with a name either via the component or registry, then it can be used like this:
<svg-icon name="eye" [svgStyle]="{ 'width.px':90 }"></svg-icon>
More complex styling can be applied to the svg, for example:
<svg-icon src="images/eye.svg" [stretch]="true"
[svgStyle]="{'width.px':170,'fill':'rgb(150,50,255)','padding.px':1,'margin.px':3}">
</svg-icon>
The following attributes can be set on svg-icon:
preserveAspectRatio="none" on the SVG. This is useful for setting both the height and width styles to strech or distort the svg.svg-icon).class attribute on the svg-icon and adds it to the SVG.svg-icon).viewBox="auto", then svg-icon will attempt to convert the SVG's width and height attributes to a viewBox="0 0 w h". Both explicitly setting the viewBox or auto setting the viewBox will remove the SVG's width and height attributes.aria-label. If the SVG does not have a pre-existing aria-label and the svgAriaLabel is not set, then the SVG will be loaded with aria-hidden=true. If the SVG has an aria-label, then the SVG's default will be used. To remove the SVG's aria-label, assign an empty string '' to svgAriaLabel. Doing so will remove any existing aria-label and set aria-hidden=true on the SVG.Deprecated attribute:
Programatic interaction with the registry is also possible.
Include the private iconReg: SvgIconRegistryService in the constructor:
constructor(private iconReg:SvgIconRegistryService) { }
The registry has three public functions: loadSvg(string), addSvg(string, string), and unloadSvg(string).
To preload a SVG file from a URL into the registry:
{
...
this.iconReg.loadSvg('foo.svg').subscribe();
}
To preload a SVG file from a URL into the registry with predefined name:
{
...
this.iconReg.loadSvg('foo.svg', 'foo').subscribe();
}
To add a SVG from a string:
{
...
this.iconReg.addSvg('box',
'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10"><path d="M1 1 L1 9 L9 9 L9 1 Z"/></svg>'
);
}
To unload a SVG from the registry.
{
...
this.iconReg.unloadSvg('foo.svg');
}
When rendering on server-side, the SVGs must be loaded via the file system.
This can be achieved by providing an SvgLoader to the server module:
export function svgLoaderFactory(http: HttpClient, transferState: TransferState) {
return new SvgServerLoader('browser/assets/icons', transferState);
}
@NgModule({
imports: [
AngularSvgIconModule.forRoot({
loader: {
provide: SvgLoader,
useFactory: svgLoaderFactory,
deps: [ HttpClient, TransferState ],
}
}),
AppModule,
ServerModule,
ServerTransferStateModule,
ModuleMapLoaderModule,
],
bootstrap: [ AppComponent ],
})
export class AppServerModule {
}
// Standalone Example
@NgModule({
imports: [
AppModule,
ServerModule,
ServerTransferStateModule,
ModuleMapLoaderModule,
],
providers: [ provideAngularSvgIcon({
loader: {
provide: SvgLoader,
useFactory: svgLoaderFactory,
deps: [ HttpClient, TransferState ],
}
}) ],
bootstrap: [ AppComponent ],
})
export class AppServerModule {
}
The loader itself is up to you to implement because it depends on where your icons are stored locally. An implementation that additionally saves the icons in the transfer state of your app in order to avoid double requests could look like that:
const fs = require('fs');
const join = require('path').join;
const parseUrl = require('url').parse;
const baseName = require('path').basename;
export class SvgServerLoader implements SvgLoader {
constructor(private iconPath: string,
private transferState: TransferState) {
}
getSvg(url: string): Observable<string> {
const parsedUrl:URL = parseUrl(url);
const fileNameWithHash = baseName(parsedUrl.pathname);
// Remove content hashing
const fileName = fileNameWithHash.replace(/^(.*)(\.[0-9a-f]{16,})(\.svg)$/i, '$1$3');
const filePath = join(this.iconPath, fileName);
return Observable.create(observer => {
const svgData = fs.readFileSync(filePath, 'utf8');
// Here we save the translations in the transfer-state
const key: StateKey<number> = makeStateKey<number>('transfer-svg:' + url);
this.transferState.set(key, svgData);
observer.next(svgData);
observer.complete();
});
}
}
Note that this is executed in a local Node.js context, so the Node.js API is available.
A loader for the client module that firstly checks the transfer state could look like that:
export class SvgBrowserLoader implements SvgLoader {
constructor(private transferState: TransferState,
private http: HttpClient) {
}
getSvg(url: string): Observable<string> {
const key: StateKey<number> = makeStateKey<number>('transfer-svg:' + url);
const data = this.transferState.get(key, null);
// First we are looking for the translations in transfer-state, if none found, http load as fallback
if (data) {
return Observable.create(observer => {
observer.next(data);
observer.complete();
});
} else {
return new SvgHttpLoader(this.http).getSvg(url);
}
}
}
This is executed on browser side. Note that the fallback when no data is
available uses SvgHttpLoader, which is also the default loader if you don't
provide one.
angular-svg-iconAn Angular Universal example project is also available. The basic steps to get it work is:
package.json file to prevent compilation issues: "browser": {
"fs": false,
"path": false,
"os": false
}
ServerTransferStateModule to app.server.moduleBrowserTransferStateModule to app.modulePLATFORM_ID and load the correct class appropriately (this is already added in the example).The SVG should be modified to remove the height and width attributes from the file per Sara Soueidan's advice in "Making SVGs Responsive With CSS" if size is to be modified through CSS. Removing the height and width has two immedate impacts: (1) CSS can be used to size the SVG, and (2) CSS will be required to size the SVG.
The svg-icon is an Angular component that allows for the continuation of the AngularJS method for easily inlining SVGs explained by Ben Markowitz and others. Including the SVG source inline allows for the graphic to be easily styled by CSS.
The technique made use of ng-include to inline the svg source into the document. Angular 2, however, dropped the support of ng-include, so this was my work-around method.
Note: The icon component from angular/material2 used to have a direct means to load svg similar to this, but this functionality was removed because of security concerns.
MIT
FAQs
Angular 18 component and service for inlining SVGs allowing them to be easily styled with CSS.
The npm package angular-svg-icon receives a total of 33,019 weekly downloads. As such, angular-svg-icon popularity was classified as popular.
We found that angular-svg-icon demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Socket's threat research team has detected five malicious npm packages targeting Roblox developers, deploying malware to steal credentials and personal data.
Security News
vlt introduced its new package manager and a serverless registry this week, innovating in a space where npm has stagnated.
Security News
Research
The Socket Research Team uncovered a malicious Python package typosquatting the popular 'fabric' SSH library, silently exfiltrating AWS credentials from unsuspecting developers.