Lucide 中文网

Appearance

别名 ​

🌐 Aliased Names

有些图标有多个名称。这是因为我们有时选择重命名它们，以使它们与其余图标集更一致，或者原名称不够通用。例如，edit-2 图标被重命名为 pen，以使名称更通用，因为它只是一个笔的图标。

🌐 Some icons have multiple names. This is because we sometimes choose to rename them 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 these aliases, 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.

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

选择导入名称样式 ​

🌐 Choosing import name style

如果你希望在整个项目中保持一致的导入，或者如果你想更改 IDE 中 Lucide 图标的自动补全，可以选择你喜欢的导入名称样式。

🌐 If you want consistent imports across your project, or if you want to change the autocompletion of Lucide icons in your IDE, there an option to choose the import name style you prefer.

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

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

关闭 IDE 中的自动补齐功能 ​

🌐 Turn off autocomplete in your IDE

.vscode/settings.json
json
{
  "js/ts.preferences.autoImportFileExcludePatterns": [
    "lucide-react",
  ]
}

创建自定义模块声明文件 ​

🌐 Create a custom module declaration file

创建一个自定义 TypeScript 声明文件，重新导出首选的命名风格：

🌐 Create a custom TypeScript declaration file that re-exports the preferred naming style:

lucide-react.d.ts
ts
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";
}

将此文件放在项目根目录或 TypeScript 配置中包含的目录中。一个常用的方法是创建一个 @types 文件夹，并将文件命名为 lucide-react.d.ts。

🌐 Place this file in your project root or in a directory included in your TypeScript configuration. A common approach is to create a @types folder and name the file lucide-react.d.ts.

导入名称样式 ​

🌐 Import name styles

导入方式可用导入项声明文件导入
默认Home, HomeIcon, LucideHome
带前缀LucideHomelucide-react.prefixed
带后缀HomeIconlucide-react.suffixed