[]()
[]()
[]()
[](https://github.com/prettier/prettier)
[](#contributors-)
[](https://github.com/ngneat/)
[]()
> A lightweight library that makes it easier to use SVG icons in your Angular Application
`` displays SVG icons by directly inlining the SVG content into the DOM as a child of itself. This approach offers an advantage over an tag or a CSS background-image because it allows styling the SVG with CSS.
For example, the default color of the SVG content is the CSS `currentColor` value. This makes SVG icons by default have the same color as surrounding text and allows you to change the color by setting the color style on the `svg-icon` element.
## Installation
`ng add @ngneat/svg-icon`
The command will automatically do the following steps for you.
## Recommended Flow
### Icons Preparation
- Add the icons to `src/assets/svg`
- Use [svg-to-ts](https://github.com/kreuzerk/svg-to-ts) to clean and extract the icons content:
```json
{
"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`
### Icons Rendering
Import the `SvgIconsModule` in your `AppModule`, and register the icons:
```ts
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-icon` component:
```html
```
To control the SVG size, we use the `font-size` property as described in this [article](https://css-tricks.com/control-icons-with-font-size/).
You have the options to pass fixed sizes and use them across the application:
```ts
@NgModule({
imports: [
SvgIconsModule.forRoot({
sizes: {
xm: '10px',
sm: '12px',
md: '16px',
lg: '20px'
},
icons
})
],
bootstrap: [AppComponent]
})
export class AppModule {}
```
And use the `size` input:
```html
```
### SvgIconRegistry
You can inject the `SvgIconRegistry`, and use it to insert new SVG icons or get them:
```ts
import { SvgIconRegistry } from '@ngneat/svg-icon';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
constructor(private registry: SvgIconRegistry) {
registry.register({ settings: ``});
registry.get(key);
registry.getAll();
}
}
```
## Contributors ✨
Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):
This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!
---
_Source: https://npm.io/package/ng-svg-icons-inline · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._
