SIcon <s-icon>

Zeigt ein Icon aus dem Polaris-Icon-Set anhand seines Namens an. SIcon ist ein typisierter Vue-3-Wrapper für die Shopify Polaris Web Component <s-icon>.

import { SIcon } from 'polaris-vue-elements'

Best Practices

• Icons informieren, nicht dekorieren. Ein Icon sollte erklären, was eine Aktion tut, oder einen Zustand zeigen, etwa ein Löschen-Icon an einer Löschaktion oder ein Häkchen für etwas Erledigtes. Fügen Sie Icons nicht nur der Optik wegen hinzu.
• Einheitlich bleiben. Steht ein Icon einmal für eine Aktion oder ein Konzept, sollte das in der gesamten App so bleiben. Bedeutet edit an einer Stelle Bearbeiten, verwenden Sie es überall zum Bearbeiten.
• Icons möglichst mit Text kombinieren. Für sich allein können selbst vertraute Icons unterschiedlich verstanden werden. Verwenden Sie ein Icon nur dort allein, wo der Platz knapp ist, etwa bei einem Icon-Button mit accessibilityLabel.
• Allgemein bekannte Icons wählen. Bevorzugen Sie Icons mit etablierter Bedeutung wie search, delete und plus. Muss ein Icon erklärt werden, wählen Sie ein anderes.
• tone Bedeutung tragen lassen. Verwenden Sie tone="critical" für destruktive Aktionen, tone="success" für positive Zustände und tone="warning" für Vorsicht. Tones sollen etwas mitteilen, nicht dekorieren.

<SIcon type="alert-triangle" tone="warning" />

Die vollständigen Richtlinien finden sich in Shopifys Best Practices für <s-icon> (auf Englisch).

Beispiel

<script setup>
import { SIcon } from 'polaris-vue-elements'
</script>

<template>
  <!-- `type` accepts a large named-icon union; a few examples below. See
       src/lib/generated/types.ts for the full list. -->
  <SIcon type="star" />
  <SIcon type="cart" tone="info" />
  <SIcon type="check-circle" tone="success" />
  <SIcon type="alert-triangle" tone="warning" />
  <SIcon type="delete" tone="critical" />
  <SIcon type="settings" size="small" color="subdued" />
</template>

Props

Prop	Typ	Beschreibung
color	"subdued" | "base"	Die Stufe der Farbbetonung, die die visuelle Intensität steuert. - base: Primärfarbe für Fließtext, Standard-UI-Elemente und allgemeine Inhalte mit guter Lesbarkeit. - subdued: Zurückgenommene Farbe für sekundären Text, unterstützende Labels und weniger wichtige Oberflächenelemente.
interestFor	string	ID einer Komponente, die auf Interesse (z. B. Hover und Fokus) an dieser Komponente reagieren soll.
size	"base" | "small"	Die Größe des Icons. - small: Kleineres Icon, geeignet für die Inline-Verwendung im Text oder in kompakten UI-Elementen. - base: Standardgröße, die sich gut für eigenständige Icons und übliche Anwendungsfälle eignet.
tone	"auto" | "neutral" | "info" | "success" | "caution" | "warning" | "critical"	Die semantische Bedeutung und farbliche Gestaltung der Komponente. - info: Informative Inhalte oder hilfreiche Tipps. - success: Positive Ergebnisse oder erfolgreiche Zustände. - warning: Wichtige Warnungen vor möglichen Problemen. - critical: Dringende Probleme oder destruktive Aktionen. - auto: Wird automatisch anhand des Kontexts bestimmt. - neutral: Allgemeine Informationen ohne bestimmte Absicht. - caution: Hinweise, die Aufmerksamkeit erfordern.
type	"color" | "info" | "adjust" | "affiliate" | "airplane" | "alert-bubble" | "alert-circle" | "alert-diamond" … (553 more)	Das anzuzeigende Icon aus der Icon-Bibliothek. Setzen Sie einen gültigen Icon-Namen, um dieses Icon anzuzeigen. Um das Icon vollständig auszublenden, verwenden Sie einen leeren String ''. Um den Platz des Icons zu reservieren, ohne ein Icon anzuzeigen, verwenden Sie 'empty'.

Einige Typspalten oben wurden zur besseren Lesbarkeit gekürzt; die vollständigen Unions finden sich in den generierten TypeScript-Typen der Bibliothek (src/lib/generated/types.ts).