{"id":13475798,"url":"https://github.com/arkon/ng-inline-svg","last_synced_at":"2025-03-27T01:30:24.080Z","repository":{"id":9988850,"uuid":"62845177","full_name":"arkon/ng-inline-svg","owner":"arkon","description":"[Inactive] Angular directive for inserting an SVG file inline within an element.","archived":true,"fork":false,"pushed_at":"2022-05-09T18:54:45.000Z","size":3672,"stargazers_count":210,"open_issues_count":19,"forks_count":90,"subscribers_count":8,"default_branch":"master","last_synced_at":"2025-03-16T05:32:15.313Z","etag":null,"topics":["angular","directive","svg","svg-inline"],"latest_commit_sha":null,"homepage":"https://echeung.me/ng-inline-svg/","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/arkon.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-07-07T23:51:07.000Z","updated_at":"2024-05-18T17:01:39.000Z","dependencies_parsed_at":"2022-08-07T05:15:22.205Z","dependency_job_id":null,"html_url":"https://github.com/arkon/ng-inline-svg","commit_stats":null,"previous_names":[],"tags_count":79,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arkon%2Fng-inline-svg","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arkon%2Fng-inline-svg/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arkon%2Fng-inline-svg/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arkon%2Fng-inline-svg/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/arkon","download_url":"https://codeload.github.com/arkon/ng-inline-svg/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245755552,"owners_count":20667026,"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","directive","svg","svg-inline"],"created_at":"2024-07-31T16:01:23.674Z","updated_at":"2025-03-27T01:30:23.771Z","avatar_url":"https://github.com/arkon.png","language":"TypeScript","funding_links":[],"categories":["TypeScript","Uncategorized","Awesome Angular [![Awesome TipeIO](https://img.shields.io/badge/Awesome%20Angular-@TipeIO-6C6AE7.svg)](https://github.com/gdi2290/awesome-angular) [![Awesome devarchy.com](https://img.shields.io/badge/Awesome%20Angular-@devarchy.com-86BDC1.svg)](https://github.com/brillout/awesome-angular-components)"],"sub_categories":["Uncategorized","Angular \u003ca id=\"angular\"\u003e\u003c/a\u003e"],"readme":"# ng-inline-svg\n\n⚠️　**This package is deprecated and not maintained.** ⚠️\n\n---\n\n[![NPM](https://nodei.co/npm/ng-inline-svg.png?compact=true)](https://nodei.co/npm/ng-inline-svg)\n\n**[Demo](https://echeung.me/ng-inline-svg)**\n\n*Formerly called [ng2-inline-svg](https://github.com/arkon/ng2-inline-svg)*\n\nAngular directive for inserting an SVG inline within an element, allowing for easily styling\nwith CSS like `fill: currentColor;`.\n\nThis is based on [md-icon](https://github.com/angular/material2/tree/master/src/lib/icon),\nexcept this is meant purely for inserting SVG files within an element, without the extra things like\nfont icons.\n\n\n## Installation\n\n```shell\nnpm install --save ng-inline-svg\n```\n\n\n## Usage\n\nAdd `HttpClientModule` and `InlineSVGModule` to your list of module imports:\n\n```typescript\nimport { HttpClientModule } from '@angular/common/http';\nimport { InlineSVGModule } from 'ng-inline-svg';\n\n@NgModule({\n  declarations: [AppComponent],\n  imports: [BrowserModule, HttpClientModule, InlineSVGModule.forRoot()],\n  bootstrap: [AppComponent]\n})\nclass AppModule {}\n```\n\nThe base URL will be automatically fetched based on your `\u003cbase\u003e` tag. If you want to configure the base URL manually, you can use the `forRoot` function:\n\n```typescript\nInlineSVGModule.forRoot({ baseUrl: 'https://mysite.com/myapp/' })\n```\n\nYou can then use the directive in your templates:\n\n```typescript\n@Component({\n  selector: 'app',\n  template: `\n    \u003cdiv class=\"my-icon\" aria-label=\"My icon\" [inlineSVG]=\"'/img/image.svg'\"\u003e\u003c/div\u003e\n  `\n})\nexport class AppComponent {}\n```\n\nThe SVG file (if found) will be inserted *inside* the element with the `[inlineSVG]` directive. Support for icons using the [`symbol` method](https://css-tricks.com/svg-symbol-good-choice-icons/) is also supported (e.g. `[inlineSVG]=\"'#shape-id'\"`).\n\n### Options\n\n#### Inputs\n\n| Property name | Type | Default | Description |\n| ------------- | ---- | ------- | ----------- |\n| cacheSVG | boolean | `true` | Caches the SVG based on the absolute URL. Cache only persists for the (sessional) lifetime of the page. |\n| resolveSVGUrl | boolean | `true` | Bypass logic that tries to determine the absolute URL using the page's or configured base URL. |\n| prepend | boolean | `false` | Inserts before the first child instead of appending, overwrites `replaceContents` |\n| replaceContents | boolean | `true` | Replaces the contents of the element with the SVG instead of just appending it to its children. |\n| injectComponent | boolean | `false` | Injects an `\u003cinline-svg\u003e` component containing the SVG inside the element with the directive. |\n| setSVGAttributes | `{ [key: string]: any }` | | Sets attributes on the SVG element. Runs after `removeSVGAttributes`. |\n| removeSVGAttributes | string[] | | An array of attribute names to remove from all child elements within the SVG. |\n| forceEvalStyles | boolean | `false` | Forces embeded style tags' contents to be evaluated (for IE 11). |\n| evalScripts | `'always'`, `'once'`, `'none'` | `'always'` | Whether to evaluate embedded scripts in the loaded SVG files. The `SVGScriptEvalMode` enum is also provided. |\n| fallbackImgUrl | string | | URL for a regular image to be displayed as a fallback if the SVG fails to load. |\n| fallbackSVG | string | | SVG filename to be displayed as a fallback if the SVG fails to load. |\n| onSVGLoaded | `(svg: SVGElement, parent: Element \\| null) =\u003e SVGElement` | | Lifecycle hook that allows the loaded SVG to be manipulated prior to insertion. |\n\n#### Outputs\n\n| Property name | Callback arguments | Description |\n| ------------- | ------------------ | ----------- |\n| onSVGInserted | `e: SVGElement` | Emits the `SVGElement` post-insertion. |\n| onSVGFailed | `e: any` | Emits when there is some error (e.g. embed SVG not supported, fetch failed, etc.) |\n\n### Server-side rendering with Angular Universal\n\nThe SVG files can also be rendered server-side. For this to work, you have to set the `baseURL`, since Angular needs to have an absolute URL to retrieve the files server-side and we're not able to get your baseURL automatically in a server-side environment. See manual for setting `baseURL` above.\n\nHere is one way to achieve this dynamically by adding an app initalizing service which sets the base URL based on the environment it runs.\n\n*app-server.module.ts*:\n```typescript\nimport { NgModule, APP_INITIALIZER } from '@angular/core';\nimport { InlineSVGConfig } from 'ng-inline-svg';\nimport { SVGConfig } from './svg-config';\n\n@NgModule({\n  providers: [\n    { provide: InlineSVGConfig, useClass: SVGConfig }\n  ]\n})\nexport class AppServerModule {}\n```\n\n*svg-config.ts*:\n```typescript\nimport { Injectable, Inject } from '@angular/core';\nimport { InlineSVGConfig } from 'ng-inline-svg';\n\n@Injectable()\nexport class SVGConfig extends InlineSVGConfig {\n  // Do what ever conditions you need to set this, e.g. checking for server-side rendering\n  // and only set baseURL when server-side rendered if you want.\n\n  constructor(...) {\n    super();\n\n    // When the server-side rendered app runs on localhost:3000, make sure baseURL is\n    // http://localhost:3000 and make sure the Express server is configured properly to\n    // allow the URL of the asset folders storing the SVG files.\n    this.baseUrl = 'http://localhost:3000';\n\n    // If you don't want the directive to run on the server side.\n    this.clientOnly = true;\n\n    // If you want to bypass your HttpClient interceptor chain when fetching SVGs.\n    this.bypassHttpClientInterceptorChain = true;\n  }\n}\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Farkon%2Fng-inline-svg","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Farkon%2Fng-inline-svg","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Farkon%2Fng-inline-svg/lists"}