别名

¥Aliased Names

同一个图标可以有多个名称。这是因为我们选择重命名某些图标，使其与其他图标集更加一致，或者名称不通用。例如，edit-2 图标重命名为 pen，以使名称更通用，因为它只是一个笔图标。

¥Icons can have multiple names for the same icon. This is because we choose to rename some icons to make them more consistent with the rest of the icon set, or the name was not generic. For example, the edit-2 icon is renamed to pen to make the name more generic, since it is just a pen icon.

除了别名之外，Lucide 还提供可在项目中使用的前缀和后缀名称。这是为了防止与其他库或你自己的代码发生导入名称冲突。

¥Beside aliases names lucide also includes prefixed and suffixed names to use within your project. This is to prevent import name collisions with other libraries or your own code.

// These are all the same icon
import {
  House,
  HouseIcon,
  LucideHouse,
} from "lucide-react";

选择导入名称样式

¥Choosing import name style

为了保持导入的一致性，或者想要更改 IDE 中 Lucide 图标的自动补齐功能，你可以选择所需的导入名称样式。

¥To be consistent in your imports or want to change the autocompletion of Lucide icons in your IDE there an option to able the choose the import name style you want.

这可以通过创建自定义模块声明文件来覆盖 lucide 的导入，并关闭 IDE 中的自动补齐功能来实现。

¥This can be done by creating a custom module declaration file to override the lucide imports and turning off the autocomplete in your IDE.

关闭 IDE 中的自动补齐功能

¥Turn off autocomplete in your IDE

{
  "typescript.preferences.autoImportFileExcludePatterns": [
    "lucide-react", // or
    "lucide-preact", // or
    "lucide-react-native", // or
    "lucide-vue-next",
  ]
}

创建自定义模块声明文件

¥Create a custom module declaration file

仅适用于 lucide-react、lucide-preact、lucide-react-native、lucide-vue-next 软件包。这将使你能够选择要在项目中使用的导入名称样式。

¥Only available for lucide-react, lucide-preact, lucide-react-native, lucide-vue-next package. This will enable you to choose the import name style you want to use in your project.

React

declare module "lucide-react" {
  // Prefixed import names
  export * from "lucide-react/dist/lucide-react.prefixed";
  // or
  // Suffixed import names
  export * from "lucide-react/dist/lucide-react.suffixed";
}

Vue

declare module "lucide-vue-next" {
  // Prefixed import names
  export * from "lucide-vue-next/dist/lucide-vue-next.prefixed";
  // or
  // Suffixed import names
  export * from "lucide-vue-next/dist/lucide-vue-next.suffixed";
}

Preact

declare module "lucide-preact" {
  // Prefixed import names
  export * from "lucide-preact/dist/lucide-preact.prefixed";
  // or
  // Suffixed import names
  export * from "lucide-preact/dist/lucide-preact.suffixed";
}

React Native

declare module "lucide-react-native" {
  // Prefixed import names
  export * from "lucide-react-native/dist/lucide-react-native.prefixed";
  // or
  // Suffixed import names
  export * from "lucide-react-native/dist/lucide-react-native.suffixed";
}

请将其放置在项目根目录或 tsconfig.json 所在的文件夹中，或者将其放置在你定义的类型目录中。最简单的方法是在项目根目录中创建一个 @types 文件夹，并将文件命名为 [package-name].d.ts。

¥Place this in your project root or in a folder where your tsconfig.json is located, or locate it in your defined type directory. Easiest way is to create a @types folder in your project root and name the file [package-name].d.ts.

导入名称样式

¥Import name styles

导入样式	可用导入	声明文件导入
默认	Home、HomeIcon、LucideHome
前缀	LucideHome	[package].prefixed
后缀	HomeIcon	[package].suffixed