修改 Lucide-React 圖標樣式的方法

使用 lucide-react 時，你可以通過多種方式修改圖標的樣式。以下是幾種常用的方法：

1. 通過 className 屬性

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

2. 通過 style 屬性

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

3. 通過 size 屬性控制大小

import { Home } from 'lucide-react';function MyComponent() {return <Home size={24} />; // 直接設置大小
}

4. 通過 color 屬性設置顏色

import { Home } from 'lucide-react';function MyComponent() {return <Home color="#ff0000" />;
}

5. 使用 CSS 選擇器

/* 全局樣式 */
.lucide-icon {color: purple;stroke-width: 2px;
}/* 或者特定類名 */
.my-custom-icon {color: green;width: 40px;height: 40px;
}

import { Home } from 'lucide-react';function MyComponent() {return <Home className="my-custom-icon" />;
}

6. 修改描邊寬度

import { Home } from 'lucide-react';function MyComponent() {return <Home strokeWidth={1.5} />; // 默認是2
}

7. 使用 CSS-in-JS 方案

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" />;
}

注意事項

1. Lucide 圖標本質上是 SVG，所以你可以使用所有 SVG 相關的 CSS 屬性
2. 默認情況下，圖標的顏色繼承自父元素的文本顏色
3. 修改 strokeWidth 可以調整圖標的線條粗細
4. 如果使用 Tailwind CSS，可以直接使用 Tailwind 的類名來設置樣式

選擇哪種方法取決于你的項目架構和個人偏好。在大多數情況下，使用 className 或 style 屬性是最簡單直接的方式。