Lucide-React 使用指南

Lucide-React 是一个流行的 React 图标库，提供了 1000+ 高质量的 SVG 图标。它是 Lucide 图标集的 React 实现版本。

安装

首先，使用 npm 或 yarn 安装 lucide-react：

bash 复制代码

npm install lucide-react
# 或
yarn add lucide-react

基本使用

jsx 复制代码

import { Camera, Heart, Settings } from 'lucide-react';

function MyComponent() {
  return (
    <div>
      <Camera color="red" size={24} />
      <Heart fill="red" color="red" />
      <Settings className="spin-icon" />
    </div>
  );
}

主要属性

size: 图标大小（默认 24）
color: 图标颜色（默认 currentColor）
strokeWidth: 线条宽度（默认 2）
absoluteStrokeWidth: 是否使用绝对宽度
className: 自定义 CSS 类名

动态加载图标

如果需要动态加载图标（减少包大小）：

jsx 复制代码

import { icons } from 'lucide-react';

const Icon = ({ name, ...props }) => {
  const LucideIcon = icons[name];
  
  return <LucideIcon {...props} />;
};

// 使用
<Icon name="AlertCircle" size={48} color="blue" />

自定义样式

jsx 复制代码

import { Mail } from 'lucide-react';

// 使用内联样式
<Mail style={{ color: 'purple', marginRight: '8px' }} />

// 使用 CSS 类
<Mail className="icon-mail" />

所有可用图标

Lucide-React 提供了大量图标，完整列表可以参考 Lucide 官方网站。

性能优化

如果只需要少量图标，可以单独导入以减少包大小：

jsx 复制代码

import Camera from 'lucide-react/dist/esm/icons/camera';
import Heart from 'lucide-react/dist/esm/icons/heart';

与 Tailwind CSS 配合使用

jsx 复制代码

import { Home } from 'lucide-react';

<Home className="h-6 w-6 text-gray-500 hover:text-blue-500 transition-colors" />

注意事项

图标名称使用 PascalCase（大驼峰式命名）
某些图标有填充版本（如 Heart），可以使用 fill 属性
可以通过 strokeWidth 调整线条粗细

Lucide-React 是一个轻量级、高性能的图标解决方案，非常适合现代 React 应用。