Injects SVG code into the page from the source of an <img> tag.
About the Plugin
Theming the color of an SVG requires the SVG source to be inline with the page HTML.
Wrangling 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.
Initializing
The demo pages already include the following code. These steps are only necessary if you are building a page from scratch. Remove these references if you are not using this plugin to improve page load times.
Copy the script tag below and paste in the foot of your page. Add this where you see the other library scripts. This line should be inserted after jquery.js and before theme.js.
<!-- SVGInjector (replaces img tags with SVG code to allow easy inclusion of SVGs with the benefit of inheriting colors and styles)-->
<script type="text/javascript" src="assets/js/svg-injector.umd.production.js"></script>Alternatively you may wish to load this resource from a CDN to potentially improve page load times.
<!-- SVGInjector (replaces img tags with SVG code to allow easy inclusion of SVGs with the benefit of inheriting colors and styles)-->
<script type="text/javascript" src="https://unpkg.com/@tanem/svg-injector@~8.0.35/dist/svg-injector.umd.production.js"></script>index.jsjs/mrare/index.js. This ensures that the initializer code is included in the theme.js bundle.import './svg-injector';Basic Usage
Add data-inject-svg attribute to an <img> tag to transform the image into an embedded SVG.
Image sources are read from the src attribute of the img tag and the SVG file is downloaded. The SVG source is then injected into a new <svg> tag.
Attributes are transferred to the new svg, which means the class attribute will be transferred. This is useful for passing any classes such as icon to the resulting SVG.