20 KiB
20 KiB
| 1 | No | Category | Icon Name | Keywords | Library | Import Code | Usage | Best For | Style |
|---|---|---|---|---|---|---|---|---|---|
| 2 | 101 | Style Config | bold-typography-icon-system | bold typography, editorial, mono label, phosphor, weight regular, minimal, icon+label required, size 20–32 | Phosphor (react-native) | import { ArrowRight } from 'phosphor-react-native' | <ArrowRight size={20} weight="regular" color={colors.accent} /> | Bold Typography Mobile style: weight="regular". Size 20px for UI controls, 32px for feature anchors. Icons MUST be paired with a Mono-stack text label (JetBrains Mono). Standalone icons only allowed for standard navigation (e.g., Back arrow). Accent color #FF3D00 only. | Outline |
| 3 | 102 | Style Config | cyberpunk-icon-system | cyberpunk, neon, glow, hud, phosphor, weight regular, accent glow, dark, angular, react native | Phosphor (react-native) | import { Lightning } from 'phosphor-react-native' | <Lightning size={24} weight="regular" color={colors.accent} /> | Cyberpunk Mobile HUD style: weight="regular", color={colors.accent} (#00FF88 Matrix Green). Wrap every icon in a View with shadowColor: colors.accent / shadowOpacity: 0.6 / shadowRadius: 8 to simulate neon glow. Use borderRadius: 0 on wrapper. Avoid rounded icon containers. Always pair icon with data label in JetBrains Mono. | Outline |
| 4 | 103 | Style Config | academia-icon-system | academia, library, brass, ornate, phosphor, weight thin, muted warm, scholarly, mobile | Phosphor (react-native) | import { BookOpen } from 'phosphor-react-native' | <BookOpen size={22} weight="thin" color={colors.brass} /> | Academia (Scholarly Mobile) style: weight="thin" (thin engraved feel), color={colors.brass} (#C9A962). No sharp geometric or tech-inspired icons. Prefer book, scroll, key, quill-type icon metaphors. Wrap in circular View with 1px brass border. Avoid neon or saturated colored icons. All icon-only navigation must have an accessibilityLabel. | Outline |
| 5 | 104 | Style Config | web3-bitcoin-icon-system | web3, bitcoin, defi, crypto, neon orange, holographic, blurview, phosphor, glow, fintech mobile | Phosphor (react-native) | import { TrendUp } from 'phosphor-react-native' | <TrendUp size={24} weight="regular" color={colors.bitcoinOrange} /> | Bitcoin DeFi Mobile style: weight="regular", color={colors.bitcoinOrange} (#F7931A). Wrap icons in circular BlurView (intensity: 20) with 1px borderColor: '#F7931A' border (Holographic Node effect). shadowColor: '#F7931A' / shadowOpacity: 0.4 / shadowRadius: 8. Prefer finance/data icons (TrendUp, Wallet, Shield, Layers). All data icons use JetBrains Mono label. | Outline |
| 6 | 105 | Guideline | icon-fallback-rules | icon fallback, phosphor, heroicons, any icon, extended set | Phosphor (primary) + Heroicons (fallback) | Primary: import { IconName } from '@phosphor-icons/react'. Fallback: import { IconName } from '@heroicons/react/24/outline' or '@heroicons/react/24/solid'. | 当默认列表中没有合适图标时：优先继续从 Phosphor 中选择任何语义更贴切的图标（不必局限于本表列出的图标）。若 Phosphor 也无合适图标，可以改用 Heroicons，并在 UI 代码中保持风格统一（线性或填充、圆角程度、笔画粗细等）。 | Icon library strategy and fallback rules | Outline |