Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ngneat/svg-icon
👻 A lightweight library that makes it easier to use SVG icons in your Angular Application
https://github.com/ngneat/svg-icon
angular icons svg svg-icons
Last synced: 3 months ago
JSON representation
👻 A lightweight library that makes it easier to use SVG icons in your Angular Application
- Host: GitHub
- URL: https://github.com/ngneat/svg-icon
- Owner: ngneat
- License: mit
- Created: 2020-06-14T11:15:13.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2023-12-13T09:17:04.000Z (11 months ago)
- Last Synced: 2024-05-01T11:39:43.362Z (6 months ago)
- Topics: angular, icons, svg, svg-icons
- Language: TypeScript
- Homepage: https://netbasal.com
- Size: 4.12 MB
- Stars: 251
- Watchers: 7
- Forks: 35
- Open Issues: 19
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
- awesome-opensource-israel - @ngneat/svg-icon - 👻 A lightweight library that makes it easier to use SVG icons in your Angular Application    (Projects by main language / angular)
- awesome-angular - svg-icon - A lightweight library that makes it easier to use SVG icons in your Angular Application. (Table of contents / Third Party Components)
- fucking-awesome-angular - svg-icon - A lightweight library that makes it easier to use SVG icons in your Angular Application. (Table of contents / Third Party Components)
- fucking-awesome-angular - svg-icon - A lightweight library that makes it easier to use SVG icons in your Angular Application. (Table of contents / Third Party Components)
README
> 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
```
npm i @ngneat/svg-icon
npm i @ngneat/svg-generator --save-dev
```
## Icons Preparation
- Add the icons to `src/assets/svg`
- Add an alias to the `tsconfig` file (optional):
```json
{
"paths": {
"@app/svg/*": ["src/app/svg/*"]
}
}
```
- Configure the `@ngneat/svg-generator` to clean and extract the icons content. Add the following to your `package.json` file:
```json
{
"scripts": {
"prestart": "npm run svg",
"prebuild": "npm run svg",
"svg": "svg-generator"
},
"svgGenerator": {
"outputPath": "./src/app/svg",
"srcPath": "./src/assets/svg",
"svgoConfig": {
"plugins": [
"removeDimensions",
"cleanupAttrs",
{
"name": "convertColors",
"params": {
"currentColor": true
}
}
]
}
}
}
```
It can be modified to meet your needs.
- Add the `outputPath` to your `gitignore` file
- Run `npm run svg`
## Icons Rendering
Use the `provideSvgIcons` to register the icons:
```ts
import { provideSvgIcons } from '@ngneat/svg-icon';
import { settingsIcon } from '@app/svg/settings';
bootstrapApplication(AppComponent, {
providers: [provideSvgIcons([settingsIcon])],
});
```
Now we can import the **standalone** `SvgIconComponent` and use the `svg-icon` component:
```ts
import { SvgIconComponent } from '@ngneat/svg-icon';
@Component({
imports: [SvgIconComponent],
template: `
`,
})
export class FooComponent {}
```
_Note_ that the `key` should be striclty typed based on your icons. You can also export the `SvgIcons` type from the library if you need it.
## Register icons locally
In lazy load modules or lazy routes, we can use the `provideSvgIcons` method, for register icons accessible locally in these modules:
```ts
import { dashboardIcon } from '@app/svg/dashboard';
import { userIcon } from '@app/svg/user';
import { provideSvgIcons } from '@ngneat/svg-icon';
@NgModule({
declarations: [DashboardComponent],
providers: [provideSvgIcons([userIcon])],
imports: [DashboardRoutingModule],
})
export class DashboardModule {}
// OR in a Route def
{
path: 'dashboard',
providers: [provideSvgIcons([userIcon])],
component: DashboardPageComponent
}
```
Note that we're NOT using a barrel file (i.e `index.ts`). This will make sure we only **load** the SVG files we use in the current module.
## Webpack Plugin
To make the process more seamless, the library provides a Webpack plugin you can use to automate the extracting process:
```ts
const { SvgGeneratorWebpackPlugin } = require('@ngneat/svg-generator/webpack-plugin');
{
plugins: [
new SvgGeneratorWebpackPlugin({
watch: !isProd,
srcPath: './src/assets/svg',
outputPath: './src/app/svg',
svgoConfig: {
plugins: ['removeDimensions'],
},
}),
];
}
```
## Group Icons
There are cases where we want to group multiple SVG icons. For example, we might have a `notifications` feature, and we need to load SVG icons such as Slack, Email, etc.
In such cases, create a unique directory, and put the related icons inside it. For example:
```
home.svg
user.svg
/notifications
- slack.svg
- email.svg
```
This will create a `notifications` folder with a `barrel` file that export the SVG icons inside the folder under a const named `${folderName}Icons`:
```ts
import { notificationsIcons } from '@app/svg/notifications';
@NgModule({
providers: [provideSvgIcons(notificationsIcons)],
})
export class NotificationsModule {}
```
## 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
import { provideSvgIconsConfig } from '@ngneat/svg-icon';
bootstrapApplication(AppComponent, {
providers: [
provideSvgIconsConfig({
sizes: {
xs: '10px',
sm: '12px',
md: '16px',
lg: '20px',
xl: '25px',
xxl: '30px',
},
defaultSize: 'md',
icons,
}),
],
});
```
They are used in the `size` input:
```html
```
## Inputs
```ts
@Input() key: string;
@Input() size: string;
@Input() fontSize: string;
@Input() color: string;
@Input() width: string | number;
@Input() height: string | number;
@Input() noShrink: boolean;
```
## 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();
}
}
```
You can also use the `injectRegisterIcons` method to register icons using the new `inject` API:
```ts
import { injectRegisterIcons } 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() {
injectRegisterIcons([Icon, Icon, Icon]);
}
}
```
## Missing Icon
You can define **missingIconFallback** which will be used if icon is not found in registry:
```ts
import { provideSvgIconsConfig } from '@ngneat/svg-icon';
import { unknownIcon } from '@app/svg/unknown';
bootstrapApplication(AppComponent, {
providers: [
provideSvgIconsConfig({
missingIconFallback: unknownIcon,
}),
],
});
```
## Custom config file
The `svgGenerator` config object is placed by default in your main `package.json`.
It can also be placed in any location supported by the [Cosmiconfig library](https://github.com/davidtheclark/cosmiconfig) such as a custom `.svgGeneratorrc.json` file.
The config object is looked for in the project root directory by default.
If your config object is located in another directory, you can specify it through the `--config-dir` option of the `svg` CLI: `npm run svg --config-dir=/your/custom/dir/where/the/config/is/located`. The config object will then be looked for in all valid [Cosmiconfig library](https://github.com/davidtheclark/cosmiconfig) locations starting from that directory and going up the directory tree until a config is found.