icons

Icons as web components.

This package does not register component names. See the use section for more information.

See a live demonstration.

Contents

• install
• components
• Modules
  • ESM
  • Common JS
• use
  • SSR
  • tag names
  • register
  • 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

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('comonent-name', ComponentClass) yourself:

import { EditSquare } from '@substrate-sustem/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()

tag names

The default tag name is exposed as TAG static property on each class. You can override this property to set something custom.

import { register, EditSquare } from '@substrate-system/icons/eye-regular'

EditSquare.TAG = 'exmaple-name'
register()

// now use it like `<example-name />`

register

Or call the helper function, regiser:

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

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

Or register components individually, with the default names:

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

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

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.