svelte-symbols

About

I wanted an easy way to add icons from multiple icon libraries to my Svelte/SvelteKit projects, which also could be easily styled and animated.

Note: This package is in very early stage of development.

If you found a bug, have some feedback, want to contribute or whatever, feel free to send me an e-mail: [email protected]

Install

npm install svelte-symbols

Usage

import Icon from 'svelte-symbols/Icon.svelte';

The name prop has the format library:icon or library:icon:variant.

<Icon name='ionic:mail-unread:outlined' />
<Icon name='ionic:barcode:sharp' />
<Icon name='material:search' />
<Icon name='bootstrap:file-pdf' />
<Icon name='mage-brands:github' />
<Icon name='grid:fire' />
<Icon name='pixelart:bug' />

Note: If you specify a variant that doesn’t exist in the library (or in general), the default variant will be used instead.

Styling

Color

The color could be set by the color property or by CSS variable --color.

By default the icons have the CSS value currentcolor applied, so they get the currently computed foreground color of the surrounding parent element.

<Icon name='grid:fire' color='red' />
<Icon name='pixelart:bug' color='#008800' />

Size

The size could be set by the size property or by CSS variable --size.

<Icon name='grid:fire' size='30' /> <!-- = 30px -->
<Icon name='pixelart:bug' size='14' /> <!-- = 14px -->

Note: In next update this will be more flexible and support all common units.

Available Libraries

| prefix / namespace | Name | Version | Browse | |--------------------|------------------------|---------|--------| | akar | Akar Icons | | akaricons.com | | bootstrap | Bootstrap Icons | 1.13.1 | icons.getbootstrap.com | | box | Boxicons Free | | boxicons.com | | box-brands | Boxicons Free (Brands) | | boxicons.com | | cssgg | css.gg (CSS Symbols) | | css.gg | | grid | Gridicons | | automattic.github.io/gridicons | | hero | HeroIcons | | heroicons.com | | iconoir | Iconoir | 7.11.0 | iconoir.com | | ionic | Ionicons | 7.1.0 | ionic.io/ionicons | | lucide | Lucide | | lucide.dev | | mage | Mage Icons | | mageicons.com | | mage-brands | Mage Icons (Brands) | | mageicons.com | | majestic | Majesticons | | majesticons.com | | material | Material Symbols | | fonts.google.com/icons | | phosphor | Phosphor Icons | 2.1.1 | phosphoricons.com | | pixel | Pixel Icon Library | 1.0.6 | pixeliconlibrary.com | | pixel-brands | Pixel Icon Library | 1.0.6 | pixeliconlibrary.com | | pixel-purcats | Pixel Icon Library | 1.0.6 | pixeliconlibrary.com | | pixelart | Pixelarticons Free | 1.8.1 | pixelarticons.com | | simple | Simple Icons | | simpleicons.org |

Animations

The package comes with some animations you can apply by the act property:

import { pulse } from 'svelte-symbols';

<Icon name='pixelart:bug' onMount={pulse} /> // permanent
<Icon name='pixelart:bug' onClick={pulse} /> // triggered by click event
<Icon name='pixelart:bug' onHover={pulse} /> // triggered by hover event

Important: The uppercase letter is important here because we don't use the native events!

Available Animations

Right now there are 9 animations available.

| Name | ... | |--------|-----| | bounce | | | flip | | | jump | | | pulse | | | shake | | | spin | | | strobo | | | whip | | | wobble | |

Note: In one of the next updates the whole animation logic will be restructured, so animations could be configured, combined etc.

Configuration

There are no configuration options yet, but they will be added in the future.

Roadmap (to do)

• Normalize casing of icon names across all libraries
• Enhancement of handling of icon variations
• Add a method to optionally cache SVG files
• Add a method to make custom SVG files available in the Icon component
• Add a method to rename icons or create shorthand aliases
• Enhancement of Documentation
• Enhanced implementation of animations