描边宽度

🌐 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

<script setup>
import { FolderLock } from '@lucide/vue';
</script>

<template>
  <FolderLock :strokeWidth="1" />
</template>

Open Sandbox

非缩放笔画

🌐 Non-scaling strokes

在调整 size 属性时，线条宽度的大小会相对于图标的大小变化，这是 SVG 的默认行为。引入了 nonScalingStroke 属性来调整这一行为，使线条宽度无论图标大小如何都保持不变。

🌐 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 nonScalingStroke prop is introduced to adjust this behavior to make the stroke width constant no matter the size of the icon.

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

🌐 This means that when nonScalingStroke 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.

用 nonScalingStroke 属性调整笔划宽度

🌐 Adjusting stroke width with nonScalingStroke prop

将 nonScalingStroke 设置为 true 会使笔画宽度不随缩放而变化。

🌐 Setting nonScalingStroke to true will make the stroke width non-scaling.

<script setup>
import { RollerCoaster } from '@lucide/vue';
</script>

<template>
  <RollerCoaster
    :size="96"
    nonScalingStroke
  />
</template>

Open Sandbox