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