> A lightweight library that makes it easier to use SVG icons in your Angular Application
[]()
[]()
[]()
[](https://github.com/prettier/prettier)
[](#contributors-)
[](https://github.com/ngneat/)
[]()
The `svg-icon` library enables using the `` tag to directly display SVG icons in the DOM.
This approach offers an advantage over using an `![]()
` 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.
## Installation
`ng add @ngneat/svg-icon`
This command will automatically preform the recommended flow (steps 2-4).
## Recommended Flow
### Icons Preparation
1. Add the icons to `src/assets/svg`
2. 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": {
"generateType": "false",
"delimiter": "KEBAB",
"conversionType": "files",
"iconsFolderName": "svg",
"prefix": "app",
"srcFiles": ["./src/assets/svg/*.svg"],
"outputDirectory": "./src/app",
"svgoConfig": {
"plugins": [
{
"removeDimensions": true,
"cleanupAttrs": true
}
]
}
}
}
```
3. Run `npm run generate-icons`
### Icons Rendering
4. Import the `SvgIconsModule` in your `AppModule`, and register the icons:
```ts
import { SvgIconsModule } from '@ngneat/svg-icon';
import { appSettings } from '../svg/app-settings.icon';
@NgModule({
imports: [
SvgIconsModule.forRoot({
icons: [appSettings]
})
],
bootstrap: [AppComponent]
})
export class AppModule {}
```
5. Now you can use the `svg-icon` component:
```html
```
In lazy load modules, you can use the `forChild` method:
```ts
import { DashboardRoutingModule } from './dashboard-routing.module';
import { DashboardComponent } from './dashboard.component';
import { appSettings } from '../svg/app-settings.icon';
import { SvgIconsModule } from '@ngneat/svg-icon';
@NgModule({
declarations: [DashboardComponent],
imports: [CommonModule, DashboardRoutingModule, SvgIconsModule.forChild([appSettings])]
})
export class DashboardModule {}
```
### Icon Sizing
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 also have the option to pass fixed sizes and use them across the application:
```ts
@NgModule({
imports: [
SvgIconsModule.forRoot({
sizes: {
xs: '10px',
sm: '12px',
md: '16px',
lg: '20px'
},
defaultSize: 'md'
icons
})
],
bootstrap: [AppComponent]
})
export class AppModule {}
```
They are used in the `size` input:
```html
```
### SvgIconRegistry
You can inject the `SvgIconRegistry`, and get existing SVG icons or register new ones:
```ts
import { SvgIconRegistry } from '@ngneat/svg-icon';
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([Icon, Icon, Icon]);
registry.register(Icon);
registry.get(name);
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!
Logo icon was made by Freepik from www.flaticon.com
