A lightweight library that makes it easier to use SVG icons in your Angular Application
The svg-icon library enables using the <svg-icon> tag to directly display SVG icons in the DOM.
This approach offers an advantage over using an <img> tag or via the CSS background-image property, because it allows styling and animating the SVG with CSS.
For example, if the fill or stroke properties of elements in the svg are set to currentColor, they will have the color defined for the containing DOM element,. So the color can easily be changed by changing the color style on the svg-icon element.
ng add @ngneat/svg-icon
This command will automatically preform the recommended flow (steps 2-4).
-
Add the icons to
src/assets/svg -
Use svg-to-ts to clean and extract the icons content:
{ "scripts": { "generate-icons": "svg-to-ts" }, "svg-to-ts": { "conversionType": "object", "srcFiles": [ "./src/assets/svg/*.svg" ], "outputDirectory": "./src/assets/svg", "fileName": "svg-icons", "svgoConfig": { "plugins": [ { "removeDimensions": true, "cleanupAttrs": true } ] } } } -
Run
npm run generate-icons -
Import the
SvgIconsModulein yourAppModule, and register the icons:import { SvgIconsModule } from '@ngneat/svg-icon'; import icons from '../assets/svg/svg-icons'; @NgModule({ imports: [ SvgIconsModule.forRoot({ icons }) ], bootstrap: [AppComponent] }) export class AppModule {}
-
Now you can use the
svg-iconcomponent:<svg-icon key="settings"></svg-icon> <svg-icon key="settings" color="hotpink" fontSize="40px"></svg-icon>
To control the SVG size, we use the font-size property as described in this article.
You also have the option to pass fixed sizes and use them across the application:
@NgModule({
imports: [
SvgIconsModule.forRoot({
sizes: {
xs: '10px',
sm: '12px',
md: '16px',
lg: '20px'
},
icons
})
],
bootstrap: [AppComponent]
})
export class AppModule {}They are used in the size input:
<svg-icon key="settings" size="lg"></svg-icon>You can inject the SvgIconRegistry, and get existing SVG icons or register new ones:
import { SvgIconRegistry } from '@ngneat/svg-icon';
import { mySvg } from 'my-icons.ts';
interface Icon {
name: string;
data: string;
}
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
constructor(private registry: SvgIconRegistry) {
registry.register({ settings: `<svg>...</svg>`});
// You can pass a Icon structure map or array as well
registry.register({ mySvg });
registry.register([mySvg]);
registry.get(key);
registry.getAll();
}
}
Thanks goes to these wonderful people (emoji key):
Netanel Basal 💻 📖 🤔 |
Inbal Sinai 📖 |
Shahar Kazaz 💻 🤔 |
This project follows the all-contributors specification. Contributions of any kind welcome!
Logo icon was made by Freepik from www.flaticon.com