描边宽度

所有图标都使用描边（strokes）的 SVG 元素设计。 这些元素的默认描边宽度为 2px。

可以通过调整 strokeWidth 来创建图标的不同外观。

使用 strokeWidth 属性调整描边宽度

import { FolderLock } from "lucide-react";

function App() {
  return (
    <div className="app">
      <FolderLock strokeWidth={1} />
    </div>
  );
}

export default App;

Open Sandbox

绝对描边宽度

调整 size 属性时，描边宽度的尺寸将相对于图标的尺寸，这是默认的 SVG 行为。引入 absoluteStrokeWidth 属性来调整此行为，使描边宽度无论图标尺寸如何都保持恒定。

这意味着当启用 absoluteStrokeWidth 并将图标的 size 设置为 48px 时，屏幕上的 strokeWidth 仍将为 2px。

注意，2px 是 Lucide 图标的默认描边宽度，这可以调整为所有尺寸。

使用 absoluteStrokeWidth 属性调整描边宽度

将 absoluteStrokeWidth 设置为 true 将使描边宽度变为绝对值。

import { RollerCoaster } from "lucide-react";

function App() {
  return (
    <div className="app">
      <RollerCoaster
        size={96}
        absoluteStrokeWidth={true}
      />
    </div>
  );
}

export default App;

Open Sandbox