SVGInjector

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.

1. Include the library in your page

   • 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.69/dist/svg-injector.umd.production.js"></script>

2. Load the initializer code in index.js

   • Declare the following import statement in js/mrare/index.js. This ensures that the initializer code is included in the theme.js bundle.

     import './svg-injector';

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.