7000+ SVG icons in one <svg-icon> Custom Element/Web Component file, No Dependencies, No external SVG files

IconMeister:

Does not Import SVG. IconMeister generates SVG from a configuraton String. An extra safeguard against SVG XSS attacks
Is about only loading the icons you use.
Bundles icons from different Icon Sets
as SCRIPT included in the HEAD of an HTML document (eg. SSR) there is no extra download... none, zilch, nada
All code + icons bundled in one file makes for better GZip compression
Is under 800 Bytes GZipped (excluding icons)
NO! There is no NPM package, you have to assemble the script yourself, see the Script Generator below
Play with example icons in a JSFiddle playground(minified production example) or JSFiddle #0 (documented full source code)

Layout of the IconMeister Custom Element code: (you build with the Code Generator below)

<script>
  !((             // created from one IIFE, no global scope polution
    icons,        // configurable icons (parameter below)
    {attributes}  // many observed attributes/properties/CSS properties
  )=>{
    // IconMeister JS code defining Custom Element <svg-icon></svg-icon>
    customElements.define("svg-icon", class extends HTMLElement{
      connectedCallback(){
      }
    })
  })({
    "im"    : "box:9;path:m3 3h3v3h-3z", // SVG icon used in this documentation page
    "icon2" : "box:24;path:M12 12h12 ...",
    "icon3" : "box:20;path:M0 0A10 ...",
    ...
  })
</script>

IconMeister creates an IMG or Inline SVG Element:

(default) The SVG is injected as data:image/svg into an IMG tag:

<svg-icon is="im"><img src='data:image/svg+xml,[SVG]'><svg-icon>

Easier for drag/drop interactions. The whole square IMG is the click target.

The SVG is injected as Inline-SVG:

<svg-icon is="im" img="0" ><svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 9'>...</svg><svg-icon>

Easier for styling and animating SVG with CSS. Be aware of pointer-events/click-target issues

Configure single Element with Attributes:

Configure single Element with Properties:

All Attributes are available as Property Getter/Setter

Mouse over these icons

to execute:

        demoicon.tile   = coloricon.fill; 
        demoicon.stroke = coloricon.stroke;
        demoicon.width  = 1; 
        demoicon.scale  = 1.7;

on the icons above

Configure multiple Elements with CSS Properties:

All Attribute/'Property values can be set with (modern) --CSSproperties

CSS properties are not observed (do not trigger updates).
CSS properties are read on Icon (re)creation.
You can redraw an icon by calling its .svg() method.

Example #1 - Scrabble tiles

IconMeister has 3 pre-defined variables: v1, v2, v3 (same behaviour as Attributes)

IconMeister SCRIPT Code Generator:

Want to play with example code, see: JSFiddle #0 (documented full source code) - JSFidlle Example #1 With <icon-toolbar> Custom Element(minified production example)

Copy this code into the HTML document. In the HEAD if you want the <svg-icon> Custom Element declared asap
If your WebServer is really really secured, you might need a CSP nonce.
Or import it. It is an IIFE, so will not touch the global scope.

You can ofcourse rename the iconnames to any name you want

IconMeister: 000 Bytes + icons = 000 Bytes (but only delivered GZip size counts!)

available icons filter:

Click an Icon to include in your (localStorage) Icon Set. Collapse the Icon Sets you do not want to see.

When working with icons

Icons take up 100% of the parent block element. Easiest is to place the icon inside a CSS Grid or Flexbox container.
Also see:
- https://www.impressivewebs.com/width-100-percent-css/
- https://github.com/iconmeister/iconmeister.github.io/issues/1
Take notice of accessibility https://css-tricks.com/accessible-svgs/

Advanced: include raw SVG

raw SVG is allowed but your mileage may vary

No " double quotes, only single quotes - because the JSON structure uses double-quotes
No ; semi-colon - because they separate IconMeister "box:16;path:..." commands
No , commas - because they separate IconMeister command Parameters

"circle":"box:24;<circle cx='12' cy='12' r='6'/>"

Advanced: hardcode propertyvalues

All properties can be hardcoded in the icon definition string

"arrow-up":"box:24;width:2;stroke:blue;opacity:0.5;path:M12 19L12 5M5 12 12 5 19 12"});

Attributes/Property/CSS properties will override these initial settings

Advanced: Icon API

All Icons can be accessed with the icon.api[0] API:


let icon = document.querySelector("svg-icon");
Object.entries( icon.api[0] ).forEach( ([name,definition]) => console.log(name) );

Every <svg-icon> points to the same icon set!

The API has 2 entry points: [ 0=ICONS, 1=FUNCs ]

Advanced: adding pre-defined functions

Only path: is defined as function:

Uncomment/add pre-defined functions

Additional functions can be added dynamically with:


let icon = document.querySelector("svg-icon");
icon.api[1]["newFunction"] = (par1, par2, ... ) => `[valid SVG]`; // see functions above

[WIP] W3C Custom Element/Web Component: <svg-icon is=iconname></svg-icon>