尺寸调整

默认情况下，所有图标的尺寸均为 24px 乘 24px。可以通过绑定 size 输入属性或使用 CSS 来调整大小。

使用 size 输入属性调整图标大小

import { Component, ViewEncapsulation } from "@angular/core";
import { LucideLandmark } from "@lucide/angular";

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

Open Sandbox

通过 CSS 调整图标大小

可以使用 CSS 属性 width 和 height 来调整图标大小。

.my-beer-icon {
  /* 修改这里！ */
  width: 64px;
  height: 64px;
}

Open Sandbox

根据字体大小动态更改图标大小

可以根据字体大小调整图标大小。这可以通过使用 em 单位来实现。有关 em 单位的更多信息，请参阅这篇 MDN 文章。

.my-icon {
  /* 图标大小将相对于 .text-wrapper 的 font-size */
  width: 1em;
  height: 1em;
}

.text-wrapper {
  /* 修改这里！ */
  font-size: 96px;

  /* 布局内容 */
  display: flex;
  gap: 0.25em;
  align-items: center;
}

Open Sandbox

使用 Tailwind 调整大小

可以使用 size-* 工具类来调整图标的大小。有关 size-* 工具类的更多信息，请参阅 Tailwind 文档。

app.html

<div>
  <svg lucidePartyPopper class="size-24"></svg>
</div>