Lucide V1 发布了！🚀
你现在浏览的是 v1 站点，如需查看 v0，请前往 v0 站点

Lucide 中文文档

Appearance

尺寸调整 ​

默认情况下，所有图标的大小为 24px 乘 24px。可以使用 width 和 height 属性或通过 CSS 调整大小。

使用 width 和 height 属性调整图标大小 ​

<!DOCTYPE html>
<html>
  <body>
    <i data-lucide="landmark" width="64" height="64"></i>

    <script src="index.js">
    </script>
  </body>
</html>
Open on CodeSandboxOpen Sandbox

通过 CSS 调整图标大小 ​

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

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

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

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

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

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

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

使用 Tailwind 调整大小 ​

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

import { createIcons, PartyPopper } from 'lucide/dist/cjs/lucide';
import "./styles.css";

createIcons({
  icons: {
    PartyPopper,
  }
});
Open on CodeSandboxOpen Sandbox