{"id":13627328,"url":"https://github.com/ngneat/svg-icon","last_synced_at":"2025-05-07T18:15:28.848Z","repository":{"id":38991850,"uuid":"272186378","full_name":"ngneat/svg-icon","owner":"ngneat","description":"👻 A lightweight library that makes it easier to use SVG icons in your Angular Application","archived":false,"fork":false,"pushed_at":"2024-06-03T16:08:48.000Z","size":4353,"stargazers_count":262,"open_issues_count":20,"forks_count":36,"subscribers_count":6,"default_branch":"master","last_synced_at":"2025-05-07T18:15:24.505Z","etag":null,"topics":["angular","icons","svg","svg-icons"],"latest_commit_sha":null,"homepage":"https://netbasal.com","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ngneat.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":"ngneat"}},"created_at":"2020-06-14T11:15:13.000Z","updated_at":"2025-04-30T12:05:01.000Z","dependencies_parsed_at":"2024-11-07T00:27:30.646Z","dependency_job_id":"8bf5bbb4-04d9-417f-b808-f26d86a0ac8c","html_url":"https://github.com/ngneat/svg-icon","commit_stats":{"total_commits":174,"total_committers":19,"mean_commits":9.157894736842104,"dds":0.5344827586206897,"last_synced_commit":"0cd72cf937d42e67f2d466601bc3dad9d79ed47f"},"previous_names":[],"tags_count":41,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ngneat%2Fsvg-icon","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ngneat%2Fsvg-icon/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ngneat%2Fsvg-icon/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ngneat%2Fsvg-icon/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ngneat","download_url":"https://codeload.github.com/ngneat/svg-icon/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252931506,"owners_count":21827112,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","icons","svg","svg-icons"],"created_at":"2024-08-01T22:00:32.904Z","updated_at":"2025-05-07T18:15:28.816Z","avatar_url":"https://github.com/ngneat.png","language":"TypeScript","funding_links":["https://github.com/sponsors/ngneat"],"categories":["Projects by main language","Third Party Components"],"sub_categories":["angular","Icons"],"readme":"\u003cp align=\"center\"\u003e\n \u003cimg width=\"20%\" height=\"20%\" src=\"./logo.svg\"\u003e\n\u003c/p\u003e\n\n\u003cbr /\u003e\n\n\u003e A lightweight library that makes it easier to use SVG icons in your Angular Application\n\n[![MIT](https://img.shields.io/packagist/l/doctrine/orm.svg?style=flat-square)]()\n[![commitizen](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg?style=flat-square)]()\n[![PRs](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)]()\n[![styled with prettier](https://img.shields.io/badge/styled_with-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)\n[![All Contributors](https://img.shields.io/badge/all_contributors-5-orange.svg?style=flat-square)](#contributors-)\n[![ngneat](https://img.shields.io/badge/@-ngneat-383636?style=flat-square\u0026labelColor=8f68d4)](https://github.com/ngneat/)\n[![spectator](https://img.shields.io/badge/tested%20with-spectator-2196F3.svg?style=flat-square)]()\n\nThe `svg-icon` library enables using the `\u003csvg-icon\u003e` tag to directly display SVG icons in the DOM.\nThis approach offers an advantage over using an `\u003cimg\u003e` tag or via the CSS `background-image` property, because it allows styling and animating the SVG with CSS.\n\nFor 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.\n\n## Installation\n\n```\nnpm i @ngneat/svg-icon\nnpm i @ngneat/svg-generator --save-dev\n```\n\n## Icons Preparation\n\n- Add the icons to `src/assets/svg`\n- Add an alias to the `tsconfig` file (optional):\n\n```json\n{\n  \"paths\": {\n    \"@app/svg/*\": [\"src/app/svg/*\"]\n  }\n}\n```\n\n- Configure the `@ngneat/svg-generator` to clean and extract the icons content. Add the following to your `package.json` file:\n\n```json\n{\n  \"scripts\": {\n    \"prestart\": \"npm run svg\",\n    \"prebuild\": \"npm run svg\",\n    \"svg\": \"svg-generator\"\n  },\n  \"svgGenerator\": {\n    \"outputPath\": \"./src/app/svg\",\n    \"srcPath\": \"./src/assets/svg\",\n    \"svgoConfig\": {\n      \"plugins\": [\n        \"removeDimensions\",\n        \"cleanupAttrs\",\n        {\n          \"name\": \"convertColors\",\n          \"params\": {\n            \"currentColor\": true\n          }\n        }\n      ]\n    }\n  }\n}\n```\n\nIt can be modified to meet your needs.\n\n- Add the `outputPath` to your `gitignore` file\n- Run `npm run svg`\n\n## Icons Rendering\n\nUse the `provideSvgIcons` to register the icons:\n\n```ts\nimport { provideSvgIcons } from '@ngneat/svg-icon';\nimport { settingsIcon } from '@app/svg/settings';\n\nbootstrapApplication(AppComponent, {\n  providers: [provideSvgIcons([settingsIcon])],\n});\n```\n\nNow we can import the **standalone** `SvgIconComponent` and use the `svg-icon` component:\n\n```ts\nimport { SvgIconComponent } from '@ngneat/svg-icon';\n\n@Component({\n  imports: [SvgIconComponent],\n  template: `\n    \u003csvg-icon key=\"settings\"\u003e\u003c/svg-icon\u003e\n\n    \u003csvg-icon key=\"settings\" color=\"hotpink\" fontSize=\"40px\"\u003e\u003c/svg-icon\u003e\n  `,\n})\nexport class FooComponent {}\n```\n\n_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.\n\n## Register icons locally\n\nIn lazy load modules or lazy routes, we can use the `provideSvgIcons` method, for register icons accessible locally in these modules:\n\n```ts\nimport { dashboardIcon } from '@app/svg/dashboard';\nimport { userIcon } from '@app/svg/user';\nimport { provideSvgIcons } from '@ngneat/svg-icon';\n\n@NgModule({\n  declarations: [DashboardComponent],\n  providers: [provideSvgIcons([userIcon])],\n  imports: [DashboardRoutingModule],\n})\nexport class DashboardModule {}\n\n// OR in a Route def\n{\n  path: 'dashboard',\n  providers: [provideSvgIcons([userIcon])],\n  component: DashboardPageComponent\n}\n```\n\nNote 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.\n\n## Webpack Plugin\n\nTo make the process more seamless, the library provides a Webpack plugin you can use to automate the extracting process:\n\n```ts\nconst { SvgGeneratorWebpackPlugin } = require('@ngneat/svg-generator/webpack-plugin');\n\n{\n  plugins: [\n    new SvgGeneratorWebpackPlugin({\n      watch: !isProd,\n      srcPath: './src/assets/svg',\n      outputPath: './src/app/svg',\n      svgoConfig: {\n        plugins: ['removeDimensions'],\n      },\n    }),\n  ];\n}\n```\n\n## Group Icons\n\nThere 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.\n\nIn such cases, create a unique directory, and put the related icons inside it. For example:\n\n```\nhome.svg\nuser.svg\n/notifications\n - slack.svg\n - email.svg\n```\n\nThis will create a `notifications` folder with a `barrel` file that export the SVG icons inside the folder under a const named `${folderName}Icons`:\n\n```ts\nimport { notificationsIcons } from '@app/svg/notifications';\n\n@NgModule({\n  providers: [provideSvgIcons(notificationsIcons)],\n})\nexport class NotificationsModule {}\n```\n\n## Icon Sizing\n\nTo control the SVG size, we use the `font-size` property as described in this [article](https://css-tricks.com/control-icons-with-font-size/).\nYou also have the option to pass fixed sizes and use them across the application:\n\n```ts\nimport { provideSvgIconsConfig } from '@ngneat/svg-icon';\n\nbootstrapApplication(AppComponent, {\n  providers: [\n    provideSvgIconsConfig({\n      sizes: {\n        xs: '10px',\n        sm: '12px',\n        md: '16px',\n        lg: '20px',\n        xl: '25px',\n        xxl: '30px',\n      },\n      defaultSize: 'md',\n      icons,\n    }),\n  ],\n});\n```\n\nThey are used in the `size` input:\n\n```html\n\u003csvg-icon key=\"settings\" size=\"lg\"\u003e\u003c/svg-icon\u003e\n```\n\n## Inputs\n\n```ts\n@Input() key: string;\n@Input() size: string;\n@Input() fontSize: string;\n@Input() color: string;\n@Input() width: string | number;\n@Input() height: string | number;\n@Input() noShrink: boolean;\n```\n\n## SvgIconRegistry\n\nYou can inject the `SvgIconRegistry`, and get existing SVG icons or register new ones:\n\n```ts\nimport { SvgIconRegistry } from '@ngneat/svg-icon';\n\ninterface Icon {\n  name: string;\n  data: string;\n}\n\n@Component({\n  selector: 'app-root',\n  templateUrl: './app.component.html',\n  styleUrls: ['./app.component.scss'],\n})\nexport class AppComponent {\n  constructor(private registry: SvgIconRegistry) {\n    registry.register([Icon, Icon, Icon]);\n    registry.register(Icon);\n    registry.get(name);\n    registry.getAll();\n  }\n}\n```\n\nYou can also use the `injectRegisterIcons` method to register icons using the new `inject` API:\n\n```ts\nimport { injectRegisterIcons } from '@ngneat/svg-icon';\n\ninterface Icon {\n  name: string;\n  data: string;\n}\n\n@Component({\n  selector: 'app-root',\n  templateUrl: './app.component.html',\n  styleUrls: ['./app.component.scss'],\n})\nexport class AppComponent {\n  constructor() {\n    injectRegisterIcons([Icon, Icon, Icon]);\n  }\n}\n```\n\n## Missing Icon\n\nYou can define **missingIconFallback** which will be used if icon is not found in registry:\n\n```ts\nimport { provideSvgIconsConfig } from '@ngneat/svg-icon';\nimport { unknownIcon } from '@app/svg/unknown';\n\nbootstrapApplication(AppComponent, {\n  providers: [\n    provideSvgIconsConfig({\n      missingIconFallback: unknownIcon,\n    }),\n  ],\n});\n```\n\n## Custom config file\n\nThe `svgGenerator` config object is placed by default in your main `package.json`.\n\nIt can also be placed in any location supported by the [Cosmiconfig library](https://github.com/davidtheclark/cosmiconfig) such as a custom `.svgGeneratorrc.json` file.\n\nThe config object is looked for in the project root directory by default.\n\nIf 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.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fngneat%2Fsvg-icon","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fngneat%2Fsvg-icon","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fngneat%2Fsvg-icon/lists"}