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:
Beispiel wird geladen ...
< Icon name = " addCircle " />
Symbol-Eigenschaften Eigenschaft Typ name
Pflichtfeld "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
Optional CSS | undefined
Verwandte Typen: CSS
size
Optional ("xsmall" | "small" | "medium" | "large" | "xlarge") | undefined
CSS Eigenschaft Typ fill
Optional Token für Text- und Symbolfarbe
Kontrastierende Farbe. Siehe Farbe
Wenn Sie keinen Füllwert angeben, erhält das Icon 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: 12pxsmall: 16pxmedium: 20px (Standard)large: 32pxxlarge: 64pxBeispiel wird geladen ...
< 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 " />
Farbe und Füllung Sie können für die Icon-Komponente mit der fill-Eigenschafte der css-Eigenschaft eine Farbe festlegen.
Beispiel wird geladen ...
< Icon name = " cancelCircle " css = { { fill : 'critical' } } />
Standardverhalten für Farben Standardmäßig haben Symbole die gleiche Farbe wie der Text, der sie umgibt.
Beispiel wird geladen ...
< Inline css = { { color : 'attention' } } >
< Icon name = " chat " /> new messages
</ Inline >
Barrierefreiheit Standardmäßig gibt es für Symbole das Attribut aria-hidden (Mehr über ARIA aria-hidden={false} festlegen. In diesen Situationen ist es oft eine gute Idee, auch ein aria-label hinzuzufügen. Im Allgemeinen ist es besser, Textbeschriftungen zu verwenden, anstatt rein visuelle Symbole für einen Workflow wichtig zu machen.
Beispiel wird geladen ...
< Icon name = " addCircle " aria-hidden = { false } aria-label = " Add another item " />
Sie können eine Icon-Komponente innerhalb einer Button- oder Badge-Komponente platzieren.
Beispiel wird geladen ...
< Button >
< Icon name = " chat " size = " xsmall " />
< Inline > New messages </ Inline >
</ Button >
< Badge type = " positive " >
< Icon name = " chat " size = " xsmall " />
New messages
</ Badge >
Symbol-Referenz Beispiel wird geladen ...
