Icons as web components.

See a live demonstration.

npm i -S @substrate-system/icons

Visible in the src folder, the filename corresponds to the default component name.

See the demo page for a list of all components with names.

• @substrate-system/icons/eye-regular
• @substrate-system/icons/eye-slash
• @substrate-system/icons/edit-square
• @substrate-system/icons/edit-pencil
• @substrate-system/icons/save-cloud
• @substrate-system/icons/log-out
• @substrate-system/icons/new-tab
• @substrate-system/icons/heart-outline
• @substrate-system/icons/github-logo

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

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

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

In the interest of interoperability, we do not define any components, you will need to call customElements.define('component-name', ComponentClass) yourself:

import { EditSquare } from '@substrate-system/icons'

customElements.define('component-name', EditSquare)

Server-side render by importing from the path /ssr.

import { githubLogo } from '@substrate-system/icons/ssr'

// this is a function that returns a string
const html = githubLogo()

Call the helper function, define:

import { define } from '@substrate-system/icons'

// this will load and register all components,
// using the default component names
define()

Or register components individually, with the default names:

import { define } from '@substrate-system/icons/edit-pencil'

// this will register with the default component name, 'edit-pencil'
define()

See the isRegistered helper function in @substrate/web-component for help with name collisions.

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

Pass in a title attribute to change the svg title. If title is omitted, it will render with a default title.

<div>
    <eye-regular title="See something"></eye-regular>
</div>

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.

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

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

• Accessible SVG Icons
• Accessible Icon Buttons
• Inclusively Hidden

These icons come from the free SVG files of fontawesome.