修改 Lucide-React 图标样式的方法

啃火龙果的兔子2025-07-24 6:09

修改 Lucide-React 图标样式的方法

使用 lucide-react 时，你可以通过多种方式修改图标的样式。以下是几种常用的方法：

1. 通过 className 属性

jsx 复制代码

import { Home } from 'lucide-react';

function MyComponent() {
  return <Home className="text-blue-500 w-8 h-8" />;
}

2. 通过 style 属性

jsx 复制代码

import { Home } from 'lucide-react';

function MyComponent() {
  return <Home style={{ color: 'red', width: 32, height: 32 }} />;
}

3. 通过 size 属性控制大小

jsx 复制代码

import { Home } from 'lucide-react';

function MyComponent() {
  return <Home size={24} />; // 直接设置大小
}

4. 通过 color 属性设置颜色

jsx 复制代码

import { Home } from 'lucide-react';

function MyComponent() {
  return <Home color="#ff0000" />;
}

5. 使用 CSS 选择器

css 复制代码

/* 全局样式 */
.lucide-icon {
  color: purple;
  stroke-width: 2px;
}

/* 或者特定类名 */
.my-custom-icon {
  color: green;
  width: 40px;
  height: 40px;
}

jsx 复制代码

import { Home } from 'lucide-react';

function MyComponent() {
  return <Home className="my-custom-icon" />;
}

6. 修改描边宽度

jsx 复制代码

import { Home } from 'lucide-react';

function MyComponent() {
  return <Home strokeWidth={1.5} />; // 默认是2
}

7. 使用 CSS-in-JS 方案

jsx 复制代码

import { Home } from 'lucide-react';
import styled from 'styled-components';

const StyledIcon = styled(Home)`
  color: ${props => props.color || 'black'};
  &:hover {
    color: blue;
    transform: scale(1.1);
  }
`;

function MyComponent() {
  return <StyledIcon color="orange" />;
}

注意事项

Lucide 图标本质上是 SVG，所以你可以使用所有 SVG 相关的 CSS 属性
默认情况下，图标的颜色继承自父元素的文本颜色
修改 strokeWidth 可以调整图标的线条粗细
如果使用 Tailwind CSS，可以直接使用 Tailwind 的类名来设置样式

选择哪种方法取决于你的项目架构和个人偏好。在大多数情况下，使用 className 或 style 属性是最简单直接的方式。