Lucide 中文网

Appearance

尺寸 ​

🌐 Sizing

默认情况下，所有图标的尺寸为 24px 乘 24px。可以使用 size 属性和 CSS 调整尺寸。

🌐 By default, the size of all icons is 24px by 24px. The size is adjustable using the size prop and CSS.

使用 size 属性调整图标大小 ​

🌐 Adjusting the icon size using the size prop

astro
---
import Landmark from '@lucide/astro/icons/landmark';
---

<Landmark size={64} />

通过 CSS 调整图标大小 ​

🌐 Adjusting the icon size via CSS

CSS 属性 width 和 height 可用于调整图标大小。

🌐 The CSS properties width and height can be used to adjust the icon size.

css
.my-beer-icon {
  width: 64px;
  height: 64px;
}
astro
---
import Beer from '@lucide/astro/icons/beer';
import './icon.css'
---

<Beer class="my-beer-icon" />

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

🌐 Dynamically change the icon size based on the font size

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

🌐 It is possible to resize icons based on font size. This can be achieved using the em unit. See this MDN article for more information on the em unit.

css
.my-icon {
  /* Icon size will relative to font-size of .text-wrapper */
  width: 1em;
  height: 1em;
}

.text-wrapper {
  font-size: 96px;

  /* layout stuff */
  display: flex;
  gap: 0.25em;
  align-items: center;
}
astro
---
import Star from '@lucide/astro/icons/star';
import './icon.css'
---

<div class="text-wrapper">
  <Star class="my-icon" />
  <div>Yes</div>
</div>

使用 Tailwind 调整大小 ​

🌐 Resizing with Tailwind

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

astro
---
import PartyPopper from '@lucide/astro/icons/party-popper';
---

<PartyPopper class="size-24" />