描边宽度

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

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

使用 strokeWidth 输入调整描边宽度

import { Component, ViewEncapsulation } from '@angular/core';
import { LucideFolderLock } from '@lucide/angular';

@Component({
  selector: 'app',
  imports: [LucideFolderLock],
  template: `<svg
    lucideFolderLock
    [strokeWidth]="1"
  />`,
  styleUrls: ['./app.component.css'],
  encapsulation: ViewEncapsulation.None,
})
export class App {}

Open Sandbox

非缩放描边

绑定 size 输入时，图标的描边宽度将相对于其大小，这是默认的 SVG 行为。引入 nonScalingStroke 输入是为了调整此行为，使描边宽度不受图标大小影响而保持不变。

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

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

使用 nonScalingStroke 输入调整描边宽度

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

import { Component, ViewEncapsulation } from '@angular/core';
import { LucideRollerCoaster } from '@lucide/angular';

@Component({
  selector: 'app',
  imports: [LucideRollerCoaster],
  template: `
    <svg
      lucideRollerCoaster
      [size]="96"
      [nonScalingStroke]="true"
    ></svg>
  `,
  styleUrls: ['./app.component.css'],
  encapsulation: ViewEncapsulation.None,
})
export class App {}

Open Sandbox