carbon icons svelte

Carbon-Icons-Sumle

SVG -Symbole für das Kohlenstoff -Design -System als schlechte Komponenten.

Diese Bibliothek mit Zero -Abhängigkeits -Symbol baut Carbon -Design -System -Symbole als Svelte -Komponenten auf. Obwohl diese Ikonen am besten mit Kohlenstoffkomponenten gepaart werden, können sie eigenständig konsumiert werden.

Probieren Sie es in der Sufle Repl.

Vorschau · Symbolindex

Installation

 # npm
npm i carbon-icons-svelte

# pnpm
pnpm i carbon-icons-svelte

# Yarn
yarn add carbon-icons-svelte

# Bun
bun add carbon-icons-svelte

Verwendung

Basic

Importieren Sie das Symbol aus dem Ordner carbon-icons-svelte/lib . Eine Liste der unterstützten Symbole finden Sie im Symbolindex.

< script >
  import Add from " carbon-icons-svelte/lib/Add.svelte " ;
</ script >

< Add />

Benutzerdefinierte Größe

Verwenden Sie die Größe size , um die Symbolgröße anzugeben.

Die unterstützten Symbolgrößen umfassen 16 , 20 , 24 und 32 .

Die Standardgröße beträgt 16 .

< Add size ={ 16 } />
< Add size ={ 20 } />
< Add size ={ 24 } />
< Add size ={ 32 } />

Benutzerdefinierte Requisiten

$$restProps werden an das svg -Element weitergeleitet.

Sie können fill verwenden, um die Farbe anzupassen oder ein anderes gültiges svg -Attribut an die Komponente zu übergeben.

< Add fill = " red " class = " icon " />

Beschriftet

< Add aria-label = " Add " />

Beschriftete Symbol, das fokussierbar ist

< Add aria-label = " Add " tabindex = " 0 " />

Beschriftet von

< label id = " add-file " >Add file</ label >

< Add aria-labelledby = " add-file " />

API

Requisiten

Alle Requisiten sind optional.

Name	Typ	Standardwert
Größe	16 | 20 | 24 | 32	16
Titel	string	undefined

Changelog

Beitragen

Lizenz

Apache 2.0