Inline SVG

Installation

npm i @oakstudios/inline-svg

Web Component

1. Load the web component. Choose the option that best suits your needs:

   Using a script tag placed at the end of the body:

   <!-- this automatically registers the component in the window as mechanical-ragger -->
   <script type="module" src="https://unpkg.com/@oakstudios/inline-svg@latest/auto-register.js"></script>

   OR importing the same auto-register function in JS:

   import "@oakstudios/inline-svg/auto-register";

   OR registering the component manually:

   import InlineSVG from "@oakstudios/inline-svg";
   
   customElements.define("inline-svg", InlineSVG);

2. Then add it to your HTML:

   <inline-svg src="/path/to/file.svg"></inline-svg>

API

Attribute	Default	Description
src	null	HTTP path or URL to the desired SVG image
scoped	false	Scopes id attributes and references to them within the SVG. Helps prevent naming collisions within the HTML document.

Acknowledgements

https://www.npmjs.com/package/react-inlinesvg