アイコン

概要

Avonni アイコンコンポーネントは、有意義なアイコンを通じてページの視覚的魅力とユーザー体験を向上させます。アイコンはコンテンツをより魅力的にし、ナビゲーションを直感的にする強力な視覚補助です。

設定

🎛️ プロパティ

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

🎨 スタイリング

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