https://github.com/metonym/svelte-spectrum-icons

Adobe Spectrum Workflow and UI SVG icons as Svelte components
https://github.com/metonym/svelte-spectrum-icons

icon spectrum svelte svelte-component svg ui workflow

Last synced: 11 days ago
JSON representation

Adobe Spectrum Workflow and UI SVG icons as Svelte components

• Host: GitHub
• URL: https://github.com/metonym/svelte-spectrum-icons
• Owner: metonym
• License: mit
• Created: 2020-04-24T14:58:44.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2023-12-05T15:15:25.000Z (11 months ago)
• Last Synced: 2024-10-25T22:34:12.752Z (14 days ago)
• Topics: icon, spectrum, svelte, svelte-component, svg, ui, workflow
• Language: JavaScript
• Homepage: https://metonym.github.io/svelte-spectrum-icons/
• Size: 1.35 MB
• Stars: 6
• Watchers: 2
• Forks: 1
• Open Issues: 10
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# svelte-spectrum-icons

[![NPM][npm]][npm-url]

[![Build][build]][build-badge]

> Adobe Spectrum Workflow and UI SVG icons as Svelte components.

This library builds [Adobe Spectrum Workflow and UI icons](https://spectrum.adobe.com/page/icons/) as Svelte components with zero dependencies.

Spectrum icons have two sizes: `18` for desktop and `24` for mobile.

For Workflow icons, the sizes are appended to the icon name. For example, `Add` becomes `Add18` and `Add24`.

For UI icons, the word "Mobile" is appended to the icon name; `Asterisk` is size `18` while `AsteriskMobile` is size `24`.

Try it in the [Svelte REPL](https://svelte.dev/repl/8b2c2ef9ad68426bb320d455026b666e).

## [Icon Preview](https://metonym.github.io/svelte-spectrum-icons/)

## Install

```sh

yarn add -D svelte-spectrum-icons

# OR

npm i -D svelte-spectrum-icons

```

## Usage

```html

  import Asterisk from "svelte-spectrum-icons/ui/Asterisk.svelte";

  import Add24 from "svelte-spectrum-icons/workflow/Add24.svelte";

```

For a full list of supported icons:

- **UI**: [UI_ICONS.md](UI_ICONS.md)

- **Workflow**: [WORKFLOW_ICONS.md](WORKFLOW_ICONS.md)

## API

`$$restProps` are forwarded to the `svg` element.

### Forwarded events

- on:click

- on:mouseover

- on:mouseenter

- on:mouseout

- on:keydown

## [Changelog](CHANGELOG.md)

## License

[MIT](LICENSE)

[npm]: https://img.shields.io/npm/v/svelte-spectrum-icons.svg?color=blue

[npm-url]: https://npmjs.com/package/svelte-spectrum-icons

[build]: https://travis-ci.com/metonym/svelte-spectrum-icons.svg?branch=master

[build-badge]: https://travis-ci.com/metonym/svelte-spectrum-icons