この文章は Salesforce 機械翻訳システムを使用して翻訳されました。詳細はこちらをご参照ください。

lightning:icon

コンテキストを示し、使いやすさを向上させるビジュアル要素を表します。

lightning:icon は、コンテキストを示し、使いやすさを向上させるビジュアル要素です。アイコンは、別のコンポーネントのボディの内部で使用するか単独で使用できます。

使用できるアイコンについては、https://lightningdesignsystem.com/icons を参照してください。

次に例を示します。

1<aura:component>
2    <lightning:icon iconName="action:approval" size="large" alternativeText="Indicates approval"/>
3</aura:component>

スタイルをカスタマイズするには、variant、size、または class 属性を使用します。variant 属性は、ユーティリティアイコンの外観を変更します。たとえば、error バリエーションは、エラーユーティリティアイコンを赤で塗りつぶします。

1<lightning:icon iconName="utility:error" variant="error"/>

アイコンの色やスタイルをさらに変更するには、class 属性を使用します。

アクセシビリティ

アイコンを説明するには、alternativeText 属性を使用します。説明では、アイコンの外観 (「ペーパークリップ」) ではなく、ボタンをクリックしたときに何が起こるか (「ファイルのアップロード」など) を示す必要があります。

場合によっては、アイコンは装飾的で説明が不要なこともあります。ただし、画面サイズに基づいて装飾的なアイコンと情報的なアイコンを切り替えることができます。alternativeText の説明を含めない場合、小さな画面やウィンドウで、アイコンがすべての形式で装飾的であることを確認します。

属性

属性名	属性型	説明	必須項目
`alternativeText`	String	アイコンを説明するために使用する代替テキスト。このテキストでは、アイコンの外観 (「ペーパークリップ」) ではなく、ボタンをクリックしたときに何が起こるか (「ファイルのアップロード」など) を説明する必要があります。
`body`	Component[]	コンポーネントのボディ。マークアップでは、これはタグのボディに含まれるすべてを指します。
`class`	String	コンポーネントの基本クラスに加え、外部要素の CSS クラス。
`iconName`	String	アイコンの Lightning Design System 名。名前は、形式「\utility:down\」で記述します。「utility」はカテゴリ、「down」は表示する特定のアイコンです。	はい
`size`	String	アイコンのサイズ。オプションは、xx-small、x-small、medium、large です。この値のデフォルトは medium です。
`title`	String	マウスが要素に重ねられたときにツールチップテキストを表示します。
`variant`	String	バリエーションによって、ユーティリティアイコンの外観が変化します。使用できるバリエーションは、bare、warning、error です。