描边宽度

¥Stroke width

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

¥All icons are designed with SVG elements using strokes. These have a default stroke width of 2px.

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

¥The strokeWidth can be adjusted to create a different look of the icons.

使用 strokeWidth 属性调整笔触宽度

¥Adjusting stroke width with strokeWidth prop

import { FolderLock } from "lucide-react";

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

export default App;

Open Sandbox

绝对笔触宽度

¥Absolute stroke width

调整 size 属性时，描边宽度的大小将与图标的大小相关，这是 SVG 的默认行为。引入 absoluteStrokeWidth 属性是为了调整此行为，使描边宽度无论图标大小如何都保持不变。

¥When adjusting the size prop the size of the stroke width will be relative to the size of the icon, this is the default SVG behavior. The absoluteStrokeWidth prop is introduced to adjust this behavior to make the stroke width constant no matter the size of the icon.

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

¥This means that when absoluteStrokeWidth is enabled and the size of the icons is set to 48px the strokeWidth will still be 2px on the screen.

注意：2px 是 Lucide 图标的默认描边宽度，可以调整为各种大小。

¥Note 2px is the default stroke width for a Lucide icon, this can be adjusted to all sizes.

使用 absoluteStrokeWidth 属性调整笔触宽度

¥Adjusting stroke width with absoluteStrokeWidth prop

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

¥Setting absoluteStrokeWidth to true will make the stroke width absolute.

import { RollerCoaster } from "lucide-react";

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

export default App;

Open Sandbox