Pour ajouter le composant Icon à votre application :
import { Icon } from '@stripe/ui-extension-sdk/ui' ;
Voici un aperçu d’un composant Icon :
Chargement de l'exemple...
< Icon name = " addCircle " />
Propriétés des icônes Propriété Type name
Obligatoire "accept" | "add" | "addCircle" | "addCircleFilled" | "api" | "apps" | "arrowDown" | "arrowDownCircle" | "arrowExport" | "arrowExportCircle" | "arrowIncrease" | "arrowLeft" | "arrowLeftCircle" | "arrowRight" | "arrowRightCircle" | "arrowsInward" | "arrowsLoop" | "arrowsOutward" | "arrowUp" | "arrowUpCircle" | "arrowUpDown" | "arrowUpRight" | "arrowUpRightCircle" | "balance" | "bank" | "bankLightning" | "barChart" | "barGraph" | "beta" | "billing" | "billingQuote" | "block" | "business" | "calculator" | "calendar" | "call" | "camera" | "cancel" | "cancelCircle" | "cancelCircleFilled" | "card" | "caretDown" | "caretLeft" | "caretRight" | "caretUp" | "cart" | "certificate" | "change" | "changeCircle" | "charge" | "chat" | "check" | "checkCircle" | "checkCircleFilled" | "checkmark" | "chevronDown" | "chevronDownCircle" | "chevronLeft" | "chevronLeftCircle" | "chevronRight" | "chevronRightCircle" | "chevronUp" | "chevronUpCircle" | "circle" | "clipboard" | "clipboardCheck" | "clock" | "cloud" | "code" | "collapse" | "compliance" | "connectPayments" | "convert" | "coupon" | "createCards" | "createIdentityVerification" | "cross" | "crypto" | "customer" | "customerPortal" | "customers" | "customizeBrand" | "data" | "dataExport" | "delete" | "deploy" | "desktop" | "dispute" | "disputeProtection" | "doc" | "document" | "download" | "dragHandle" | "earlyFraudWarning" | "edit" | "editCircle" | "email" | "expand" | "explorer" | "export" | "exportCircle" | "external" | "externalTest" | "eyeClosed" | "eyeOpen" | "fee" | "filter" | "financialActivity" | "fingerprint" | "flag" | "folder" | "gavel" | "gift" | "globe" | "gridView" | "growth" | "guide" | "heart" | "heartFilled" | "help" | "hide" | "history" | "home" | "identityVerification" | "import" | "info" | "insight" | "invite" | "invoice" | "iosShare" | "lab" | "lightBulb" | "lightningBolt" | "link" | "list" | "listView" | "locationPin" | "lock" | "menu" | "miniPlayer" | "mobileWallet" | "moneyMovement" | "more" | "moreCircle" | "moved" | "navClock" | "negative" | "negativeCircle" | "negativeCircleFilled" | "new" | "next" | "note" | "notifications" | "office" | "openLock" | "order" | "orgChart" | "overflow" | "pane" | "panelArrowLeft" | "panelArrowRight" | "paperclip" | "passkey" | "pause" | "payByBank" | "payment" | "paymentLink" | "payout" | "person" | "personWithKey" | "phone" | "pieChart" | "pin" | "pinAdd" | "pinFilled" | "ping" | "pinOutline" | "plan" | "platform" | "play" | "playCircle" | "positive" | "previous" | "product" | "productSubscription" | "qrCode" | "recurring" | "recurringInvoice" | "refresh" | "refreshCircle" | "refund" | "refundCircle" | "reporting" | "reserve" | "review" | "risk" | "rocket" | "rule" | "safe" | "sandbox" | "search" | "send" | "settings" | "share" | "shield" | "shieldCheck" | "shoppingBag" | "show" | "signed" | "signOut" | "soundOff" | "soundOn" | "source" | "sparkle" | "spinner" | "star" | "starFilled" | "subscription" | "support" | "tag" | "tasks" | "terminal" | "thumbsDown" | "thumbsUp" | "topup" | "transfer" | "trash" | "trial" | "truck" | "upload" | "usage" | "vault" | "video" | "wallet" | "warning" | "warningCircle" | "webhook" | "website" | "wifi" | "withdrawal"
css
Facultatif CSS | undefined
Types associés : CSS
size
Facultatif ("xsmall" | "small" | "medium" | "large" | "xlarge") | undefined
CSS Propriété Type fill
Facultatif token de couleur de texte et d’icônes
Couleur contrastante. Pour en savoir plus, consultez la section Couleur
Si vous ne spécifiez pas de valeur de remplissage, l’Icon 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 : 12pxsmall : 16pxmedium : 20px (par défaut)large : 32pxxlarge : 64pxChargement de l'exemple...
< Icon name = " business " size = " xsmall " />
< Icon name = " business " size = " small " />
< Icon name = " business " size = " medium " />
< Icon name = " business " size = " large " />
< Icon name = " business " size = " xlarge " />
Colorer et remplir Vous pouvez attribuer une couleur au composant Icon avec la propriété fill de la propriété css.
Chargement de l'exemple...
< 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.
Chargement de l'exemple...
< Inline css = { { color : 'attention' } } >
< Icon name = " chat " /> new messages
</ Inline >
Accessibilité Par défaut, les icônes contiennent un attribut aria-hidden (en savoir plus sur ARIA aria-hidden={false}. Dans ces situations, il est souvent utile d’ajouter également un libellé aria-label. En règle générale, il est préférable d’utiliser des libellés textuels plutôt que des icônes visuelles pour les éléments importants d’un workflow.
Chargement de l'exemple...
< Icon name = " addCircle " aria-hidden = { false } aria-label = " Add another item " />
Vous pouvez placer un composant Icon dans un composant Button ou Badge.
Chargement de l'exemple...
< Button >
< Icon name = " chat " size = " xsmall " />
< Inline > New messages </ Inline >
</ Button >
< Badge type = " positive " >
< Icon name = " chat " size = " xsmall " />
New messages
</ Badge >
Référence d’icône Chargement de l'exemple...