アイコン

現在、以下のアイコンライブラリを直接サポートしています：Material Design Icons (MDI)、Remix Icon、Lucide Icons。

使用例

コード：

<Icon icon="material-two-tone-storefront"/>

テキスト内でのアイコンの使用

テキスト内にアイコンが挿入されています。

テキスト内に <Icon icon="material-two-tone-storefront"/> アイコンが挿入されています。

アイコンの色を設定する

使用例

コード：

<Icon icon="material-two-tone-storefront" color="blue"/>

アイコンのサイズを設定する

使用例

コード：

<Icon icon="material-two-tone-storefront" size={25}/>

コンポーネント内でのアイコンの使用

折りたたみブロック、折りたたみグループ、カード、カードグループ、ステップ、お知らせ、ハイライトなどのコンポーネントは、アイコンの使用をサポートしています。ほとんどのコンポーネントは、パラメータ "icon="material-two-tone-storefront" を追加することでこれを実現しています。

使用例

アイコン付きカード

これはカードの内容です。

コード：

<Card title="アイコン付きカード" icon="material-two-tone-storefront" > 
これはカードの内容です。
</Card>

パラメータの説明

Icon

icon

string

必須

アイコン名は [iconSetName]-[IconSetVariant]-[IconName] - url の形式に従う必要があります。URL は http:// または https:// で始まる必要があります。

color

string

可選

URL 以外のアイコンがサポートされています。次のプリセットカラーはテーマに合わせて変化します：ピンク、ブルー、パープル、シアン、グリーン、マゼンタ、レッド、オレンジ、イエロー、ボルケーノ、ギークブルー、ライム、ゴールド、プライマリー。

size

number

可選

アイコンサイズ

使用例#

テキスト内でのアイコンの使用#

アイコンの色を設定する#

アイコンのサイズを設定する#

コンポーネント内でのアイコンの使用#

パラメータの説明#

使用例

テキスト内でのアイコンの使用

アイコンの色を設定する

アイコンのサイズを設定する

コンポーネント内でのアイコンの使用

パラメータの説明