アイコン
互換性のある形式のアイコングラフィックを表示します。
Icon
コンポーネントをアプリに追加するには、以下のようにします。
import {Icon} from '@stripe/ui-extension-sdk/ui';
以下は Icon
コンポーネントのプレビューです。
<Icon name="addCircle" />
Props
Prop | Type |
---|---|
aria-hidden |
|
size |
|
CSS
アイコンは、以下の CSS プロパティをサポートします。
プロパティ | タイプ | 例 |
fill | ‘success’ | |
コントラストのある色。詳細については、色をご覧ください。 |
fill
値を指定しない場合、アイコンは親の色になります。
サイズ
アイコンではサイズ指定に size
プロパティを使用します。次の 5 つのサイズから選択できます。
xsmall
:12px
small
:16px
medium
:20px
(デフォルト)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" />
色と塗りつぶし
css
プロパティの fill
プロパティを使用し、Icon
コンポーネントに色を付けることができます。
<Icon name="cancelCircle" css={{fill: 'critical'}} />
デフォルトの色の動作
デフォルトでは、アイコンはその周りのテキストと同じ色です。
<Inline css={{color: 'attention'}}> <Icon name="mobile" /> new messages </Inline>
アクセシビリティー
<Icon icon={add} aria-hidden={false} aria-label="Add another item" />
アイコンには、デフォルトで aria-hidden
属性があります (ARIA の詳細をご覧ください)。稀なケースで、スクリーンリーダーのユーザーにとって意味のある値がアイコンに含まれる場合には、aria-hidden={false}
を手動で設定できます。このような状況では、aria-label
も追加することをお勧めします。一般的に、ワークフローにとって重要なアイコンの場合、ビジュアルのみのアイコンを作成するのではなく、テキストラベルを付けることをお勧めします。
ボタンおよびバッジコンポーネントのアイコン
Button
コンポーネントや Badge
コンポーネントの内側に、Icon
コンポーネントを配置できます。
<Button> <Icon name="mobile" size="xsmall" /> <Inline>New messages</Inline> </Button> <Badge type="positive"> <Icon name="mobile" size="xsmall" /> New messages </Badge>