跳转到内容

描边宽度

所有图标都是使用描边设计的 SVG 元素。 它们的默认描边宽度为 2px

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

使用 strokeWidth prop 调整描边宽度

import FolderLock from 'lucide-solid/icons/folder-lock';

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

export default App;

非缩放描边

调整 size prop 时,描边宽度的大小将相对于图标的大小,这是默认的 SVG 行为。引入 nonScalingStroke prop 可调整此行为,使描边宽度无论图标大小如何都保持不变。

这意味着当启用 nonScalingStroke 且图标的 size 设置为 48px 时,屏幕上的 strokeWidth 仍将为 2px

注意 2px 是 Lucide 图标的默认描边宽度,此值可调整为任意大小。

使用 nonScalingStroke prop 调整描边宽度

nonScalingStroke 设置为 true 将使描边宽度不随图标缩放。

import RollerCoaster from 'lucide-solid/icons/roller-coaster';

function App() {
  return (
    <div class="app">
      <RollerCoaster
        size={96}
        nonScalingStroke
      />
    </div>
  );
}

export default App;