Use SVG Icons As Components – SVG-ICON

Preview:

Description:

A Vanilla JavaScript component (custom element) that allows you to render SVG icons as components.

How to use it:

1. Load 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 size of the icon.

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

4. Determine whether to move the svg inside shadowRoot.

<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;
}