@substrate-system/icons
v0.1.8
Published
Icons as web components
Downloads
948
Readme
icons
Icons as web components.
This package does not register component names. See the use section for more information.
See a live demonstration.
install
npm i -S @substrate-system/icons
components
Visible in the src folder. The filename corresponds to the default component name.
@substrate-system/icons/eye-regular
@substrate-system/icons/eye-slash
@substrate-system/icons/edit-square
@substrate-system/icons/edit-pencil
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
In the interest of interoperability, we do not register any components, you will need to call customElements.define('comonent-name', ComponentClass)
yourself:
import { EditSquare } from '@substrate-sustem/icons'
customElements.define('component-name', EditSquare)
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
Credits
These icons come from the free SVG files of fontawesome.