Icon

Ein kleines handgezeichnetes Bild, das zu einem Wort passt. Es hilft beim Erkennen; das Wort erklärt es.

Auf dieser Seite

Playground

calendar

Symbol

Hintergrund

HTML

<span class="feitio-inline" data-gap="1" style="font-size: var(--feitio-font-size-h3)"><svg class="feitio-icon" aria-hidden="true"><use href="/feitio/icons/sprite.svg#feitio-calendar"></use></svg><span>calendar</span></span>

Wann verwenden

Neben einem Wort: in einer Schaltfläche, einem Navigationspunkt oder einem Status-Tag.
Selbstständig nur dann, wenn die Bedeutung universell ist (Suche, Schließen) und die Bedienungselemente für Screenreader einen Namen haben.

Wann nicht verwenden

Zur Dekoration eines Überschriftstextes oder eines Absatzes.
Zum Veranschaulichen einer leeren Oberfläche: verwenden Sie die Illustrationen (EmptyState).
Von einem anderen Satz: kein fertiges Symbol neben den gezeichneten.

Beispiele

Drei Größen

Klein (16px), die Größe des umgebenden Textes (keine Eigenschaft) und groß (32px). Immer in der Textfarbe.

Code anzeigen

HTML

<svg class="feitio-icon" data-size="small" aria-hidden="true"><use href="feitio/icons/sprite.svg#feitio-calendar"/></svg>
<svg class="feitio-icon" aria-hidden="true"><use href="feitio/icons/sprite.svg#feitio-calendar"/></svg>
<svg class="feitio-icon" data-size="large" aria-hidden="true"><use href="feitio/icons/sprite.svg#feitio-calendar"/></svg>

Jedes Symbol, mit Suche und seinem Code, befindet sich im Symbolkatalog.

Do and don't

Calendar

Symbol und Wort zusammen, in derselben Farbe.

Don’t

General settings

Ein oranges Symbol, das eine Überschrift ziert: es hilft nicht beim Erkennen und verschwendet das Orange.

Das Symbol ist immer aria-hidden="true": das Wort neben ihm oder die aria-label-Eigenschaft der Schaltfläche geben den Namen.
In React wird der Icon-Name von TypeScript überprüft.

Attribute

Attribut	Werte	Zum Zweck
`class="feitio-icon"`	erforderlich	Händisch gezeichnete Striche, in der Textfarbe.
`data-size`	none, `"small"`, `"large"`	Die Textgröße (keine Eigenschaft), 16px oder 32px.
`aria-hidden="true"`	immer	Das Icon geht daneben; das Wort gibt den Namen.
`use href`	`sprite.svg#feitio-<nome>`	Welches Icon.