enwind - Docs

Icon

.icon

Designed for use with heroicons. The default size matches the "mini" icons (20px × 20px).

<span class="icon"><svg>...</svg></span>
<span class="icon text-primary"><svg>...</svg></span>

Size variants

Sizes match heroicons's sizes:

Default: "mini" (20px × 20px)
Large: "outline" / "solid" (24px × 24px)
Small: "micro" (16px × 16px)

Large

Default

Small

<span class="icon icon-lg"><svg>...</svg></span> Large
<span class="icon"><svg>...</svg></span> Default
<span class="icon icon-sm"><svg>...</svg></span> Small

<Icon /> component Svelte

<script>
	import { Icon } from '@enwindui/svelte';
	import home from 'heroicons/20/solid/home.svg?raw';
	import homeLg from 'heroicons/24/solid/home.svg?raw';
	import homeSm from 'heroicons/16/solid/home.svg?raw';
<script>

<Icon icon={home} />
<Icon icon={home} class="text-primary" />
<Icon icon={homeLg} size="lg" />
<Icon icon={homeSm} size="sm" />