Lucide 中文文档

Appearance

别名 ​

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

除了别名，Lucide 还包括前缀和后缀名称，以在您的项目中使用。这是为了防止与其他库或您自己的代码导入名称冲突。

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

选择导入名称样式 ​

为了在导入中保持一致，或者想要更改 IDE 中 Lucide 图标的自动完成，有一个选项可以启用您想要的导入名称样式。

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

在 IDE 中关闭自动完成 ​

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

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

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

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";
}
ts
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";
}
ts
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";
}
ts
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。

导入名称样式 ​

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