Menu
用于在 lucky-ui 中添加、修改或管理图标。包括新增 SVG 图标到图标集、重建图标字体、查询现有图标命名、在组件中正确使用 lk-icon 组件。
Instalar com Codex ou Claude Copie este prompt, cole no Codex, Claude ou outro assistente e deixe que ele revise a página da skill e instale para você.
Use when debugging or verifying WeChat Mini Program UI issues in this repo. Prioritize WeChat DevTools CLI plus miniprogram-automator background inspection of routes, WXML, element offset/size, computed styles, and console output; refresh phone preview with auto-preview after fixes.
用于在 lucky-ui UniApp 多端组件库中新增、修改或调试组件。当用户需要：新建组件、修改现有组件逻辑/样式/props、调试组件问题、或为组件添加新功能时，必须使用本 skill。
用于为 lucky-ui 组件库编写、修改或补充 VitePress 文档。包括新组件文档、API 表格、使用示例、Demo 演示页等。
用于定制、修改或扩展 lucky-ui 的主题系统，包括品牌色替换、亮暗模式配置、CSS 变量新增、组件级主题变量覆盖、字体/圆角/间距等设计 token 调整。
Automate browser interactions, test web pages and work with Playwright tests.
Runtime Automation Probe: 基于 Playwright / miniprogram-automator 的跨端 UI 运行态探针。必须用于用户提及抓取 H5、抓取h5、H5运行态、抓取微信小程序、微信小程序运行态、小程序运行态、抓 DOM、抓 WXML、元素标签、元素结构、样式、尺寸、offset、size、style、交互结果、跨端 UI 对比、运行态回归等场景。
Baseado na classificação ocupacional SOC
| name | lucky-ui-icon |
| description | 用于在 lucky-ui 中添加、修改或管理图标。包括新增 SVG 图标到图标集、重建图标字体、查询现有图标命名、在组件中正确使用 lk-icon 组件。 |
Lucky-UI 使用自托管字体图标方案，基于以下工具链：
svgtofontsrc/uni_modules/lucky-ui/components/lk-icon/src/uni_modules/lucky-ui/scripts/<lk-icon name="heart-fill" />
<lk-icon name="star" size="40" />
<lk-icon name="check-circle" color="#52c41a" />
<lk-icon name="arrow-right" size="32" color="var(--lk-color-primary)" />
| Prop | 类型 | 默认值 | 说明 |
|---|---|---|---|
name | string | '' | 图标名称（不含前缀） |
size | string | number | '' | 图标大小（单位 rpx，纯数字默认 rpx） |
color | string | '' | 图标颜色（支持 CSS 变量） |
customClass | string | '' | 自定义类名 |
customStyle | string | object | '' | 自定义样式 |
<script setup lang="ts">
import LkIcon from '@/uni_modules/lucky-ui/components/lk-icon/lk-icon.vue';
</script>
<template>
<!-- 前缀插槽示例 -->
<lk-input>
<template #prefix>
<lk-icon name="search" size="28" color="var(--lk-text-placeholder)" />
</template>
</lk-input>
</template>
lk-icon/
├── lk-icon.vue # 图标组件
├── icon.props.ts # Props 定义
├── fonts/ # 构建的字体文件
│ ├── lk-icon.woff2
│ ├── lk-icon.woff
│ ├── lk-icon.ttf
│ └── lk-icon.eot
├── svgs/ # 原始 SVG 文件（mobile 风格）
│ ├── heart.svg
│ ├── star.svg
│ └── ...
└── index.scss # @font-face 声明 + 图标类名
查看图标配置文件：src/uni_modules/lucky-ui/scripts/iconset.mobile.config.js
// 在 icons 数组中添加图标名称（Bootstrap Icons 的 slug）
module.exports = {
icons: [
'heart',
'heart-fill',
'star',
// 新增图标：
'camera',
'camera-fill',
]
};
准备 Bootstrap Icons（仅首次）：
pnpm run icons:prepare
重新构建字体：
pnpm run icons:all
将 SVG 文件放入 src/uni_modules/lucky-ui/components/lk-icon/svgs/，命名格式：{icon-name}.svg
SVG 规范：
viewBox="0 0 16 16"fill 属性（让 CSS 控制颜色）<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
<path d="M8 1.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13zM0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8z"/>
</svg>
重新构建字体：
pnpm run icons:build
# 从 Bootstrap Icons 准备 SVG 文件
pnpm run icons:prepare
# 构建字体文件（svgtofont）
pnpm run icons:build
# 生成 Base64 内嵌字体（小程序兼容）
pnpm run icons:base64
# 完整流程（prepare + build）
pnpm run icons:all
# 查看已配置的图标列表
cat src/uni_modules/lucky-ui/scripts/iconset.mobile.config.js
src/uni_modules/lucky-ui/scripts/iconset.mobile.lock.json 包含所有已构建图标的完整列表和哈希。
图标应使用以下 CSS 变量适配主题：
<!-- 默认跟随文字色（推荐）-->
<lk-icon name="heart" />
<!-- 主色 -->
<lk-icon name="star-fill" :color="'var(--lk-color-primary)'" />
<!-- 危险色 -->
<lk-icon name="trash" :color="'var(--lk-color-danger)'" />
<!-- 成功色 -->
<lk-icon name="check-circle-fill" :color="'var(--lk-color-success)'" />
<!-- 占位符色 -->
<lk-icon name="search" :color="'var(--lk-text-placeholder)'" />
[!WARNING] 修改 SVG 文件后必须重新运行
pnpm run icons:build才能生效。
[!TIP] 小程序平台不支持网络字体，图标字体已通过
icons:base64转换为 Base64 内嵌格式，直接在 SCSS 中引用。
[!NOTE] 图标名称中的
-fill后缀表示实心图标，无后缀为线框图标（与 Bootstrap Icons 命名一致）。