0.1.18 • Published 3 months ago

@substrate-system/icons v0.1.18

Weekly downloads
-
License
SEE LIECENSE IN L...
Repository
github
Last release
3 months ago

icons

tests types module semantic versioning install size license

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.

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)

tag names

The default tag name is exposed as TAG_NAME 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_NAME = '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

Credits

These icons come from the free SVG files of fontawesome.

0.1.12

4 months ago

0.1.13

4 months ago

0.1.14

4 months ago

0.1.15

3 months ago

0.1.16

3 months ago

0.1.17

3 months ago

0.1.18

3 months ago

0.1.11

4 months ago

0.1.10

7 months ago

0.1.2

8 months ago

0.1.8

8 months ago

0.1.7

8 months ago

0.1.4

8 months ago

0.1.3

8 months ago

0.1.6

8 months ago

0.1.5

8 months ago

0.0.8

12 months ago

0.0.7

12 months ago

0.0.6

12 months ago

0.0.5

12 months ago

0.0.4

12 months ago

0.0.3

1 year ago

0.0.2

1 year ago

0.0.1

1 year ago

0.0.0

1 year ago