icons

用途：该技能用于在项目模板中统一、规范地添加图标，基于 Lucide 图标库与本地 SVG 文件，通过 <x-icon> Web Component 渲染，以保证尺寸一致与可访问性。适用于图标按钮、导航图标、状态指示、带图标的开关、操作按钮、社交分享图标等任何视觉指示或图标场景。规范要求始终使用 <x-icon> 组件，不使用内联 SVG。\n\n主要能力：使用 <x-icon> 组件可统一全应用图标尺寸、自动处理无障碍、使用优化并缓存的 SVG 加载、从 CSS 继承颜色（currentColor）、兼容任意图标集（Lucide、自定义等）。组件属性包括：name（必填，图标文件名不含 .svg）、set（图标集目录，默认 lucide）、size（预设 xs、sm、md、lg、xl、2xl，默认 md）、label（为功能性图标提供无障碍标签）、base-path（覆盖默认图标路径，默认 /.assets/icons）。尺寸对应 xs 为 1em（基础 16px）、sm 1.25em（20px）、md 1.5em（24px）、lg 2em（32px）、xl 2.5em（40px）、2xl 3em（48px）。\n\n使用方式：快速使用如 <x-icon name="menu"></x-icon>，带尺寸 <x-icon name="home" size="lg"></x-icon>，功能性图标配合 label，如按钮内 <x-icon name="x" label="Close"></x-icon>；自定义图标集使用 set="custom"。目录结构方面，组件位于 .assets/js/components/x-icon/，图标位于 .assets/icons/lucide/（含 index.json 清单与约 1900 个图标）及 .assets/icons/custom/。安装步骤：运行 /scaffold-icons 初始化，或手动执行 npm install lucide-static --save-dev、npm run icons:sync、复制 x-icon 组件到 .assets/js/components/x-icon/，并在 HTML 中引入 <script type="module" src="/.assets/js/components/x-icon/x-icon.js"></script>。在初始项目设置、更新 lucide-static 版本、全新 npm install 后需运行 icons:sync。\n\n样式与无障碍：图标继承 currentColor，可通过 CSS 设置颜色与尺寸。装饰性图标默认对屏幕阅读器隐藏；仅图标按钮、链接或状态指示等功能性图标应添加 label 属性。图标加可见文字时无需 label。\n\n自定义图标与替换图标集：在 .assets/icons/custom/ 创建 SVG 文件，需含 viewBox 属性、不设固定宽高、使用 currentColor 以继承颜色、保持文件体积小（可用 SVGO 优化），使用时 set="custom"。替换图标库可卸载 lucide-static、安装其他库、更新同步脚本源路径并运行 icons:sync，或手动复制 SVG 到 .assets/icons/[set-name]/；组件兼容任意 SVG 图标库。查找图标可浏览 https://lucide.dev/icons 或本地清单 .assets/icons/lucide/index.json，也可用 grep 在本地搜索。\n\n限制与检查：资料未提供该技能的性能数据、收费或平台限制。使用时应核对图标名与文件匹配、功能性图标带 label、尺寸合适、颜色继承父级、自定义图标存入 custom 目录。