# AX - アイコン

## 概要

**AX - アイコン** Experience Cloud コンポーネントで、Experience サイトのページ上に Salesforce Lightning Design System アイコンライブラリからアイコンを表示します。

ポータル全体でアクション、ステータス、カテゴリ、ナビゲーション要素の視覚的指標を追加するために使用します。Experience Builder でアイコン、サイズ、色、スタイリングを構成してポータルのデザインに合わせます。

ステータスインジケーター、アクションボタン、セクションヘッダー、ナビゲーション要素、またはポータルの可読性や認識性を向上させるために視覚的シンボルが必要なあらゆる場所に最適です。

## 設定

{% tabs %}
{% tab title="🎛️ プロパティ" %}

| 名前           | 説明                                | 使用法                                                        |
| ------------ | --------------------------------- | ---------------------------------------------------------- |
| **アイコン名**    | 表示するアイコンの名前を選択してください。             | 関連するコンテンツやアクションを明確に表し、補完するアイコンを選んでください。                    |
| **アイコンサイズ**  | アイコンのサイズを設定します。                   | アイコンがはっきり見え、ページレイアウトと調和するサイズを選んでください。                      |
| **バリアント**    | アイコンの事前定義されたスタイリングバリアントを選択してください。 | アイコンの文脈的意味やアクションに合ったバリアントを選び、視覚的な伝達力を高めてください。              |
| **タイトル**     | アイコンのタイトルを定義してください。               | アイコンにマウスオーバーしたときにユーザーに追加のコンテキストや情報を提供するタイトルを入力してください。      |
| **代替テキスト**   | アイコンの代替テキストを提供してください。             | アイコンの意味やアクションを伝える説明的なテキストを入力し、アクセシビリティを確保し SEO を向上させてください。 |
| **水平方向の配置**  | コンテナ内でのアイコンの水平方向の配置を決定します。        | コンテンツレイアウト内でアイコンが最適な位置に配置され、視覚的なバランスと流れが保たれるように揃えてください。    |
| {% endtab %} |                                   |                                                            |

{% tab title="🎨 スタイリング" %}

| **背景色**        | アイコンの背景色を設定します。                   | アイコンが際立ち、ページデザイン内で視覚的に区別される背景色を選んでください。                                   |
| -------------- | --------------------------------- | ------------------------------------------------------------------------- |
| **前景色**        | アイコン自体の色を設定します。                   | 背景に対してアイコンが明確に見え、全体のデザインと調和する色を選んでください。                                   |
| **前景色ユーティリティ** | アイコンの前景色を変更するためにユーティリティクラスを適用します。 | CSS ユーティリティクラスを利用して、アイコンに事前定義されたカラースタイルを簡単に適用し、デザインの一貫性とカスタマイズの容易さを確保します。 |
| **角丸（ボーダー半径）** | アイコンの境界の角丸を定義します。                 | 角丸を調整して角が丸いアイコンを作成し、アイコンのスタイリッシュな表現を向上させます。                               |
| {% endtab %}   |                                   |                                                                           |
| {% endtabs %}  |                                   |                                                                           |