September 23, 2022

Web Component for Loading SVG Icons in the DOM

SVG-ICON Vanilla js web component, a custom component that provides the ability to simply load SVG icons into the HTML DOM. It is up to the user of the component to determine its accessibility and other flavors.

You can fork and add your own logic if needed (eg: to set the default path of the SVG icon folder and append the extension so you just pass the name as the src value).

Tip: It is recommended that the SVG have the Width box attribute and not the Width/Height attributes as they will be overridden.

How to make use of it:

1. Download the svg-icon.js web component.

<script src="./svg-icon.js"></script>

2. Add the svg icon component to the page and specify the path to the svg icon.

<svg-icon src="demo.svg" />

3. Set the icon size.

<svg-icon src="demo.svg" size="24" />

4. Specify whether to move the SVG inside the shadow root.

<svg-icon src="demo.svg" size="24" sealed />

5. Apply your own styles to the SVG icon.

svg-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-right: 0.2rem;

Use SVG Icons As Components, SVG-ICON web component Plugin/Github

See Demo And Download

Official Website(designstorming): Click Here

This superior jQuery/javascript plugin is developed by designstorming. For extra Advanced usage, please go to the official website.


You may also like...

Leave a Reply

Your email address will not be published.