Lucide 版本 1

经过多年的努力和奉献，Lucide 版本 1 已正式发布！这一里程碑标志着我们在为开发者和设计师提供全面且多功能的图标库的旅程中取得了重要成就。

这段旅程相当精彩——尤其是在过去的一年里。Lucide的下载量已经突破每周3000万，并被全球数百万个项目使用。这次发布证明了我们的社区和贡献者的辛勤工作，他们帮助将Lucide塑造成今天的样子。

🌐 It's been quite a ride — especially over the past year. Lucide has grown to over 30 million downloads per week and is used by million of projects worldwide. This release is a testament to the hard work of our community and contributors who have helped shape Lucide into what it is today.

感谢一路上支持我们的每一个人。没有你们，我们不可能做到这一点！

🌐 Thank you to everyone who has supported us along the way. We couldn't have done this without you!

版本1有什么新内容？简短总结；

🌐 What's New in Version 1? TLDR;

• 已移除品牌图标，更多详情请参见我们的品牌标识声明。
• 改进了文档，每个框架都有指南。
• 改进的可访问性，图标上现在默认设置了 aria-hidden。
• 已移除 UMD 构建，现在仅有 ESM 和 CJS（lucide 包例外）。
• 包名称已从 lucide-vue-next 重命名为 @lucide/vue。
• 适用于 Angular 的现代独立实现，@lucide/angular
• 支持 React、Vue、Svelte 和 Solid 中的上下文提供者。
• Lucide 字体的稳定代码点。
• lucide 包对 Shadow DOM 的支持。
• 许多错误修复和改进。

升级到版本1

🌐 Upgrading to Version 1

查看我们的指南：

🌐 See our guides:

适用于原生 JavaScript 迁移的 Lucide适用于 React 迁移的 Lucide适用于 Vue 迁移的 Lucide适用于 Svelte 迁移的 Lucide适用于 Solid 迁移的 Lucide适用于 Angular 迁移的 Lucide适用于 Preact 迁移的 Lucide适用于 Astro 迁移的 Lucide适用于静态迁移的 Lucide

已移除所有品牌图标

🌐 Removed All Brand Icons

作为我们致力于维护可持续且符合法律规范的图标库的一部分，我们已决定从 Lucide 版本 1 中移除所有品牌图标。此更改是为应对日益增加的法律压力以及与商标品牌图标相关的复杂性。有关更多详细信息，请参阅我们的 品牌标识说明。

🌐 As part of our commitment to maintaining a sustainable and legally compliant icon library, we have made the decision to remove all brand icons from Lucide Version 1. This change is in response to increasing legal pressures and the complexities associated with trademarked brand icons. See our brand logo statement for more details.

我们理解品牌图标对我们的许多用户来说很重要，我们想向你保证，这一决定并非轻率做出。我们的首要目标是确保 Lucide 继续成为社区可靠且合法的资源。

🌐 We understand that brand icons are important to many of our users, and we want to assure you that this decision was not made lightly. Our primary goal is to ensure that Lucide remains a reliable and legally sound resource for the community.

对于仍然需要品牌图标的用户，我们推荐 Simple Icons，它提供了一个广泛且法律上更安全的品牌标志集合。

🌐 For users who still require brand icons, we recommend Simple Icons, which provides an extensive, legally safer collection of brand logos.

改进的文档，每个框架的指南

🌐 Improved documentation, guides per framework

我们已经重新整理了文档，以提供更清晰、更全面的指南，针对每个支持的框架量身定制。无论你使用的是 React、Vue、Svelte、Solid、Angular、Astro 还是原生 JavaScript，你都可以找到：逐步说明、代码示例和最佳实践，帮助你将 Lucide 无缝集成到你的项目中。

🌐 We have revamped our documentation to provide clearer, more comprehensive guides tailored to each supported framework. Whether you're using React, Vue, Svelte, Solid, Angular, Astro or Vanilla JavaScript, you'll find: step-by-step instructions, code examples and best practices to help you integrate Lucide seamlessly into your projects.

另外，现在 LLMs 可以使用 llms.txt。

🌐 Also, a llms.txt is now available for LLMs to use.

改善的可访问性

🌐 Improved accessibility

我们通过将 aria-hidden 默认设置为 true 提高了图标的可访问性。此更改确保屏幕阅读器会忽略纯装饰性的图标，从而提高应用的整体可访问性。如果你需要使图标可访问，可以提供适当的 aria-label 或向图标元素添加 title 属性。

🌐 We have improved the accessibility of our icons by setting aria-hidden to true by default. This change ensures that screen readers will ignore icons that are purely decorative, improving the overall accessibility of your applications. If you need to make an icon accessible, you can provide an appropriate aria-label or add a title attribute to the icon element.

请参阅我们的无障碍深入指南，了解有关使图标可访问的更多详细信息和最佳实践。

