Icon アイコン - Vant 4
🎨 Icon アイコン
🎯 概要
Icon コンポーネントはインターフェースの魔法使いのような存在です ✨。フォントベースのアイコンセットを提供し、アプリケーションを一瞬で生き生きと魅力的なものに変えます！Icon コンポーネントを直接使用するか、他のコンポーネントで icon 属性を通じて参照するかにかかわらず、インターフェースに活気を与えることができます。豊富なアイコンライブラリは宝箱のようで、デザインの創造性を無限に広げます！
📦 導入
以下の方法でグローバルにコンポーネントを登録します。詳細な登録方法については、コンポーネントの登録を参照してください。
import { createApp } from 'vue';
import { Icon } from 'vant';
const app = createApp();
app.use(Icon);🎯 コードの例
🔧 基本的な使い方
name 属性を使用して、必要なアイコンを指定します。まるで名前を呼ぶように簡単です！Vant には美しいアイコンライブラリが組み込まれています（右側の例を参照）。対応する名前を直接渡すだけで、必要なアイコンを呼び出すことができます。
🖼️ 画像 URL の使用
独自のアイコンを使用したいですか？問題ありません！name 属性に直接画像 URL を渡すことで、個性的なアイコンを目立たせることができます。
🔴 バッジの表示
ユーザーの注意を引きたいですか？dot 属性を設定すると、アイコンの右上隅に赤い点が表示され、メッセージ通知のように目立ちます。badge 属性を設定すると、アイコンの右上隅に対応するバッジ番号が表示され、重要な情報が一目でわかります！
🌈 アイコンの色
color 属性でアイコンの色を設定し、アイコンをカラフルに彩りましょう！有効な CSS カラー値をすべてサポートしています。
📏 アイコンのサイズ
size 属性でアイコンのサイズを設定し、任意の CSS 単位を指定できます。ミニサイズから巨大サイズまで、思いのままに！
🎨 カスタムアイコン
既存の Icon にさらに多くのアイコンを使用する必要がある場合は、サードパーティの iconfont に対応するフォントファイルと CSS ファイルを導入することができます。その後、Icon コンポーネントで直接使用できます。これはアイコンライブラリに新しいメンバーを追加するのと同じくらい簡単です！
/* サードパーティまたはカスタムのフォントアイコンスタイルを導入 */
@font-face {
font-family: 'my-icon';
src: url('./my-icon.ttf') format('truetype');
}
.my-icon {
font-family: 'my-icon';
}
.my-icon-extra::before {
content: '\e626';
}API
Props
| パラメータ | 説明 | 型 | デフォルト値 |
|---|---|---|---|
| name | アイコン名または画像リンク | string | - |
| dot | アイコンの右上隅に赤い点を表示するかどうか | boolean | false |
| badge | アイコンの右上隅のバッジの内容 | number | string | - |
| badge-props | バッジの属性をカスタマイズする。渡されたオブジェクトは Badge コンポーネントの props に渡されます | BadgeProps | - |
| color | アイコンの色 | string | inherit |
| size | アイコンのサイズ（例：20px、2em）。デフォルトの単位は px | number | string | inherit |
| class-prefix | カスタムアイコンを使用するためのクラス接頭辞 | string | van-icon |
| tag | ルートノードに対応する HTML タグ名 | string | i |
イベント
| イベント名 | 説明 | コールバック引数 |
|---|---|---|
| click | アイコンをクリックしたときにトリガーされます | event: MouseEvent |
型定義
コンポーネントは以下の型定義をエクスポートします：
import type { IconProps } from 'vant';テーマカスタマイズ
スタイル変数
コンポーネントはカスタムスタイルに使用できる以下の CSS 変数を提供します。使用方法については、ConfigProvider コンポーネントを参照してください。
| 名前 | デフォルト値 | 説明 |
|---|---|---|
| --van-icon-font-family | 'van-icon' | - |
📚 関連ドキュメント
🎨 デザインとテーマ
- Badge バッジ - バッジコンポーネント。アイコンに通知情報を追加します
- ConfigProvider グローバル設定 - グローバル設定コンポーネント。テーマスタイルを統一的に管理します
📱 インタラクティブコンポーネント
- Button ボタン - ボタンコンポーネント。アイコンとよく組み合わせて使用されます
- NavBar ナビゲーションバー - ナビゲーションバーコンポーネント。アイコンはナビゲーションの重要な要素です
🖼️ メディアコンポーネント
- Image 画像 - 画像コンポーネント。アイコンと完璧な視覚的組み合わせを形成します
- ImagePreview 画像プレビュー - 画像プレビューコンポーネント
🛠️ 開発ガイド
- Advanced Usage 高度な使い方 - 高度な使い方ガイド
- Theme テーマカスタマイズ - テーマカスタマイズガイド