ak-icon 图标
开发分支预览
本页图标优化从 1.0.0 正式版开始提供，包括 ak-icon--stroke 与新增的 --ak-icon-* 变量；继续兼容 ak-icon、ak-icon--stuff 和 --icon-border-color。
图标负责快速传达动作、状态和资源类别。ak-icon 统一 SVG 的尺寸、基线和颜色继承；线性图标加上 ak-icon--stroke，材料徽章使用 ak-icon--stuff。
本页示例使用内联 SVG，复制后即可显示，无需加载远程图标脚本。这些示意图形用于展示样式，不是完整的游戏素材库。
基础图标
同一组图标使用 24 × 24 的坐标系与一致线宽。用 --ak-icon-size 调整显示尺寸，用父元素的 color 控制颜色。
目标
防护
信号
能量
物资
前进
SOURCE / HTML
html
<div style="display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; width: 100%; max-width: 420px;">
<div style="display: grid; justify-items: center; gap: 12px;">
<svg class="ak-icon ak-icon--stroke" viewBox="0 0 24 24" aria-hidden="true" style="--ak-icon-size: 28px"><circle cx="12" cy="12" r="7"/><circle cx="12" cy="12" r="2"/><path d="M12 2v3m0 14v3M2 12h3m14 0h3"/></svg>
<span style="font-size: 12px; letter-spacing: 0.12em;">目标</span>
</div>
<div style="display: grid; justify-items: center; gap: 12px;">
<svg class="ak-icon ak-icon--stroke" viewBox="0 0 24 24" aria-hidden="true" style="--ak-icon-size: 28px"><path d="m12 3 8 3v6c0 5-8 9-8 9s-8-4-8-9V6z"/><path d="m8 12 3 3 5-6"/></svg>
<span style="font-size: 12px; letter-spacing: 0.12em;">防护</span>
</div>
<div style="display: grid; justify-items: center; gap: 12px;">
<svg class="ak-icon ak-icon--stroke" viewBox="0 0 24 24" aria-hidden="true" style="--ak-icon-size: 28px"><path d="M4 20v-4m5 4v-8m6 8V8m5 12V4"/></svg>
<span style="font-size: 12px; letter-spacing: 0.12em;">信号</span>
</div>
<div style="display: grid; justify-items: center; gap: 12px;">
<svg class="ak-icon ak-icon--stroke" viewBox="0 0 24 24" aria-hidden="true" style="--ak-icon-size: 28px"><path d="m14 2-9 12h7l-2 8 9-12h-7z"/></svg>
<span style="font-size: 12px; letter-spacing: 0.12em;">能量</span>
</div>
<div style="display: grid; justify-items: center; gap: 12px;">
<svg class="ak-icon ak-icon--stroke" viewBox="0 0 24 24" aria-hidden="true" style="--ak-icon-size: 28px"><path d="m12 3 9 5-9 5-9-5zm-9 5v9l9 5 9-5V8M12 13v9M7.5 5.5l9 5"/></svg>
<span style="font-size: 12px; letter-spacing: 0.12em;">物资</span>
</div>
<div style="display: grid; justify-items: center; gap: 12px;">
<svg class="ak-icon ak-icon--stroke" viewBox="0 0 24 24" aria-hidden="true" style="--ak-icon-size: 28px"><path d="M4 12h16m-6-6 6 6-6 6"/></svg>
<span style="font-size: 12px; letter-spacing: 0.12em;">前进</span>
</div>
</div>html
<svg class="ak-icon ak-icon--stroke" viewBox="0 0 24 24"
aria-hidden="true" style="--ak-icon-size: 24px; color: #007aa8;">
<circle cx="12" cy="12" r="7" />
<path d="M12 2v3m0 14v3M2 12h3m14 0h3" />
</svg>填充图标只需 ak-icon；ak-icon--stroke 会设置 fill: none、圆角线端与 currentColor 描边，不应加在多色插画上。已有的 Iconfont <use href="#symbol-id"> 仍可使用，但需要消费项目自行提供对应的 SVG symbol。
材料徽章
细环边、深色内衬与适度留白让材料轮廓更清晰。四种配色展示同一组件的定制方式；名称承担资源识别，不仅靠颜色区分。
SOURCE / HTML
html
<div style="display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 40px; width: 100%; max-width: 360px;">
<figure style="margin: 0; display: grid; justify-items: center; gap: 14px;">
<span class="ak-icon--stuff" style="--ak-icon-stuff-color: #d8dd5a;">
<svg class="ak-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M5 4h14v16H5z"/><path fill="#20282d" d="m8 7 4 4 4-4-1.5-1.5L12 8l-2.5-2.5zM8 11h8v2H8zm0 4h8v2H8zm3-4h2v8h-2z"/></svg>
</span>
<figcaption style="display: grid; gap: 4px; text-align: center; font-size: 13px;">
<strong>龙门币</strong><span style="font-size: 11px; opacity: 0.7;">通用货币</span>
</figcaption>
</figure>
<figure style="margin: 0; display: grid; justify-items: center; gap: 14px;">
<span class="ak-icon--stuff" style="--ak-icon-stuff-color: #74d9f4;">
<svg class="ak-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M6 4h12v16H6z"/><path fill="#20282d" d="M9 7h6v6H9zm0 9h6v1H9z"/><path d="M3 7h2v2H3zm0 4h2v2H3zm0 4h2v2H3zm16-8h2v2h-2zm0 4h2v2h-2zm0 4h2v2h-2z"/></svg>
</span>
<figcaption style="display: grid; gap: 4px; text-align: center; font-size: 13px;">
<strong>数据模块</strong><span style="font-size: 11px; opacity: 0.7;">设备升级</span>
</figcaption>
</figure>
<figure style="margin: 0; display: grid; justify-items: center; gap: 14px;">
<span class="ak-icon--stuff" style="--ak-icon-stuff-color: #c1a4ef;">
<svg class="ak-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="m12 2 9 8-9 12L3 10z"/><path d="m7 10 5-5 5 5-5 8z" fill="#20282d"/><path d="m12 6 3 4-3 5z"/></svg>
</span>
<figcaption style="display: grid; gap: 4px; text-align: center; font-size: 13px;">
<strong>聚合晶体</strong><span style="font-size: 11px; opacity: 0.7;">精炼材料</span>
</figcaption>
</figure>
<figure style="margin: 0; display: grid; justify-items: center; gap: 14px;">
<span class="ak-icon--stuff" style="--ak-icon-stuff-color: #f3b770;">
<svg class="ak-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="m7 3 10 0 5 9-5 9H7l-5-9z"/><path d="m9 7 6 0 3 5-3 5H9l-3-5z" fill="#20282d"/><path d="M10 9h4v6h-4z"/></svg>
</span>
<figcaption style="display: grid; gap: 4px; text-align: center; font-size: 13px;">
<strong>合金组件</strong><span style="font-size: 11px; opacity: 0.7;">结构强化</span>
</figcaption>
</figure>
</div>徽章默认直径 5rem，内部图形占直径的约 58%，不会再放大到环边外。名称与说明放在外部，SVG 本身作为装饰隐藏。
操作与状态
文字按钮用于主要动作；纯图标按钮需要明确的无障碍名称。点击「锁定目标」或使用键盘激活，状态文字会同步变化；右侧图标按钮用于重置。
SOURCE / HTML
html
<div data-icon-actions style="display: grid; justify-items: center; gap: 24px; width: 100%;">
<div role="group" aria-label="目标操作" style="display: flex; flex-wrap: wrap; justify-content: center; gap: 16px;">
<button type="button" class="ak-button" aria-pressed="false" data-target-toggle style="gap: 10px;">
<svg class="ak-icon ak-icon--stroke" viewBox="0 0 24 24" aria-hidden="true" style="--ak-icon-size: 24px"><circle cx="12" cy="12" r="7"/><circle cx="12" cy="12" r="2"/><path d="M12 2v3m0 14v3M2 12h3m14 0h3"/></svg>
<span>锁定目标</span>
</button>
<button type="button" class="ak-button" aria-label="重置目标" data-target-reset style="width: 50px;">
<svg class="ak-icon ak-icon--stroke" viewBox="0 0 24 24" aria-hidden="true" style="--ak-icon-size: 22px;"><path d="M3 10a9 9 0 1 1 2 8M3 4v6h6"/></svg>
</button>
</div>
<output aria-live="polite" style="display: flex; align-items: center; gap: 8px; font-size: 13px;">
<svg class="ak-icon ak-icon--stroke" viewBox="0 0 24 24" aria-hidden="true" style="--ak-icon-size: 16px"><circle cx="12" cy="12" r="7"/><circle cx="12" cy="12" r="2"/><path d="M12 2v3m0 14v3M2 12h3m14 0h3"/></svg>
<span data-target-status>尚未锁定目标</span>
</output>
</div>
<style>
[data-icon-actions] .ak-button:focus-visible { outline: 2px solid #74d9f4; outline-offset: 4px; }
[data-icon-actions] .ak-button[aria-pressed="true"] { background: #74d9f4; color: #171d22; }
</style>
<script>
const root = document.currentScript.parentElement.querySelector('[data-icon-actions]')
const toggle = root.querySelector('[data-target-toggle]')
function setLocked(locked) {
toggle.setAttribute('aria-pressed', String(locked))
toggle.querySelector('span').textContent = locked ? '解除锁定' : '锁定目标'
root.querySelector('[data-target-status]').textContent = locked ? '目标已锁定' : '尚未锁定目标'
}
toggle.addEventListener('click', () => setLocked(toggle.getAttribute('aria-pressed') !== 'true'))
root.querySelector('[data-target-reset]').addEventListener('click', () => setLocked(false))
</script>- 有文字标签时，为 SVG 添加
aria-hidden="true"，避免重复朗读。 - 纯图标按钮使用
aria-label，并保留原生<button>的键盘交互。 - 独立传达信息的 SVG 使用
role="img"和aria-label，或关联唯一的<title>。 - 调整图标尺寸不等于扩大点击区域；操作按钮建议至少保留
44 × 44px的目标尺寸。
样式变量
| 变量 | 默认值 | 用途 |
|---|---|---|
--ak-icon-size | 1em | 基础图标的宽高，默认随文字字号缩放 |
--ak-icon-stuff-size | 5rem | 材料徽章的直径 |
--ak-icon-stuff-color | #d8dd5a | 材料环边与默认图形颜色 |
--ak-icon-stuff-background | #171d22 | 材料内衬的底色 |
--icon-border-color | #d8dd5a | 兼容旧用法；未设置新配色变量时作为回退 |
新配色变量优先于 --icon-border-color。业务图形可以继续使用自己的颜色；现有 ak-icon、ak-icon--stuff 类名和旧变量保持可用。