04
圖示規範
圓角方形圖塊配方;48x48 外框、12px 圓角、帶色調的背景。
圖示圖塊配方
| Tile size | 48x48 |
| Tile radius | 12px |
| Inline icon | 12px to 16px |
| Toolbar / nav icon | 20px |
| Card icon | 24px to 28px inside a 48x48 tile |
| Stroke | 2 round/round |
| ViewBox | 24 24 |
色調
cyan
rgba(0, 139, 139, 0.3)
bg:icon-tint:cyan
green
rgba(34, 197, 94, 0.3)
bg:icon-tint:green
purple
rgba(124, 77, 255, 0.3)
bg:icon-tint:purple
orange
rgba(251, 146, 60, 0.3)
bg:icon-tint:orange
blue
rgba(59, 130, 246, 0.3)
bg:icon-tint:blue
red
rgba(239, 68, 68, 0.3)
bg:icon-tint:red
儀表板圖示
BetterGuard 儀表板導覽中使用的標準產品圖示集。Heroicons v2 outline 尺寸為 24x24,stroke 2 round/round,以內嵌方式提供(無圖示庫,無 sprite)。每當儀表板新增圖示時,請在此處同步。
混淆
保護
歷史
保護
設定
保護
測試者論壇
保護
藍圖
保護
工單
支援
說明
支援
代理
系統
狀態
系統
Admin
系統
Stroke: #9ca3af inactive (shown above) · #22d3ee active. Both inherited via stroke="currentColor" from the surrounding .nav-item color.
Admin 盾牌是自訂路徑,並非標準的 Heroicons。請勿將其替換為標準的 Heroicons 盾牌。
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/> </svg>
範例:Obfuscate (lock-closed)。將此標記直接複製到 Blade 範本中;stroke="currentColor" 會繼承周圍文字的顏色。
建議尺寸
行內圖示:12-16px。工具列/導覽:20px。48x48 圖塊內的卡片圖示:24-28px。標誌頁首:32-40px。Apple touch icon:180px。