Alexaアイコンパッケージ
Note: Sign in to the developer console to build or publish your skill.
Alexaアイコンパッケージ
Alexaアイコンパッケージ(alexa-icon
)は、Alexa Vector Graphics(AVG)形式で定義されたアイコンのセットを提供します。これらのアイコンは、Alexa Presentation Language(APL)ドキュメントで、AlexaButton
およびAlexaIcon
レスポンシブ対応コンポーネントに設定することができます。
alexa-iconパッケージをインポートする
パッケージを使用するには、ドキュメントのimport
配列にalexa-icon
パッケージを追加します。alexa-icon
パッケージの最新バージョンは1.0.0です。
ドキュメントのimport
セクションの例を以下に示します。
{
"import": [
{
"name": "alexa-icon",
"version": "1.0.0"
}
]
}
AlexaButtonコンポーネントでアイコンを使用する
AlexaButton
レスポンシブ対応コンポーネントでは、アイコンパッケージからアイコンを表示することができます。そのためには、AlexaButton
のbuttonIconName
パラメーターにライブラリ内のアイコンの名前を設定します。
次の例では、アイコンを含んだ複数のボタンを表示します。タイトルの付いたボタンと付いていないボタンがあります。
パッケージからアイコンを表示する
APLドキュメントでアイコンを表示するには
- ドキュメントの
import
配列にalexa-icon
パッケージを追加します。 mainTemplate
またはレイアウトにAlexaIcon
コンポーネントを追加します。AlexaIcon
コンポーネントのiconName
プロパティに、表示するアイコンの名前を設定します。
次の例では、ライブラリから4つの異なるアイコンを表示します。
注: アイコンの色はデフォルトで黒になります。黒いグラフィックは、デフォルトの暗い背景では画面に溶け込んで見えにくくなります。この例のように
iconColor
プロパティを設定して暗い背景とのコントラストを高めるか、light
テーマを使用して、明るい背景に黒いアイコンを表示してください。AlexaIcon
レスポンシブ対応コンポーネントのプロパティの詳細については、AlexaIcon
を参照してください。ライブラリで利用できるすべてのアイコンのリファレンスについては、Alexaアイコンライブラリリファレンスを参照してください。
関連トピック
このページは役に立ちましたか?
最終更新日: 2025 年 09 月 30 日