Components

Icon

Draws icons from SVG path data, or sizes and colours any icon you bring. No icon set is bundled, so you ship only the icons you use.

Usage

path takes SVG path data on a 24-unit square, the format path-based icon sets export. The icon is filled with the current colour.

Account.svelte

<script>
  import { Icon } from 'sveltier';
  // Path-based sets export path strings, for example Material Design Icons.
  import { mdiBank } from '@mdi/js';
</script>

<Icon path={mdiBank} />
<Icon path={mdiBank} size="lg" color="primary" />

Your own icons

Put any other icon inside: an <svg> or a component from an icon library. It is sized and coloured the same way.

Account.svelte

<script>
  import { Icon } from 'sveltier';
  import BankIcon from './BankIcon.svelte';
</script>

<!-- Any SVG or icon component, sized and coloured like a path icon. -->
<Icon><BankIcon /></Icon>

Size and colour

Without size, an icon is φ^½ the size of the text around it, the proportion used in buttons, and takes its colour. size and color set them from the shared scale and the theme.

xs sm md lg xl

primary success warning error info

Transfer savings: the icon follows the size and colour of this text.

Paid with the card ending 4471.

Accessibility

An icon is decorative and hidden from assistive technology unless it has a label. Label an icon that means something on its own, such as a status; leave it unlabelled next to text that says the same thing. An icon inside a button is named by the button.

Status.svelte

<!-- Decorative: next to text that says the same thing. -->
<Icon path={mdiCheck} /> Verified

<!-- Meaningful on its own: give it a name. -->
<Icon path={mdiCheck} label="Verified" color="success" />

API

Name	Type	Default	Description
`path`	`string`	`–`	SVG path data, filled with the current colour: the format of path-based icon sets such as Material Design Icons. Several shapes go in one string (`M… Z M… Z`).
`viewBox`	`string`	`'0 0 24 24'`	The coordinate box of `path`.
`size`	`'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'`	`–`	The text size the icon is drawn at, φ^½ larger. Without it, the icon follows the text around it.
`color`	`Color`	`–`	The icon's colour. Without it, the icon takes the colour of the text around it.
`label`	`string`	`–`	A name for an icon that means something on its own, for assistive technology. Without it, the icon is decorative and hidden from it.
`children`	`Snippet`	`–`	Any other icon (an `<svg>`, an icon component), sized and coloured like a path.
`class`	`ClassValue \| null`	`–`	Classes added after the component's own: a string, an array or an object.
`ref`	`HTMLSpanElement \| null`	`–`	The root element, bindable with `bind:ref`.