アイコンサイズ調整
アイコンサイズは主に MuiIcon エディターで制御され、IconButton エディターの影響も受けます。
主要制御：MuiIcon エディター
アクセスパス
- VertiTab 設定ページを開く
- サイドバーの「カスタムテーマ」メニューをクリック
- 編集したいテーマを選択し、「編集」をクリック
- 「🧩 コンポーネントカスタマイズ」タブをクリック
- 「Icon」設定カードを見つけて展開をクリック
アイコン設定オプション
デフォルト属性設定
- デフォルトフォントサイズ：Inherit、Small、Medium、Large を選択
- デフォルトカラー：アイコンのデフォルト表示色を設定
スタイル上書き設定
- カスタムフォントサイズ：スライダーで 8-48px を精密調節
- 優先度：すべてのアイコンのデフォルトフォントサイズ設定を上書き
- リアルタイムプレビュー：スライダー調節時に即座に効果を表示
操作手順
- 適切なデフォルトフォントサイズレベルを選択
- 精密制御が必要な場合は、カスタムフォントサイズスライダーを使用
- プレビュー効果を観察して満足いくサイズに調整
影響要因：IconButton エディター
アクセスパス
- 「コンポーネントカスタマイズ」タブで
- 「IconButton」設定カードを見つけて展開をクリック
関連設定
デフォルト属性
- サイズ (Size)：Small、Medium、Large
- 影響範囲：アイコンボタンの全体サイズ、その中のアイコン表示効果に間接的に影響
スタイル上書き
- 内側パディング (Padding)：アイコンボタン内部スペースを調整
- 外側マージン (Margin)：ボタンと周囲要素との間隔を調整
- 間接影響：これらの設定はボタン内のアイコンの視覚効果に影響
2 つのエディターの関係
| エディター | 直接作用 | 間接影響 |
|---|---|---|
| MuiIcon | アイコン自体のサイズ制御 | すべてのインターフェースアイコン |
| IconButton | ボタンコンテナサイズ制御 | ボタン内アイコンの表示効果 |
調整戦略
グローバルアイコンサイズ調整
- MuiIcon エディターを優先使用
- 「カスタムフォントサイズ」で精密制御
- 推奨範囲：12-24px がほとんどのシナリオに適している
ボタンアイコン最適化
- IconButton 設定と連携調整
- 内側パディングを増やすとアイコンがより快適に見える
- ボタンサイズ調整でアイコンのクリック体験を改善
特殊シナリオ処理
- 小アイコン：8-12px、補助要素に適用
- 標準アイコン：16-20px、通常のインターフェース要素に適用
- 大アイコン：24-32px、重要な操作ボタンに適用
実際の効果
- メニューアイコン：設定メニュー、ナビゲーションなどの位置のアイコン
- 操作アイコン：閉じる、最小化、更新などの機能アイコン
- ステータスアイコン：読み込み、警告、成功などの状態指示アイコン
- 装飾アイコン：インターフェースの美化と視覚ガイドアイコン
使用推奨
- 一貫性を保つ：同類機能のアイコンは同じサイズを使用
- ユーザビリティを考慮：アイコンが十分大きく、クリックしやすいことを確保
- 異なる密度でテスト：高解像度画面での鮮明度を検証
- 美観と機能のバランス：美観性と実用性の両方を考慮
設定の保存
すべての調整はリアルタイムでプレビューされ、テーマエディターの「保存」ボタンをクリックして変更を保存します。