Ikoner — Malm UI

Hela biblioteket finns, med Carbons egna namn — <Icon name="ChevronDown" />.

Regler

Tre, och alla följer av att en ikon ärver textfärgen intill sig.

Alltid currentColor, aldrig en varumärkesfärg

<Icon name="Checkmark" />

Dekorativ om ordet redan står där

<Button icon="Add">Nytt ärende</Button>
<Button icon="TrashCan" iconOnly label="Ta bort" variant="ghost" />

Storlekar

Tre relativa som skalar med texten, två fasta.

0.75rem 0.875rem 1.125rem

<Icon name="Calendar" size="sm|md|lg|24|32" />

I bruk

Ikonerna komponenterna och den här sajten faktiskt renderar.

I skript

En rad som ritas i webbläsaren ska se ut som en rad som ritats av servern.

Ritas av skriptet vid klick.

---
import IconSprite from "@whitespace/malm-ui/astro/IconSprite.astro";
---
<IconSprite names={["Add", "TrashCan"]} />

<script>
  import { icon } from "@whitespace/malm-ui/js";
  button.prepend(icon("TrashCan"));
</script>

<Icon> löser ut ikonen när sidan byggs, vilket ett skript i webbläsaren inte kan. Sidan räknar upp de ikoner dess skript behöver, ochicon() ritar dem därifrån — paketet är 2753 ikoner och hör inte hemma i webbläsaren för två av dem.