尺寸

默认情况下，所有图标的尺寸都是 24px x 24px。你可以通过 width、height 属性或 CSS 调整图标尺寸。

使用 `width` 和 `height` 属性调整图标尺寸

<!doctype html>
<html>
  <body>
    <i
      data-ycloud="landmark"
      width="64"
      height="64"
    ></i>

    <script src="index.js"></script>
  </body>
</html>

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 文档。

import { createIcons, PartyPopper } from '@ycloud-web/icons';
import './styles.css';

createIcons({
  icons: {
    PartyPopper,
  },
});

Open Sandbox

尺寸 ​

使用 width 和 height 属性调整图标尺寸 ​

通过 CSS 调整图标尺寸 ​

根据字体大小动态调整图标尺寸 ​

使用 Tailwind 调整尺寸 ​

尺寸

使用 `width` 和 `height` 属性调整图标尺寸

通过 CSS 调整图标尺寸

根据字体大小动态调整图标尺寸

使用 Tailwind 调整尺寸