Lucide 图标库全平台安装指南Web、React、Vue、Svelte 等框架的一站式接入方案【免费下载链接】lucideBeautiful consistent icon toolkit made by the community. Open-source project and a fork of Feather Icons.项目地址: https://gitcode.com/GitHub_Trending/lu/lucide本指南基于 Lucide 官方文档 docs/guide/installation.md 整理。Lucide 是一个由社区维护的开源图标工具包也是 Feather Icons 的分支项目。本文覆盖 Lucide 在 Web、React、Vue、Svelte、Solid、Angular、Preact、Astro 以及静态资源等场景下的安装方式并给出对应的包名速查表、版本注意事项与后续学习路径帮助你按项目技术栈选择正确的接入方案。安装之前理解 Lucide 的发布结构Lucide 并不是一个单一的包而是按“核心图标源 各框架适配层”的方式组织成多个 npm 包。仓库采用 pnpm workspace 管理见根目录 package.jsonpackageManager指定为pnpm11.22.0Node 版本要求24.11.1所有框架包与核心包统一放在 packages 目录下使用场景npm 包名对应源码目录原生 Web / Vanilla JSlucidepackages/lucideReactlucide-reactpackages/lucide-reactReact Nativelucide-react-nativepackages/lucide-react-nativeVuelucide/vuepackages/vueSvelte 5lucide/sveltepackages/svelteSvelte 4lucide-svelte—Solidlucide-solidpackages/lucide-solidAngularlucide/angularpackages/angularPreactlucide-preactpackages/lucide-preactAstrolucide/astropackages/astro静态资源SVG 文件 / Sprite / 字体 / CJSlucide-staticpackages/lucide-static下文所有安装命令均覆盖 pnpm、yarn、npm、bun、deno 五种包管理器你可以根据自己的工具链直接复制。Web 应用安装lucide面向浏览器应用与原生 JavaScript 的官方实现pnpm add lucideyarn add lucidenpm install lucidebun add lucidedeno add lucidelucide包基于 ES Modules 构建支持完整的 Tree-shaking。安装后通常配合createIcons使用该函数会查找带有data-lucide属性的 HTML 元素并将其替换为对应图标的 SVG。更完整的入门示例包含 CDN 引入、createIcons的attrs、nameAttr、root、inTemplates等高级参数请阅读 Web 版快速上手。lucide包的构建产物包括dist/esmES Module、dist/cjsCommonJS与dist/umd浏览器全局变量详见 packages/lucide/package.json。React 与 React Native安装lucide-react面向 React 应用的官方实现pnpm add lucide-reactyarn add lucide-reactnpm install lucide-reactbun add lucide-reactdeno add lucide-react安装完成后每个图标都是一个渲染内联 SVG 的 React 组件只有被实际 import 的图标才会进入最终产物其余图标会被 Tree-shaking 移除。常用自定义属性包括size默认 24、color默认currentColor、strokeWidth默认 2、nonScalingStroke默认 false。入门示例见 React 版快速上手。React Native 场景请使用lucide-react-native包而不是lucide-react。Vue安装lucide/vue面向 Vue 应用的官方实现pnpm add lucide/vueyarn add lucide/vuenpm install lucide/vuebun add lucide/vuedeno add lucide/vue在 Vue 3 的script setup中每个图标同样以组件形式导入并渲染内联 SVGprops 与 React 版基本一致size、color、stroke-width、nonScalingStroke此外还有default-class默认值lucide-icon。入门示例见 Vue 版快速上手。Sveltelucide/svelte与lucide-svelte的选择面向 Svelte 应用的官方实现pnpm add lucide/svelteyarn add lucide/sveltenpm install lucide/sveltebun add lucide/sveltedeno add lucide/svelte版本注意lucide/svelte仅面向 Svelte 5如果你仍在使用 Svelte 4请安装lucide-svelte包。入门示例按单个图标路径导入如lucide/svelte/icons/camera见 Svelte 版快速上手。Solid安装lucide-solid面向 Solid 应用的官方实现pnpm add lucide-solidyarn add lucide-solidnpm install lucide-solidbun add lucide-soliddeno add lucide-solidAngular安装lucide/angular面向 Angular 应用的官方实现pnpm add lucide/angularyarn add lucide/angularnpm install lucide/angularbun add lucide/angulardeno add lucide/angularPreact安装lucide-preact面向 Preact 应用的官方实现pnpm add lucide-preactyarn add lucide-preactnpm install lucide-preactbun add lucide-preactdeno add lucide-preactAstro安装lucide/astro面向 Astro 应用的官方实现pnpm add lucide/astroyarn add lucide/astronpm install lucide/astrobun add lucide/astrodeno add lucide/astro静态使用安装lucide-staticlucide-static面向不依赖框架、需要直接消费静态资源的场景支持独立 SVG 图标文件SVG Sprite雪碧图图标字体Icon Fonts供 Node.js 使用的 CommonJS 模块静态 SVG 字符串导出。pnpm add lucide-staticyarn add lucide-staticnpm install lucide-staticbun add lucide-staticdeno add lucide-staticSVG 文件 / Sprite / 字体 / JS 模块四种用法的详细接入步骤见 静态资源使用指南 及其下的子文档如 svg-sprite.md、font 目录、js-modules 目录。Figma 插件Lucide 提供了 Figma 插件Lucide Icons用于在 Figma 设计中直接插入 Lucide 图标。安装方式为打开 Figma 社区页面搜索 Lucide Icons 插件并安装到你的团队或个人工作区。安装后可在插件面板中浏览、搜索并按类别选择图标插入画布。安装后的通用建议按场景选对包名同一图标在 Web 与各框架中的包名不同见文首速查表混用会导致模块解析失败。例如 React Native 必须用lucide-react-nativeSvelte 5 用lucide/svelte而 Svelte 4 用lucide-svelte。配合 Tree-shaking 按需引入所有框架包均以 ES Modules 导出应通过具名导入如import { Camera } from lucide-react而非整体导入以减小打包体积。使用 CDN 时锁定版本若通过 unpkg 等方式直接以script引入lucide官方建议锚定具体版本如lucidex.x.x/dist/umd/lucide.min.js避免使用latest——最新版本可能包含破坏性变更。详见 Web 版快速上手中的 CDN 一节。查阅各框架完整文档安装只是第一步各框架的图标属性、动态更新与迁移指南分别见 lucide、react、vue、svelte、solid、angular、preact、astro 对应文档目录。【免费下载链接】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），仅供参考