@substrate-system/icons

icons

Icons as web components.

See a live demonstration.

Contents

• Install
• Components
• Modules
  • ESM
  • Common JS
• Use
  • SSR
  • Define
  • JS
  • Attributes
  • HTML
  • Pre-built JS
• See Also
• Credits

Install

npm i -S @substrate-system/icons

Components

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

Modules

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

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)

SSR

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()

Define

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.

JS

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

Attributes

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

HTML

<div>
    <eye-regular title="See something"></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>

See Also

• Accessible SVG Icons
• Accessible Icon Buttons
• Inclusively Hidden

Credits

These icons come from the free SVG files of fontawesome.