Lucide 图标库全平台安装指南：Web、React、Vue、Svelte 等框架的一站式接入方案

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.json，packageManager指定为pnpm@11.22.0，Node 版本要求>=24.11.1），所有框架包与核心包统一放在 packages 目录下：

下文所有安装命令均覆盖 pnpm、yarn、npm、bun、deno 五种包管理器，你可以根据自己的工具链直接复制。

Web 应用：安装lucide

面向浏览器应用与原生 JavaScript 的官方实现：

pnpm add lucide

yarn add lucide

npm install lucide

bun add lucide

deno add lucide

lucide包基于 ES Modules 构建，支持完整的 Tree-shaking。安装后通常配合createIcons使用：该函数会查找带有data-lucide属性的 HTML 元素，并将其替换为对应图标的 SVG。更完整的入门示例（包含 CDN 引入、createIcons的attrs、nameAttr、root、inTemplates等高级参数）请阅读 Web 版快速上手。lucide包的构建产物包括dist/esm（ES Module）、dist/cjs（CommonJS）与dist/umd（浏览器全局变量），详见 packages/lucide/package.json。

React 与 React Native：安装lucide-react

面向 React 应用的官方实现：

pnpm add lucide-react

yarn add lucide-react

npm install lucide-react

bun add lucide-react

deno 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/vue

yarn add @lucide/vue

npm install @lucide/vue

bun add @lucide/vue

deno add @lucide/vue

在 Vue 3 的<script setup>中，每个图标同样以组件形式导入并渲染内联 SVG，props 与 React 版基本一致（size、color、stroke-width、nonScalingStroke），此外还有default-class（默认值lucide-icon）。入门示例见 Vue 版快速上手。

Svelte：@lucide/svelte与lucide-svelte的选择

面向 Svelte 应用的官方实现：

pnpm add @lucide/svelte

yarn add @lucide/svelte

npm install @lucide/svelte

bun add @lucide/svelte

deno add @lucide/svelte

版本注意：@lucide/svelte仅面向 Svelte 5；如果你仍在使用 Svelte 4，请安装lucide-svelte包。

入门示例（按单个图标路径导入，如@lucide/svelte/icons/camera）见 Svelte 版快速上手。

Solid：安装lucide-solid

面向 Solid 应用的官方实现：

pnpm add lucide-solid

yarn add lucide-solid

npm install lucide-solid

bun add lucide-solid

deno add lucide-solid

Angular：安装@lucide/angular

面向 Angular 应用的官方实现：

pnpm add @lucide/angular

yarn add @lucide/angular

npm install @lucide/angular

bun add @lucide/angular

deno add @lucide/angular

Preact：安装lucide-preact

面向 Preact 应用的官方实现：

pnpm add lucide-preact

yarn add lucide-preact

npm install lucide-preact

bun add lucide-preact

deno add lucide-preact

Astro：安装@lucide/astro

面向 Astro 应用的官方实现：

pnpm add @lucide/astro

yarn add @lucide/astro

npm install @lucide/astro

bun add @lucide/astro

deno add @lucide/astro

静态使用：安装lucide-static

lucide-static面向不依赖框架、需要直接消费静态资源的场景，支持：

• 独立 SVG 图标文件；
• SVG Sprite（雪碧图）；
• 图标字体（Icon Fonts）；
• 供 Node.js 使用的 CommonJS 模块静态 SVG 字符串导出。

pnpm add lucide-static

yarn add lucide-static

npm install lucide-static

bun add lucide-static

deno add lucide-static

SVG 文件 / Sprite / 字体 / JS 模块四种用法的详细接入步骤见 静态资源使用指南 及其下的子文档（如 svg-sprite.md、font 目录、js-modules 目录）。

Figma 插件

Lucide 提供了 Figma 插件（Lucide Icons），用于在 Figma 设计中直接插入 Lucide 图标。安装方式为：打开 Figma 社区页面，搜索 "Lucide Icons" 插件并安装到你的团队或个人工作区。安装后可在插件面板中浏览、搜索并按类别选择图标插入画布。

安装后的通用建议

• 按场景选对包名：同一图标在 Web 与各框架中的包名不同（见文首速查表），混用会导致模块解析失败。例如 React Native 必须用lucide-react-native，Svelte 5 用@lucide/svelte而 Svelte 4 用lucide-svelte。
• 配合 Tree-shaking 按需引入：所有框架包均以 ES Modules 导出，应通过具名导入（如import { Camera } from 'lucide-react'）而非整体导入，以减小打包体积。
• 使用 CDN 时锁定版本：若通过 unpkg 等方式直接以<script>引入lucide，官方建议锚定具体版本（如lucide@x.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