Error: HTTP Server Required

This demo does not work if you open it from the filesystem. Use a local web server instead.

Using python 3, you could start a local server like so:

cd folder_to_serve_from
python3 -m http.server 8000
Setup

The following script would import and register the web component. You might need to adjust the paths highlighted below depending on where you place the generated files in your setup. 

<script type="module">
import svgIcon from "./svg-icon.js";
svgIcon({
    defaultSize: 12,
    path: "svgs/"
});
</script>
Inserting & Customizing

The minimum code required to insert a glyph in HTML is as follows:

<svg-icon name="NPointJEU-9"></svg-icon>

You could change the size of the glyph using the size attribute:

<svg-icon name="NPointJEU-9" size="24"></svg-icon>

You can also specify a color palette like so:

<svg-icon name="{exampleGlyphName}" class="palette0"></svg-icon>

In order to customize colors, you could use some CSS:

.custom {
    --color0: red;
}
@media (prefers-color-scheme: dark) {
    .custom {
        --color0: pink;
    }
}

The class defined above can be applied like so:

<svg-icon name="NPointJEU-9" class="custom"></svg-icon>
List of Glyphs

Click/tap on each glyph to copy the HTML code for inserting it.