Icône
Pour ajouter le composant Icon
à votre application :
import {Icon} from '@stripe/ui-extension-sdk/ui';
Voici un aperçu d’un composant Icon
:
<Icon name="addCircle" />
Props
Prop | Type |
---|---|
aria-hidden |
|
size |
|
CSS
Les icônes prennent en charge les propriétés CSS suivantes :
Propriété | Type | Exemple |
fill | ‘success’ | |
Couleur contrastée. Consultez la section Couleur pour en savoir plus. |
Si vous ne spécifiez pas de valeur fill
, l’icône hérite de la couleur de son parent.
Taille
Les dimensions des icônes sont déterminées par la propriété size
. Elles peuvent avoir l’une de ces 5 tailles :
xsmall
:12px
small
:16px
medium
:20px
(par défaut)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" />
Colorer et remplir
Vous pouvez attribuer une couleur au composant Icon
avec la propriété fill
de la propriété css
.
<Icon name="cancelCircle" css={{fill: 'critical'}} />
Comportement de la couleur par défaut
Par défaut, les icônes prennent la couleur du texte qui les entoure.
<Inline css={{color: 'attention'}}> <Icon name="mobile" /> new messages </Inline>
Accessibilité
<Icon icon={add} aria-hidden={false} aria-label="Add another item" />
Par défaut, les icônes possèdent un attribut aria-hidden
(en savoir plus sur ARIA). Dans les rares cas où l’icône pourrait donner des indications supplémentaires aux personnes qui utilisent un lecteur d’écran, vous pouvez configurer manuellement aria-hidden={false}
. Dans ce genre de cas, il est recommandé d’ajouter également un aria-label
. En règle générale, il convient d’utiliser des étiquettes de texte plutôt que des icônes uniquement visuelles lorsqu’elles contiennent des informations essentielles.
Icônes dans des composants Button ou Badge
Vous pouvez placer un composant Icon
dans un composant Button
ou Badge
.
<Button> <Icon name="mobile" size="xsmall" /> <Inline>New messages</Inline> </Button> <Badge type="positive"> <Icon name="mobile" size="xsmall" /> New messages </Badge>