{"_id":"@amykate/svg-injector","_rev":"2-4a33b7571177eb2c949d2e2e26d23a9c","name":"@amykate/svg-injector","dist-tags":{"latest":"1.1.11"},"versions":{"1.1.10":{"name":"@amykate/svg-injector","description":"Fast, caching, dynamic inline SVG DOM injection library","version":"1.1.10","main":"lib/index.js","module":"esm/index.js","jsnext:main":"esm/index.js","homepage":"https://github.com/amykapernick/SVGInjector","repository":{"type":"git","url":"git+https://github.com/amykapernick/SVGInjector.git"},"license":"MIT","devDependencies":{"@babel/cli":"^7.0.0-beta.49","@babel/core":"^7.0.0-beta.49","@babel/preset-env":"^7.0.0-beta.49","babel-eslint":"^8.2.3","cross-env":"^5.1.6","eslint":"^4.19.1","eslint-config-react-app":"^2.1.0","eslint-plugin-flowtype":"^2.47.1","eslint-plugin-import":"^2.12.0","eslint-plugin-jsx-a11y":"^6.0.3","eslint-plugin-react":"^7.8.2","prettier":"^1.12.1","rimraf":"^2.6.2","rollup":"^0.59.3","rollup-plugin-babel":"^4.0.0-beta.2","rollup-plugin-uglify":"^4.0.0","uglify-js":"^2.4.13"},"scripts":{"build:commonjs":"cross-env BABEL_OUTPUT=commonjs babel src -d lib","build:esm":"babel src -d esm","build:umd":"rollup -c","clean":"rimraf esm lib umd","format":"prettier --write src/*.js","format:check":"prettier --list-different src/*.js","lint":"eslint .","postversion":"git push && git push --tags && npm publish --access=public","release":"npm version -m 'Release v%s'","version":"for TASK in format:check lint clean build:commonjs build:esm build:umd; do npm run $TASK; done"},"gitHead":"fd9ce5bc23ca674a1e2997955b616e112106162f","bugs":{"url":"https://github.com/amykapernick/SVGInjector/issues"},"_id":"@amykate/svg-injector@1.1.10","_npmVersion":"5.6.0","_nodeVersion":"9.7.1","_npmUser":{"name":"amykate","email":"software@aimhigherwebdesign.com"},"dist":{"integrity":"sha512-1Whkjrom7ZgKZ7Zt5/Tv8+OImXe6BP1lu868sgRFGmpJ11czPPfEvA9m6arCeUDLsTjwHLuIzFMROMwhd0R6Ww==","shasum":"75426776f08dd325c0a6a71294032dc27033c4bd","tarball":"https://registry.npmjs.org/@amykate/svg-injector/-/svg-injector-1.1.10.tgz","fileCount":31,"unpackedSize":44315,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbMKN3CRA9TVsSAnZWagAAlbUP/01qIW/bI48I7sfJDDFa\nDNyiZBXwvihPadUQcu/FMVGTIMnIVoqCN/fXnB6leLjgHLBKiwfe6KFZVsAg\nLsFL4yWQsl08ltfd2b89rgugUrQhanADk9ijrIj1CfxWgshPu/aCizTPhZDZ\nZzXO8oeHCdCfkr5ktZ9CPaNjCBKhI/u4zjfoiWzSWFrHO8VW5vVdX463qLpa\nMFzGhJaR9UBfiElDGZs6yVY6kLg9dPlavRa6dVcjgCX0TX6RK/1T+WQW86u4\n+N+QcUzLFQ4773M4P+jWAs+QoJFeXQUovmN0BZenjkag355kInl4pC6LVpM5\n67W9/YE92TuAaFqsh9xhWqZyNyzt1J3FCvtV+JmTaezEhdRX6I4oErPFlity\nAKIOcbE6myJAYXoFxByz12PimjtnD5EthB/swp84mEaCF2RQjZ1zKoIChGPo\njSAaJtxegzBWAsQEj8kP6mOEHml6MQLVPP1SHhpxHCPaO2dIFZljzIqM1UPb\nSr+PZjIupZRt6lV8nGLNDc1iMJD/NcPp83K12/hyxQ76h5hXQ2aOJf04CSE3\n7mGdANKp18vDNKgunDTAk/juLJx6fMGsdpHCi7zcnkVzkWYmtdGdpu2nbuGH\n/B6u6ErO42fVZVJsV1gICAN1PXJaUN+b9IsJq54pWNOJCzzKXzoeoHXil6uw\n7x6G\r\n=MuEA\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCQuBFAloXXi1SLR4n4dB3molmWkRGOzX90F+SOJXI3zAIgDKEc8d5tapspYWfMbgDn7RG35WVbh8xrRwlJVipA0fU="}]},"maintainers":[{"name":"amykate","email":"software@aimhigherwebdesign.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-injector_1.1.10_1529914230931_0.17940295587452848"},"_hasShrinkwrap":false},"1.1.11":{"name":"@amykate/svg-injector","description":"Fast, caching, dynamic inline SVG DOM injection library","version":"1.1.11","main":"lib/index.js","module":"esm/index.js","jsnext:main":"esm/index.js","homepage":"https://github.com/amykapernick/SVGInjector","repository":{"type":"git","url":"git+https://github.com/amykapernick/SVGInjector.git"},"license":"MIT","devDependencies":{"@babel/cli":"^7.0.0-beta.49","@babel/core":"^7.0.0-beta.49","@babel/preset-env":"^7.0.0-beta.49","babel-cli":"^6.26.0","babel-eslint":"^8.2.3","cross-env":"^5.1.6","eslint":"^4.19.1","eslint-config-react-app":"^2.1.0","eslint-plugin-flowtype":"^2.47.1","eslint-plugin-import":"^2.12.0","eslint-plugin-jsx-a11y":"^6.0.3","eslint-plugin-react":"^7.8.2","prettier":"^1.12.1","rimraf":"^2.6.2","rollup":"^0.59.3","rollup-plugin-babel":"^4.0.0-beta.2","rollup-plugin-uglify":"^4.0.0","uglify-js":"^2.4.13"},"scripts":{"build:commonjs":"cross-env BABEL_OUTPUT=commonjs babel src -d lib","build:esm":"babel src -d esm","build:umd":"rollup -c","clean":"rimraf esm lib umd","format":"prettier --write src/*.js","format:check":"prettier --list-different src/*.js","lint":"eslint .","postversion":"git push && git push --tags && npm publish --access=public","release":"npm version -m 'Release v%s'","version":"for TASK in format:check lint clean build:commonjs build:esm build:umd; do npm run $TASK; done"},"gitHead":"c7cc00269144d288cebe393ff1667e009beee245","bugs":{"url":"https://github.com/amykapernick/SVGInjector/issues"},"_id":"@amykate/svg-injector@1.1.11","_npmVersion":"5.6.0","_nodeVersion":"9.7.1","_npmUser":{"name":"amykate","email":"software@aimhigherwebdesign.com"},"dist":{"integrity":"sha512-xXGLytC5EUVbeLdKzazv+bDEvb24yNiz2X7WhOH4aNNNZqhGEM0EQqwb2fhEl9JKfkbCRp+BiMfCR0LseYpXeg==","shasum":"6b881588c0e4a9439801280e7f4b9d1fda38e442","tarball":"https://registry.npmjs.org/@amykate/svg-injector/-/svg-injector-1.1.11.tgz","fileCount":39,"unpackedSize":58696,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbMYlBCRA9TVsSAnZWagAAqJYP/1jCkRsa7jjDUWAisB07\nc8jkqpArwsFnBWrJeb9zl1wC1/9SxtUzj8uX+zgRgNrHpod0vZnrxIoFylDP\nQOd6x6SOhScMbBVrc49IbYMI+xORID4EdmXK0rBk8CknmpDxa4lPYcw4gDyG\nb7OvAjAmTZ718ck5IOnGBow3U2ZgQbBH0QD6aezuvZjQgoabJ8aVCeupcgAH\nLzvwYe+gi31pcV6FAFS1o4DjLgNR0SfM+LAAqQvQLTktvmPQXHYBlBDbPjcL\ngMJTyw0DUpHiF24KJZNY2E2yFhcjMKMY/9N3gohxWvnYkINpKQ5RHLbulCZ8\nsMwkBDj4LGqxTlWtlUcaeTEvmpxSqKkHWUWL6UirFFGy215o4Z4NBtmEfdu7\njLfHYbivWwlV48TS1OykYBmIG3JSibO9MF0MXaDW7/HMOIqpSsoCLcQrZP+w\nUPVxp+Ro1yI23WLWfUvPbnYECQZHrSFpQzCgTW6Cij5rrwS1xLnkJKzNjpvp\nNv/faovmpRihzeGbprSMz332m0ApixYufGBV9N50ao8cXDZQnb15+56g6uo0\nRyGHNVi17rbYBE+53jf5Uy4P8pSM2NN5KqwcIDxllnDZ/UMDNrjj3zXc5/VI\neoFs7KBlLfRIAD64aapYzHEEe790ocFzJBBTsRS8U1iwQXC2LLsY9C5CiExP\nOMfD\r\n=MuqN\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDu0DkcA1GSXnGTk/7s3ouKqLPQKJ+6spcIGZ3GmIembAIgeSxCUREWmxM1cwvDbw7elUf4f2Pw90eWQM9iNbWISsI="}]},"maintainers":[{"name":"amykate","email":"software@aimhigherwebdesign.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-injector_1.1.11_1529973057285_0.8660321313138188"},"_hasShrinkwrap":false}},"time":{"created":"2018-06-25T08:10:30.632Z","1.1.10":"2018-06-25T08:10:31.034Z","modified":"2022-04-04T13:53:30.156Z","1.1.11":"2018-06-26T00:30:57.380Z"},"maintainers":[{"name":"amykate","email":"software@aimhigherwebdesign.com"}],"description":"Fast, caching, dynamic inline SVG DOM injection library","homepage":"https://github.com/amykapernick/SVGInjector","repository":{"type":"git","url":"git+https://github.com/amykapernick/SVGInjector.git"},"bugs":{"url":"https://github.com/amykapernick/SVGInjector/issues"},"license":"MIT","readme":"# svg-injector\r\n\r\nMy copy of SVG Injector so it doesn't change ID values cos it's breaking my styling\r\n\r\n> A fast, caching, dynamic inline SVG DOM injection library.\r\n\r\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.\r\n\r\n## table of contents\r\n\r\n* [why](#why)\r\n* [how](#how)\r\n* [basic example](#basic-example)\r\n* [api](#api)\r\n* [full example](#full-example)\r\n* [codesandbox examples](#codesandbox-examples)\r\n* [usage with react](#usage-with-react)\r\n* [license](#license)\r\n\r\n## why\r\n\r\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.\r\n\r\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 `img` tag elements (or other tag of your choosing) and does the heavy lifting of swapping in the SVG markup inline for you.\r\n\r\n## how\r\n\r\n* Any DOM element, or array of elements, passed to **SVGInjector** with an SVG file `src` or `data-src` attribute will be replaced with the full SVG markup inline. The async loaded SVG is also cached so multiple uses of an SVG only requires a single server request.\r\n* Any embedded JavaScript in the SVG will optionally be extracted, cached and evaluated.\r\n\r\n:warning: The dynamic injection process uses AJAX calls to load SVG. If you are developing locally without running a local webserver, be aware that default browser security settings may [block these calls](http://wiki.fluidproject.org/display/fluid/Browser+settings+to+support+local+Ajax+calls).\r\n\r\n## basic example\r\n\r\nInclude the **SVGInjector** script on your page.\r\n\r\n```html\r\n<script src=\"https://unpkg.com/@tanem/svg-injector/umd/svg-injector.min.js\"></script>\r\n```\r\n\r\nAdd some SVG `img` tags.\r\n\r\n```html\r\n<img class=\"inject-me\" src=\"image-one.svg\">\r\n<img class=\"inject-me\" src=\"image-two.svg\">\r\n```\r\n\r\nInject 'em.\r\n\r\n```html\r\n<script>\r\n  // Elements to inject\r\n  var mySVGsToInject = document.querySelectorAll('img.inject-me')\r\n\r\n  // Do the injection\r\n  SVGInjector(mySVGsToInject)\r\n</script>\r\n```\r\n\r\nThe `img` tags have now been replaced with the full SVG markup.\r\n\r\n## api\r\n\r\nIn addition to passing elements to inject, an options object and callback function can optionally be defined.\r\n\r\n```js\r\nSVGInjector(elements, options, callback)\r\n```\r\n\r\n**`elements`**\r\n\r\nA single DOM element or array of elements, with `src` or `data-src` attributes defined, to inject.\r\n\r\n**`options`**\r\n\r\n```js\r\n{\r\n  evalScripts: [always|once|never],\r\n  pngFallback: [PNG directory],\r\n  each: [function]\r\n}\r\n```\r\n\r\n* `evalScript` - String\r\n\r\n  Should we run any script blocks found in the SVG?\r\n\r\n  * `always` - Run them every time.\r\n  * `once` - [default] Only run scripts once for each SVG file, even if it is used on a page more than once.\r\n  * `[false|'never']` - Ignore scripts\r\n\r\n* `pngFallback` - String\r\n\r\n  The directory where fallback PNGs are located for use if the browser doesn't [support SVG](http://caniuse.com/svg). This will look for a file with a `.png` extension matching the SVG filename defined in the `src` (or `data-src`).\r\n\r\n  For additional flexibility, since you might be using a single SVG styled in multiple ways, you can also define per-element fallbacks by adding a `data-fallback` or `data-png` attribute to your `img` tags to define a unique PNG for each context. Refer to the [Fallbacks](https://codesandbox.io/s/0xlkw2nw3v) example.\r\n\r\n* `each(svg)` - function\r\n\r\n  A function to call after each SVG is injected. Receives the newly injected SVG DOM element as a parameter.\r\n\r\n**`callback`**\r\n\r\nA function to call once all the requested SVG elements have been injected. Receives a count of the total SVGs injected as a parameter.\r\n\r\n## full example\r\n\r\n```html\r\n<img id=\"image-one\" class=\"inject-me\" data-src=\"image-one.svg\">\r\n<img id=\"image-two\" class=\"inject-me\" data-src=\"image-two.svg\">\r\n```\r\n\r\n```js\r\n// Elements to inject\r\nvar mySVGsToInject = document.querySelectorAll('img.inject-me')\r\n\r\n// Options\r\nvar injectorOptions = {\r\n  evalScripts: 'once',\r\n  pngFallback: 'assets/png',\r\n  each: function(svg) {\r\n    // Callback after each SVG is injected\r\n    console.log('SVG injected: ' + svg.getAttribute('id'))\r\n  }\r\n}\r\n\r\n// Trigger the injection\r\nSVGInjector(mySVGsToInject, injectorOptions, function(totalSVGsInjected) {\r\n  // Callback after all SVGs are injected\r\n  console.log('We injected ' + totalSVGsInjected + ' SVG(s)!')\r\n})\r\n```\r\n\r\n## codesandbox examples\r\n\r\n* [All the things](https://codesandbox.io/s/lxnnro2k2z)\r\n* [Fallbacks](https://codesandbox.io/s/0xlkw2nw3v)\r\n* [Simple](https://codesandbox.io/s/py6oml23wx)\r\n\r\n## usage with react\r\n\r\n* [react-svg](https://github.com/amykapernick/react-svg)\r\n\r\n## license\r\n\r\nMIT\r\n","readmeFilename":"README.md"}