lucide-react 怎么装、怎么改React 图标库从安装到迁移的完整指南【免费下载链接】lucideBeautiful consistent icon toolkit made by the community. Open-source project and a fork of Feather Icons.项目地址: https://gitcode.com/GitHub_Trending/lu/lucidelucide-react 是开源图标库 Lucide 的 React 官方实现每个图标都是一个标准 React 组件渲染成内联 SVG按需引入不占包体尺寸、颜色、线条粗细都能用一个 prop 调好。本文带你从安装命令走到单图标定制、全项目统一风格、无障碍与动态加载最后把 react-feather 的旧代码平滑迁过来。lucide-react 安装一行命令就能跑起来先说它凭什么值得装。包配置里声明了sideEffects: false所以打包器会把没 import 的图标全部摇掉tree-shaking产物里只有你真用到的那几个size、color、strokeWidth这些 prop 写在组件上就立即生效全套组件自带 TypeScript 类型。peer 依赖包与包之间的版本兼容声明覆盖 React^16.5.1 || ^17 || ^18 || ^19新旧项目都能装。可以把 lucide-react 理解成一盒预制印章印面SVG已经画好你只管选哪枚、盖多大、用什么墨色。pnpm add lucide-react # 等价于 npm install / yarn add / bun add最小示例两行出图import { Camera } from lucide-react; export default function App() { return Camera /; }只导入了Camera最终包里就只有这一个图标。更完整的安装与导入说明见 docs/guide/react/getting-started.md。lucide-react 图标颜色、尺寸怎么改尺寸size默认 24宽高一起变Landmark size{64} /不想写 prop 也可以直接设 CSS 的width/height甚至写1em让图标跟着父级字号走适合图标 文字并排的场景。颜色color默认值是currentColor。这是 SVG 的当前颜色关键字含义是跟随父元素文字颜色——父级是红色图标就是红色多数场景不用动它。想单独指定就传color#3e9392。线条粗细Lucide 全部是描边stroke即轮廓线条风格strokeWidth默认 2。这里有个默认行为要注意图标放大时线条会等比变粗。如果希望线条永远固定粗细加nonScalingStrokeScan size{48} nonScalingStroke /顺带一提旧写法absoluteStrokeWidth已标记废弃新代码一律用nonScalingStroke。全项目统一图标风格CSS 还是 LucideProvider图标多了以后逐处传 prop 不可持续官方给了两条路。选型判据一句话全项目一刀切、不需要例外用 CSS要统一基调但允许个别图标破例用 LucideProvider。CSS 方案。每个图标都带lucide这个 class一条选择器管住全部.lucide { color: #ffadff; width: 56px; height: 56px; stroke-width: 1px; }官方也推荐这条路简单直接。代价是 CSS 优先级会盖掉单个图标的size、color、strokeWidthprop破例的图标会失效。LucideProvider 方案。用上下文给整棵子树注入默认值LucideProvider colorred size{48} strokeWidth{2} Home / /LucideProvider内部优先级是显式 prop Provider 值 默认值className也是合并而非覆盖所以单个图标随时能用 prop 破例。细节参考 docs/guide/react/advanced/global-styling.md。进阶细节无障碍、动态加载、自定义图标与类型无障碍默认隐藏必要时再暴露图标默认带aria-hiddentrue屏幕阅读器会跳过。装饰性图标、文字点缀的场景这正是你要的什么都不用做。只有图标独自承载关键含义时才需要暴露两种写法任选都会自动移除aria-hiddenHouse titleThis is my house/title /House House aria-labelThis is my house /一个常见坑图标放在按钮里时标签应加在按钮本身button aria-labelGo to home让辅助技术描述可点击元素而不是里面的装饰图。更多原则见 docs/guide/react/advanced/accessibility.md。动态加载DynamicIcon 只用在名字是变量的场景图标名存在数据库里典型如 CMS 后台配置时用DynamicIconimport { DynamicIcon } from lucide-react/dynamic; DynamicIcon namecamera colorred size{48} /注意name必填。官方不建议拿它当万能入口加载所有图标——构建时会把全部图标拉进来请求变多、可能闪烁SSR服务端渲染即浏览器拿到的是服务端先生成的页面下首次渲染也可能取不到值。图标名是静态的就直接 import。往图标里塞子元素自制未读红点和星级SVG 支持 svg 里再嵌 svgLucide 图标也接收全部 SVG 属性所以可以把一个小图标贴进另一个里用x、y摆位置坐标要落在 24×24 画布内Scan size{48} nonScalingStroke User size{12} x{6} y{6} nonScalingStroke / /Scan同一套玩法还能给 Mail 图标塞一个circle做未读红点或者用fillstrokeWidth{0}加半星StarHalf做星级评分。示例集合见 docs/guide/react/advanced/combining-icons.md。三种导入名与两个常用类型每个图标有三个导入名House、HouseIcon、LucideHouse是同一个东西前后缀版本用来避免和其他库撞名。想统一团队风格可以在项目里放一个lucide-react.d.ts声明文件把导入指向lucide-react.prefixed或lucide-react.suffixed子路径并在 IDE 设置里关掉对 lucide-react 的自动导入建议。VS Code 里悬停图标组件还能直接看到文档提示TypeScript 项目里两个类型最常用LucideProps用于给你的图标包装组件标注完整 prop含任意 SVG 属性LucideIcon是单个图标组件的类型做iconprop 可配置的按钮、菜单时直接拿它标注。旧的IconNode类型已标记废弃源码里请改用LucideIconNode定义见 packages/lucide-react/src/types.ts。react-feather 迁移 lucide-react改导入、修四个名字两者 API 几乎一致迁移流程就是四步装新包、卸旧包npm install lucide-reactnpm uninstall react-feather全局查找替换from react-feather→from lucide-react修 4 个改名的图标对照如下react-featherlucide-reactGitHubGithubGridLayoutGridTableTable2ToolWrench其余图标同名兼容props 用法原样保留不用动。⚠️ 另有一个版本变更要留意v1 起品牌类图标Github、Figma、Slack 等 14 个已被整体移除仍在用的话要换成品牌官方 SVG 或 Simple Icons 一类的品牌图标集详见 docs/guide/react/migration.md。速查表props 默认值与上手顺序prop默认值作用size24图标宽高pxcolorcurrentColor描边颜色缺省跟随文字颜色strokeWidth2线条粗细nonScalingStrokefalse线条粗细不随图标放大absoluteStrokeWidth—已废弃用nonScalingStroke替代任意 SVG 属性stroke、fill、className等都能直接当 prop 传。上手顺序建议装包跑通一个图标 → 用 props 调好单图标外观 → 全局风格在 CSS 和 LucideProvider 里二选一 → 有 feather 旧代码就先全局替换再修 4 个改名图标。动态加载、图标组合、类型标注这些等真遇到再翻对应章节。【免费下载链接】lucideBeautiful consistent icon toolkit made by the community. Open-source project and a fork of Feather Icons.项目地址: https://gitcode.com/GitHub_Trending/lu/lucide创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 
长河君 · 2026/10/26 1:39:15 · 阅读 1.2k lucide-react 怎么装、怎么改：React 图标库从安装到迁移的完整指南
lucide-react 怎么装、怎么改React 图标库从安装到迁移的完整指南【免费下载链接】lucideBeautiful consistent icon toolkit made by the community. Open-source project and a fork of Feather Icons.项目地址: https://gitcode.com/GitHub_Trending/lu/lucidelucide-react 是开源图标库 Lucide 的 React 官方实现每个图标都是一个标准 React 组件渲染成内联 SVG按需引入不占包体尺寸、颜色、线条粗细都能用一个 prop 调好。本文带你从安装命令走到单图标定制、全项目统一风格、无障碍与动态加载最后把 react-feather 的旧代码平滑迁过来。lucide-react 安装一行命令就能跑起来先说它凭什么值得装。包配置里声明了sideEffects: false所以打包器会把没 import 的图标全部摇掉tree-shaking产物里只有你真用到的那几个size、color、strokeWidth这些 prop 写在组件上就立即生效全套组件自带 TypeScript 类型。peer 依赖包与包之间的版本兼容声明覆盖 React^16.5.1 || ^17 || ^18 || ^19新旧项目都能装。可以把 lucide-react 理解成一盒预制印章印面SVG已经画好你只管选哪枚、盖多大、用什么墨色。pnpm add lucide-react # 等价于 npm install / yarn add / bun add最小示例两行出图import { Camera } from lucide-react; export default function App() { return Camera /; }只导入了Camera最终包里就只有这一个图标。更完整的安装与导入说明见 docs/guide/react/getting-started.md。lucide-react 图标颜色、尺寸怎么改尺寸size默认 24宽高一起变Landmark size{64} /不想写 prop 也可以直接设 CSS 的width/height甚至写1em让图标跟着父级字号走适合图标 文字并排的场景。颜色color默认值是currentColor。这是 SVG 的当前颜色关键字含义是跟随父元素文字颜色——父级是红色图标就是红色多数场景不用动它。想单独指定就传color#3e9392。线条粗细Lucide 全部是描边stroke即轮廓线条风格strokeWidth默认 2。这里有个默认行为要注意图标放大时线条会等比变粗。如果希望线条永远固定粗细加nonScalingStrokeScan size{48} nonScalingStroke /顺带一提旧写法absoluteStrokeWidth已标记废弃新代码一律用nonScalingStroke。全项目统一图标风格CSS 还是 LucideProvider图标多了以后逐处传 prop 不可持续官方给了两条路。选型判据一句话全项目一刀切、不需要例外用 CSS要统一基调但允许个别图标破例用 LucideProvider。CSS 方案。每个图标都带lucide这个 class一条选择器管住全部.lucide { color: #ffadff; width: 56px; height: 56px; stroke-width: 1px; }官方也推荐这条路简单直接。代价是 CSS 优先级会盖掉单个图标的size、color、strokeWidthprop破例的图标会失效。LucideProvider 方案。用上下文给整棵子树注入默认值LucideProvider colorred size{48} strokeWidth{2} Home / /LucideProvider内部优先级是显式 prop Provider 值 默认值className也是合并而非覆盖所以单个图标随时能用 prop 破例。细节参考 docs/guide/react/advanced/global-styling.md。进阶细节无障碍、动态加载、自定义图标与类型无障碍默认隐藏必要时再暴露图标默认带aria-hiddentrue屏幕阅读器会跳过。装饰性图标、文字点缀的场景这正是你要的什么都不用做。只有图标独自承载关键含义时才需要暴露两种写法任选都会自动移除aria-hiddenHouse titleThis is my house/title /House House aria-labelThis is my house /一个常见坑图标放在按钮里时标签应加在按钮本身button aria-labelGo to home让辅助技术描述可点击元素而不是里面的装饰图。更多原则见 docs/guide/react/advanced/accessibility.md。动态加载DynamicIcon 只用在名字是变量的场景图标名存在数据库里典型如 CMS 后台配置时用DynamicIconimport { DynamicIcon } from lucide-react/dynamic; DynamicIcon namecamera colorred size{48} /注意name必填。官方不建议拿它当万能入口加载所有图标——构建时会把全部图标拉进来请求变多、可能闪烁SSR服务端渲染即浏览器拿到的是服务端先生成的页面下首次渲染也可能取不到值。图标名是静态的就直接 import。往图标里塞子元素自制未读红点和星级SVG 支持 svg 里再嵌 svgLucide 图标也接收全部 SVG 属性所以可以把一个小图标贴进另一个里用x、y摆位置坐标要落在 24×24 画布内Scan size{48} nonScalingStroke User size{12} x{6} y{6} nonScalingStroke / /Scan同一套玩法还能给 Mail 图标塞一个circle做未读红点或者用fillstrokeWidth{0}加半星StarHalf做星级评分。示例集合见 docs/guide/react/advanced/combining-icons.md。三种导入名与两个常用类型每个图标有三个导入名House、HouseIcon、LucideHouse是同一个东西前后缀版本用来避免和其他库撞名。想统一团队风格可以在项目里放一个lucide-react.d.ts声明文件把导入指向lucide-react.prefixed或lucide-react.suffixed子路径并在 IDE 设置里关掉对 lucide-react 的自动导入建议。VS Code 里悬停图标组件还能直接看到文档提示TypeScript 项目里两个类型最常用LucideProps用于给你的图标包装组件标注完整 prop含任意 SVG 属性LucideIcon是单个图标组件的类型做iconprop 可配置的按钮、菜单时直接拿它标注。旧的IconNode类型已标记废弃源码里请改用LucideIconNode定义见 packages/lucide-react/src/types.ts。react-feather 迁移 lucide-react改导入、修四个名字两者 API 几乎一致迁移流程就是四步装新包、卸旧包npm install lucide-reactnpm uninstall react-feather全局查找替换from react-feather→from lucide-react修 4 个改名的图标对照如下react-featherlucide-reactGitHubGithubGridLayoutGridTableTable2ToolWrench其余图标同名兼容props 用法原样保留不用动。⚠️ 另有一个版本变更要留意v1 起品牌类图标Github、Figma、Slack 等 14 个已被整体移除仍在用的话要换成品牌官方 SVG 或 Simple Icons 一类的品牌图标集详见 docs/guide/react/migration.md。速查表props 默认值与上手顺序prop默认值作用size24图标宽高pxcolorcurrentColor描边颜色缺省跟随文字颜色strokeWidth2线条粗细nonScalingStrokefalse线条粗细不随图标放大absoluteStrokeWidth—已废弃用nonScalingStroke替代任意 SVG 属性stroke、fill、className等都能直接当 prop 传。上手顺序建议装包跑通一个图标 → 用 props 调好单图标外观 → 全局风格在 CSS 和 LucideProvider 里二选一 → 有 feather 旧代码就先全局替换再修 4 个改名图标。动态加载、图标组合、类型标注这些等真遇到再翻对应章节。【免费下载链接】lucideBeautiful consistent icon toolkit made by the community. Open-source project and a fork of Feather Icons.项目地址: https://gitcode.com/GitHub_Trending/lu/lucide创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考