icons

Icons as web components.

See a live demonstration.

install

npm i -S @substrate-system/icons

API

This exposes ESM and common JS via package.json exports field.

ESM

import '@substrate-system/icons/eye-regular'

Common JS

require('@substrate-system/icons/eye-regular')

use

This calls the global function customElements.define. Just import, then use the tag in your HTML.

JS

import '@substrate-system/icons/eye-regular'

HTML

<div>
    <eye-regular></eye-regular>
</div>

pre-built JS

This package exposes minified JS files too. Copy them to a location that is accessible to your web server, then link to them in HTML.

copy

cp ./node_modules/@substrate-system/icons/dist/eye-regular.min.js ./public

HTML

<script type="module" src="./eye-regular.min.js"></script>

components

A list of the components

• @substrate-system/icons/eye-regular
• @substrate-system/icons/eye-slash
• @substrate-system/icons/edit-square
• @substrate-system/icons/edit-pencil

credits

These icons come from the free SVG files of fontawesome.