MiragEdge 统一图标系统

锐界幻境文档站已集成 Lucide 图标库（1000+ 开源图标），并通过 MapIcon 组件提供语义化调用方式。

快速使用

方式一：MapIcon 组件（推荐）

MapIcon 封装了语义名称到 Lucide 图标的映射，无需知道具体图标名：

vue

<MapIcon name="home" />
<MapIcon name="gamepad" :size="28" color="#E05252" />
<MapIcon name="server" class="my-icon" />

支持的属性：

属性	类型	默认	说明
`name`	string	必填	语义化图标名称（见下方映射表）
`:size`	number	20	图标尺寸（像素）
`color`	string	currentColor	图标颜色
`stroke-width`	number	2	线条粗细

方式二：直接使用 Lucide（灵活）

需要 Lucide 没有预映射的图标时，可直接导入：

vue

<script setup>
import { Home, User, Settings } from 'lucide-vue-next'
</script>

<Home :size="24" color="blue" />
<User :size="28" class="my-icon" />
<Settings @click="handleClick" />

语义名称映射表

📁 导航 & 通用

语义名称	图标	预览
`home`	Home
`menu`	Menu	—
`search`	Search
`link` / `external`	Link / ExternalLink
`arrow-right` / `chevron-right`	ArrowRight / ChevronRight
`check`	Check	—
`close`	X	—
`settings`	Settings
`heart`	Heart
`star`	Star	—
`user` / `users`	User / Users

🗄️ 服务器 & 硬件

语义名称	图标	预览
`server`	Server
`database`	Database
`network`	Network	—
`shield` / `lock`	Shield / Lock
`terminal`	Terminal
`cloud`	Cloud	—
`cpu`	Cpu	—

游戏 & Minecraft

语义名称	图标	预览
`gamepad`	Gamepad2
`sword`	Sword
`shield`	Shield
`pickaxe`	Pickaxe	—
`map`	Map
`compass`	Compass
`castle`	Castle
`trophy`	Trophy
`diamond`	Gem
`sparkles` / `enchant`	Sparkles

玩法特色

语义名称	图标	预览
`adventure` / `combat`	Swords
`farming`	Sprout
`fishing`	Fish
`cooking`	ChefHat
`economy`	Coins
`building`	Building2	—
`boss`	Skull
`pet`	Dog

社区 & 社交

语义名称	图标	预览
`chat`	MessageCircle
`group`	Users
`github`	Github
`bilibili`	Play

📄 文档 & 开发

语义名称	图标	预览
`book` / `book-open`	Book / BookOpen
`file` / `file-text`	File / FileText
`folder` / `folder-open`	Folder / FolderOpen
`code`	Code
`plugin`	Puzzle
`tool`	Wrench
`package`	Package	—
`api`	Plug	—

🦊 锐界幻境特色

语义名称	图标	预览
`miragedge`	Globe
`edge`	Mountain
`dream`	Moon
`star`	Star	—
`fox`	Cat
`soul`	Heart

在首页 Feature 卡片中使用

index.md 的 feature 卡片 emoji 字段支持直接填写 <MapIcon name="xxx" />：

yaml

features:
  - icon: <MapIcon name="gamepad" :size="28" />
    title: 创新玩法
    details: ...

如果你的页面中有自定义 HTML 区域，也可以直接写：

html

<MapIcon name="sword" :size="32" color="#E05252" />
<span>PVP 竞技场</span>

添加新图标映射

如果需要添加新的语义名称映射，编辑 .vitepress/theme/components/vue/MapIcon.vue 中的 iconMap 对象：

javascript

const iconMap = {
  // 添加你的映射
  '新名称': 'LucideIconName',  // LucideIconName 需从 lucide-vue-next 中导出
}

所有 Lucide 可用图标请参考 Lucide 图标库官网。

命名规范

语义名称使用 全小写英文 + 连字符（kebab-case）
按功能/场景归类，例如游戏类以 game- 开头、文档类以 doc- 开头
名称应直观表达含义，无需查阅文档即可理解

最佳实践

优先使用 MapIcon — 语义化名称更清晰，且未来切换图标库只需改映射
统一尺寸 — 内文图标用 20px，标题图标用 24-28px，导航图标用 18-20px
颜色继承 — 不传 color 时自动继承文字颜色，深色/浅色模式自动适配
标题属性 — 图标承载重要信息时添加 :title="说明文字" 提升可访问性
性能注意 — MapIcon 使用 Vue 动态组件按需加载，不会打包未使用的图标

MiragEdge 统一图标系统 ​

快速使用 ​

方式一：MapIcon 组件（推荐） ​

方式二：直接使用 Lucide（灵活） ​

语义名称映射表 ​

在首页 Feature 卡片中使用 ​

添加新图标映射 ​

命名规范 ​

最佳实践 ​

本页面贡献者