尺寸

¥Sizing

默认情况下，所有图标的大小均为 24px x 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

import { Landmark } from "lucide-react";

function App() {
  return (
    <div className="app">
      <Landmark size={64} />
    </div>
  );
}

export default App;

Open Sandbox

通过 CSS 调整图标大小

¥Adjusting the icon size via CSS

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

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

.my-beer-icon {
  /* Change this! */
  width: 64px;
  height: 64px;
}

Open Sandbox

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

¥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.

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

.text-wrapper {
  /* Change this! */
  font-size: 96px;

  /* layout stuff */
  display: flex;
  gap: 0.25em;
  align-items: center;
}

Open Sandbox

使用 Tailwind 调整大小

¥Resizing with Tailwind

h-* 和 w-* 实用程序可用于调整图标的大小。

¥h-* and w-* utilities can be used to adjust the size of the icon.

import { PartyPopper } from "lucide-react";

function App() {
  return (
    <div>
      <PartyPopper className="w-24 h-24" />
    </div>
  );
}

export default App;

Open Sandbox