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" />

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

4. Apply your own styles to the SVG icon.

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

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.