🌐 See our accessibility in-depth guide for more details and best practices on making your icons accessible.

已移除 UMD 构建，现在仅支持 ESM 和 CJS

🌐 Removed UMD build, only ESM and CJS now

为了简化我们的构建流程并专注于现代 JavaScript 模块格式，我们在 Lucide 版本 1 中移除了 UMD 构建。我们现在仅支持 ESM（ECMAScript 模块）和 CJS（CommonJS）格式。这使 lucide-react 的体积减少了 32.3%（11.4 MB → 1 MB 压缩后），每周下载量超过 2500 万，这对生态系统来说是一个巨大的节省。

🌐 To streamline our build process and focus on modern JavaScript module formats, we have removed the UMD build from Lucide Version 1. We now only support ESM (ECMAScript Modules) and CJS (CommonJS) formats. This results in a 32.3% size reduction (11.4 MB → 1 MB gzipped) for lucide-react, with more than 25 million weekly downloads, this is a huge saving for the ecosystem.

包从 lucide-vue-next 重命名为 @lucide/vue

🌐 Package rename from lucide-vue-next to @lucide/vue

lucide-vue-next 现在已重命名为 @lucide/vue，以去掉“next”后缀，这个后缀原本只是用来表示它是 Vue 包的下一个版本。此更改是我们简化包命名并使其在所有框架中更一致的努力的一部分。

对上下文提供者的支持

🌐 Support for context providers

我们已经在 React、Vue、Svelte 和 Solid 中添加了对上下文提供者的支持。这允许你为特定上下文中的所有图标设置默认属性，从而更轻松地管理应用中图标的样式和行为。

🌐 We have added support for context providers in React, Vue, Svelte, and Solid. This allows you to set default properties for all icons within a specific context, making it easier to manage icon styles and behavior across your application.

我们一直建议使用 CSS，但使用这个时，无法在特定图标上设置像 size 或 color 这样的属性，因为 CSS 会覆盖它们。使用这个新功能，你现在可以轻松地为特定上下文中的所有图标设置默认属性，而不必在每个图标上手动定义它们。

🌐 We have always recommended using CSS, but with this it was not possible to set properties like size or color on specific icons, as CSS would override them. With this new feature, you can now easily set default properties for all icons within a specific context, without having to manually define them on each icon.

React

import { LucideProvider, Home } from 'lucide-react';

const App = () => (
  <LucideProvider
    color="red"
    size={48}
    strokeWidth={2}
  >
    <Home />
  </LucideProvider>
);

Vue

import { setLucideProps } from '@lucide/vue';

setLucideProps({
  size: 32,
  color: '#4f46e5',
  strokeWidth: 1.5,
});

Svelte

import { setLucideProps } from '@lucide/svelte';

setLucideProps({
  size: 32,
  color: '#4f46e5',
  strokeWidth: 1.5,
});

Solid

import { LucideProvider, Home } from 'lucide-solid';

const App = () => (
  <LucideProvider
    color="red"
    size={48}
    strokeWidth={2}
  >
    <Home />
  </LucideProvider>
);

Angular

import { ApplicationConfig } from '@angular/core';
import { provideLucideConfig } from '@lucide/angular';

export const appConfig: ApplicationConfig = {
  providers: [
    provideLucideConfig({
      size: 32,
      color: '#4f46e5',
      strokeWidth: 1.5,
    }),
  ]
};

Preact

import { LucideProvider, Home } from 'lucide-preact';

const App = () => (
  <LucideProvider
    color="red"
    size={48}
    strokeWidth={2}
  >
    <Home />
  </LucideProvider>
);

React Native

import { LucideProvider, Home } from 'lucide-react-native';

const App = () => (
  <LucideProvider
    color="red"
    size={48}
    strokeWidth={2}
  >
    <Home />
  </LucideProvider>
);

Lucide 字体的稳定代码点

🌐 Stable code points for Lucide font

我们为 Lucide 字体分配了稳定的代码点，每个图标都有一个固定的代码点，未来版本中不会发生变化。这确保了如果你在项目中使用 Lucide 字体，你可以依赖这些代码点保持一致，即使我们继续添加新图标并对库进行改进。

🌐 We have assigned stable code points for the Lucide font, each icon has a fixed code point that will not change in future releases. This ensures that if you are using the Lucide font in your projects, you can rely on the code points to remain consistent, even as we continue to add new icons and make improvements to the library.

Lucide 包对 shadow DOM 的支持

🌐 Support for shadow DOM in Lucide package

Lucide 包支持 shadow DOM，允许你在 web 组件和其他使用 shadow DOM 的环境中使用 Lucide 图标。这确保你的图标即使在 shadow DOM 中使用，也能正确渲染并保持其样式。

🌐 Lucide package supports shadow DOM, allowing you to use Lucide icons in web components and other contexts where shadow DOM is used. This ensures that your icons will render correctly and maintain their styles, even when used within a shadow DOM.