Icon-component for Svelte

This is a simple component to render an SVG-icon in svelte. NOTE: It is basically a typescript-version of svelte-icon by Pictogrammers.

Usage

1. Install:

   npm install @apan222/svelte-icon

2. Import:

   import SvgIcon from '@apan222/svelte-icon';

3. Use the component like any other svelte-component, i.e:

   <SvgIcon path="M19,6.41L17.59,5L7,15.59V9H5V19H15V17H8.41L19,6.41Z" flip="horizontal" />

Props

| Name | Default | Description | | --------- | ------------ | ------------------------------------------------------------------------------------------------------------------------------------------- | | path | Required | SVG-path to render. | | size | 24 | The side-length (square) of the icon. | | viewBox | '0 0 24 24' | The SVG viewport coordinates for the current SVG fragment. Same as html <svg/>. | | flip | 'none' | Flip the icon. Options: 'vertical', 'horizontal', 'both' and 'none'. | | rotate | '0deg' | Allows rotation of the icon. Any string containing valid CSS-angle is valid, i.e '90deg' and '0.25turn' results in the same rotation. |

Furthermore, any other attributes that can be used on an html <svg />-element can be used. Examples could be fill, stroke and aria-label. It is recommended for accessibility-reasons to include a aria-label or aria-labelledby so screenreaders can tell what the icon means.

Style

By default, the fill is set to currentColor. However, you can change it by explicitly adding a fill-attribute, or add a global class and style it through that. For examples:

<div style="color: white; background-color: #333">
	<h2>Colors</h2>
	<SvgIcon {path} />
	<SvgIcon {path} fill="red" />
	<SvgIcon {path} class="custom-class" />
</div>

<style>
	:global(.custom-class) {
		fill: pink;
	}
</style>

Result: