0.0.3 • Published 9 months ago
@apan222/svelte-icon v0.0.3
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
Install:
npm install @apan222/svelte-iconImport:
import SvgIcon from '@apan222/svelte-icon';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:
