lucide-icons

Name: lucide-icons
Author: aksuharun

github.com/aksuharun设计与 UI1310 次安装19 周前更新

代码仓库

关于 lucide-icons

lucide-icons 是一项指导在界面项目中使用 Lucide 框架专用图标包的技能，面向开发者。内容涵盖单独导入 SVG 图标、通用属性、无障碍支持和各框架参考。

主要功能

01框架专用图标包
02可单独导入的内联 SVG 图标
03通用尺寸、颜色和描边属性
04Tree-shaking 使用指南
05无障碍与动态图标指南
06各框架对应的参考文件

适用场景

01在框架界面中添加 SVG 图标
02在构建包中仅导入所用图标
03渲染名称来自动态数据的图标

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/aksuharun/skills --skill lucide-icons

安装后在 Claude Code 中输入/lucide-icons确认已加载。

包含的文件

除 SKILL.md 外，安装时一起下载的参考资料和脚本。

references/

lucide-angular.md

lucide-astro.md

lucide-preact.md

lucide-react-native.md

lucide-react.md

lucide-solid.md

lucide-static.md

lucide-svelte.md

lucide-vue-next.md

lucide.md

详细介绍

Lucide Icons

Lucide 提供针对特定框架的程序包——每个图标都是可单独导入并渲染为内联 SVG 的组件或元素。所有程序包都完全支持摇树优化。

图标命名

程序包导出使用 PascalCase：Camera、ArrowRight、CircleAlert
CSS/HTML 数据属性和图标字体类使用 kebab-case：data-lucide="circle-alert"、icon-circle-alert
在 lucide.dev/icons 查找图标名称

通用属性

所有框架程序包都共享以下核心属性：

prop	type	default
`size`	number	24
`color`	string	currentColor
`strokeWidth`	number	2
`absoluteStrokeWidth`	boolean	false

所有程序包也接受任意 SVG 表现属性作为属性（例如 fill、stroke-linejoin）。

最佳实践

始终使用摇树优化：只导入你使用的图标。生产环境的构建包中不要导入 * as icons。
直接导入图标（例如 from 'lucide-react/icons/camera'）可绕过程序包入口文件，提升构建性能。
按名称动态加载：只有在图标名称来自动态数据（例如 CMS）时，才使用 DynamicIcon（React）或通用封装组件。
无障碍性：图标默认设置为 aria-hidden="true"。当图标具有含义时，请添加 aria-label。

框架参考文件

请阅读所用框架对应的参考文件：

框架 / 环境	程序包	参考文件
React	`lucide-react`	references/lucide-react.md
Vue 3	`lucide-vue-next`	references/lucide-vue-next.md
Svelte 5 (or 4)	`@lucide/svelte`	references/lucide-svelte.md
SolidJS	`lucide-solid`	references/lucide-solid.md
Preact	`lucide-preact`	references/lucide-preact.md
Angular	`lucide-angular`	references/lucide-angular.md
Astro	`@lucide/astro`	references/lucide-astro.md
React Native	`lucide-react-native`	references/lucide-react-native.md
Vanilla JS / HTML	`lucide`	references/lucide.md
Static / No-framework / Node.js	`lucide-static`	references/lucide-static.md

Lucide Lab（自定义 / 非官方图标）

Lucide lab 提供主库中没有的额外图标。所有程序包都支持通过其 Icon 组件使用 lab 图标：

// React example — same pattern works across React, Preact, Solid, Astro, Svelte, Vue
import { Icon } from 'lucide-react';
import { coconut } from '@lucide/lab';

<Icon iconNode={coconut} color="red" size={32} />

支持 Markdown

登录后评论