{"id":18277999,"url":"https://github.com/tanem/svg-injector","last_synced_at":"2025-04-05T05:08:25.800Z","repository":{"id":37677652,"uuid":"134912338","full_name":"tanem/svg-injector","owner":"tanem","description":":syringe: Fast, caching, dynamic inline SVG DOM injection library.","archived":false,"fork":false,"pushed_at":"2024-04-11T23:56:50.000Z","size":9838,"stargazers_count":95,"open_issues_count":10,"forks_count":14,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-04-14T14:59:29.832Z","etag":null,"topics":["dom","html","images","img","javascript","scalable-vector-graphics","svg","typescript"],"latest_commit_sha":null,"homepage":"https://npm.im/@tanem/svg-injector","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/tanem.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":"AUTHORS","dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-05-25T23:04:37.000Z","updated_at":"2024-05-02T20:44:23.235Z","dependencies_parsed_at":"2024-05-02T20:56:26.178Z","dependency_job_id":null,"html_url":"https://github.com/tanem/svg-injector","commit_stats":null,"previous_names":[],"tags_count":224,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tanem%2Fsvg-injector","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tanem%2Fsvg-injector/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tanem%2Fsvg-injector/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tanem%2Fsvg-injector/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/tanem","download_url":"https://codeload.github.com/tanem/svg-injector/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247289428,"owners_count":20914464,"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":["dom","html","images","img","javascript","scalable-vector-graphics","svg","typescript"],"created_at":"2024-11-05T12:22:36.151Z","updated_at":"2025-04-05T05:08:25.783Z","avatar_url":"https://github.com/tanem.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# svg-injector\n\n[![npm version](https://img.shields.io/npm/v/@tanem/svg-injector.svg?style=flat-square)](https://www.npmjs.com/package/@tanem/svg-injector)\n[![build status](https://img.shields.io/github/actions/workflow/status/tanem/svg-injector/ci.yml?branch=master\u0026style=flat-square)](https://github.com/tanem/svg-injector/actions?query=workflow%3ACI)\n[![coverage status](https://img.shields.io/codecov/c/github/tanem/svg-injector.svg?style=flat-square)](https://codecov.io/gh/tanem/svg-injector)\n[![npm downloads](https://img.shields.io/npm/dm/@tanem/svg-injector.svg?style=flat-square)](https://www.npmjs.com/package/@tanem/svg-injector)\n[![minzipped size](https://img.shields.io/bundlephobia/minzip/@tanem/svg-injector?style=flat-square)](https://bundlephobia.com/result?p=@tanem/svg-injector)\n\n\u003e A fast, caching, dynamic inline SVG DOM injection library.\n\n## Background\n\nThere are a number of ways to use SVG on a page (`object`, `embed`, `iframe`, `img`, CSS `background-image`) but to unlock the full potential of SVG, including full element-level CSS styling and evaluation of embedded JavaScript, the full SVG markup must be included directly in the DOM.\n\nWrangling and maintaining a bunch of inline SVG on your pages isn't anyone's idea of good time, so `SVGInjector` lets you work with simple tag elements and does the heavy lifting of swapping in the SVG markup inline for you.\n\n## Basic Usage\n\n```html\n\u003cdiv id=\"inject-me\" data-src=\"icon.svg\"\u003e\u003c/div\u003e\n```\n\n```js\nimport { SVGInjector } from '@tanem/svg-injector'\n\nSVGInjector(document.getElementById('inject-me'))\n```\n\n## Avoiding XSS\n\nBe careful when injecting arbitrary third-party SVGs into the DOM, as this opens the door to XSS attacks. If you must inject third-party SVGs, it is highly recommended to sanitize the SVG before injecting. The following example uses [DOMPurify](https://github.com/cure53/DOMPurify) to strip out attributes and tags that can execute arbitrary JavaScript. Note that this can alter the behavior of the SVG.\n\n```js\nimport { SVGInjector } from '@tanem/svg-injector'\nimport DOMPurify from 'dompurify'\n\nSVGInjector(document.getElementById('inject-me'), {\n  beforeEach(svg) {\n    DOMPurify.sanitize(svg, {\n      IN_PLACE: true,\n      USE_PROFILES: { svg: true, svgFilters: true },\n    })\n  },\n})\n```\n\n## Live Examples\n\n- Basic Usage: [Source](https://github.com/tanem/svg-injector/tree/master/examples/basic-usage) | [Sandbox](https://codesandbox.io/s/github/tanem/svg-injector/tree/master/examples/basic-usage)\n- API Usage: [Source](https://github.com/tanem/svg-injector/tree/master/examples/api-usage) | [Sandbox](https://codesandbox.io/s/github/tanem/svg-injector/tree/master/examples/api-usage)\n- MooTools: [Source](https://github.com/tanem/svg-injector/tree/master/examples/mootools) | [Sandbox](https://codesandbox.io/s/github/tanem/svg-injector/tree/master/examples/mootools)\n- UMD Build (Development): [Source](https://github.com/tanem/svg-injector/tree/master/examples/umd-dev) | [Sandbox](https://codesandbox.io/s/github/tanem/svg-injector/tree/master/examples/umd-dev)\n- UMD Build (Production): [Source](https://github.com/tanem/svg-injector/tree/master/examples/umd-prod) | [Sandbox](https://codesandbox.io/s/github/tanem/svg-injector/tree/master/examples/umd-prod)\n\n## API\n\n**Arguments**\n\n- `elements` - A single DOM element or array of elements, with `src` or `data-src` attributes defined, to inject.\n- `options` - _Optional_ An object containing the optional arguments defined below. Defaults to `{}`.\n  - `afterAll(elementsLoaded)` - _Optional_ A callback which is called when all elements have been processed. `elementsLoaded` is the total number of elements loaded. Defaults to `() =\u003e undefined`.\n  - `afterEach(err, svg)` - _Optional_ A callback which is called when each element is processed. `svg` is the newly injected SVG DOM element. Defaults to `() =\u003e undefined`.\n  - `beforeEach(svg)` - _Optional_ A callback which is called just before each SVG element is added to the DOM. `svg` is the SVG DOM element which is about to be injected. Defaults to `() =\u003e undefined`.\n  - `cacheRequests` - _Optional_ Use request cache. Defaults to `true`.\n  - `evalScripts` - _Optional_ Run any script blocks found in the SVG. One of `'always'`, `'once'`, or `'never'`. Defaults to `'never'`.\n  - `httpRequestWithCredentials` - _Optional_ Boolean that indicates whether or not cross-site Access-Control requests should be made using credentials. Defaults to `false`.\n  - `renumerateIRIElements` - _Optional_ Boolean indicating if SVG IRI addressable elements should be renumerated. Defaults to `true`.\n\n**Example**\n\n```html\n\u003cdiv class=\"inject-me\" data-src=\"icon-one.svg\"\u003e\u003c/div\u003e\n\u003cdiv class=\"inject-me\" data-src=\"icon-two.svg\"\u003e\u003c/div\u003e\n```\n\n```js\nimport { SVGInjector } from '@tanem/svg-injector'\n\nSVGInjector(document.getElementsByClassName('inject-me'), {\n  afterAll(elementsLoaded) {\n    console.log(`injected ${elementsLoaded} elements`)\n  },\n  afterEach(err, svg) {\n    if (err) {\n      throw err\n    }\n    console.log(`injected ${svg.outerHTML}`)\n  },\n  beforeEach(svg) {\n    svg.setAttribute('stroke', 'red')\n  },\n  cacheRequests: false,\n  evalScripts: 'once',\n  httpRequestWithCredentials: false,\n  renumerateIRIElements: false,\n})\n```\n\n## Installation\n\n\u003e ⚠️This library uses [`Array.from()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/from), so if you're targeting [browsers that don't support that method](https://kangax.github.io/compat-table/es6/#test-Array_static_methods), you'll need to ensure an appropriate polyfill is included manually. See [this issue comment](https://github.com/tanem/svg-injector/issues/97#issuecomment-483365473) for further detail.\n\n```\n$ npm install @tanem/svg-injector\n```\n\nThere are also UMD builds available via [unpkg](https://unpkg.com/):\n\n- https://unpkg.com/@tanem/svg-injector/dist/svg-injector.umd.development.js\n- https://unpkg.com/@tanem/svg-injector/dist/svg-injector.umd.production.js\n\n## Credit\n\nThis is a fork of a [library](https://github.com/iconic/SVGInjector) originally developed by [Waybury](http://waybury.com/) for use in [iconic.js](https://useiconic.com/tools/iconic-js/), part of the [Iconic](https://useiconic.com/) icon system.\n\n## License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftanem%2Fsvg-injector","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftanem%2Fsvg-injector","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftanem%2Fsvg-injector/lists"}