Symbol
So fügen Sie Ihrer App die Icon
Komponente hinzu:
import {Icon} from '@stripe/ui-extension-sdk/ui';
Dies ist eine Vorschau einer Icon
-Komponente:
<Icon name="addCircle" />
Props
Prop | Type |
---|---|
aria-hidden |
|
size |
|
CSS
Symbole unterstützen diese CSS-Eigenschaften:
Eigenschaft | Typ | Beispiel |
fill | ‘success’ | |
Kontrastierende Farbe. Siehe Farbe für weitere Informationen. |
Wenn Sie keinen Wert für fill
angeben, erhält das Symbol seine Farbe von seinem übergeordneten Element.
Größe
Symbole verwenden die Eigenschaft size
zur Größenbestimmung. Sie können eine von fünf Größen haben:
xsmall
:12px
small
:16px
medium
:20px
(Standard)large
:32px
xlarge
:64px
<Icon name="konbini" size="xsmall" /> <Icon name="konbini" size="small" /> <Icon name="konbini" size="medium" /> <Icon name="konbini" size="large" /> <Icon name="konbini" size="xlarge" />
Farbe und Füllung
Sie können für die Icon
-Komponente mit der fill
-Eigenschafte der css
-Eigenschaft eine Farbe festlegen.
<Icon name="cancelCircle" css={{fill: 'critical'}} />
Standardverhalten für Farben
Standardmäßig haben Symbole die gleiche Farbe wie der Text, der sie umgibt.
<Inline css={{color: 'attention'}}> <Icon name="mobile" /> new messages </Inline>
Barrierefreiheit
<Icon icon={add} aria-hidden={false} aria-label="Add another item" />
Standardmäßig gibt es für Symbole das Attribut aria-hidden
(erfahren Sie mehr über ARIA). In den seltenen Fällen, in denen das Symbol über einen semantischen Wert für Nutzer/innen der Sprachausgabe verfügt, können Sie manuell aria-hidden={false}
festlegen. In diesen Fällen ist es häufig eine gute Idee, auch ein aria-label
hinzuzufügen. Im Allgemeinen ist es besser, Textbeschriftungen zu verwenden, statt ausschließlich visuelle Symbole für einen Workflow als wichtig festzulegen.
Symbole in Schaltflächen- und Badge-Komponenten
Sie können eine Icon
-Komponente innerhalb einer Button
- oder Badge
-Komponente platzieren.
<Button> <Icon name="mobile" size="xsmall" /> <Inline>New messages</Inline> </Button> <Badge type="positive"> <Icon name="mobile" size="xsmall" /> New messages </Badge>