Appearance

图标尺寸 ​

本教程是 Iconify for React 教程 的一部分。

默认情况下，图标高度设置为 "1em"，图标宽度会根据图标的宽高比动态调整。

这使得只需在样式表或 style 中更改 font-size，即可轻松调整图标大小，就像使用图标字体一样：

jsximport React from 'react';
import { Icon } from '@iconify/react';

export function sizeDemo() {
   return (
       <div>
           <Icon icon="cil:locomotive" />
           <Icon icon="cil:paper-plane" style={{ fontSize: '36px' }} />
           <Icon icon="cil:truck" className="big-icon" />
       </div>
   );
}
csssvg {
   font-size: 24px;
   line-height: 1em;
}

.big-icon {
   font-size: 72px;
}

如果您想在 CSS 中使用 width 和 height 控制图标大小，请参阅下方的 如何移除图标尺寸 部分。

单位 ​

尺寸可以是带单位或不带单位的 string，也可以是 number。如果值为 number 或不带单位的 string，浏览器会将其视为像素。

24px 图标的示例：

jsx// 数字
<Icon icon="mdi:home" height={24} />
// 不带单位的字符串
<Icon icon="mdi:home" height="24" />
// 带单位的字符串
<Icon icon="mdi:home" height="24px" />
// 带单位的字符串，font-size 为 16px
<Icon icon="mdi:home" height="1.5em" />

关键字 "auto" ​

特殊关键字 "auto" 会将尺寸设置为 viewBox 中的值。这使得按照图标的原始设计进行渲染变得十分简单。

只需将其中一个维度设置为 "auto"，另一个维度也会自动设为 "auto"，除非你另行指定。

例如，若 viewBox="0 0 24 24" 且 height 设置为 "auto"，则 height 将被设置为 24。

jsx<Icon icon="mdi:home" height="auto" />

关键字 "none" 和 "unset" ​

特殊关键字 "none" 和 "unset" 会从生成的 SVG 中移除尺寸。

这将生成一个没有尺寸的图标。你应该在 CSS 中设置图标的 width 和 height。

只需将其中一个尺寸设置为 "unset"，另一个尺寸也会自动设置为 "unset"，除非你另行指定。

jsximport React from 'react';
import { Icon } from '@iconify/react';

export function sizeDemo() {
   return (
       <div>
           <Icon
               icon="mdi:home"
               height="none"
               style={{ width: '48px', height: '48px' }}
           />
       </div>
   );
}

这让您可以在 CSS 中分别完全控制每个图标的尺寸，而无需通过 font-size 同时控制它们。

有时您可能还需要在 CSS 中添加 display: block;，以确保图标正常显示。

仅设置宽度或高度 ​

在上面的示例中，所有图标仅使用了 height。

当仅设置一个维度时会发生什么？

  • 如果未设置宽度但设置了高度，则宽度将根据图标的宽高比进行计算。
  • 如果未设置高度但设置了宽度，则高度将根据图标的高宽比进行计算。
  • 如果属性中未设置任何尺寸，则高度将设置为 "1em"，宽度将根据图标的宽高比进行计算。此时图标的表现类似于文本，可通过样式表中的 font-size 来调整其大小。

示例 ​

许多图标是正方形的。对于此类图标，如果您设置了其中一个尺寸，另一个尺寸将具有相同的值。

然而，也有许多图标并非正方形。例如，从图标字体和 Font Awesome 导入的图标。

以下是 fa-regular:address-book 的数据：

json{
   "body": "<path d=\"M436 160c6.6 0 12-5.4 12-12v-40c0-6.6-5.4-12-12-12h-20V48c0-26.5-21.5-48-48-48H48C21.5 0 0 21.5 0 48v416c0 26.5 21.5 48 48 48h320c26.5 0 48-21.5 48-48v-48h20c6.6 0 12-5.4 12-12v-40c0-6.6-5.4-12-12-12h-20v-64h20c6.6 0 12-5.4 12-12v-40c0-6.6-5.4-12-12-12h-20v-64h20zm-68 304H48V48h320v416zM208 256c35.3 0 64-28.7 64-64s-28.7-64-64-64s-64 28.7-64 64s28.7 64 64 64zm-89.6 128h179.2c12.4 0 22.4-8.6 22.4-19.2v-19.2c0-31.8-30.1-57.6-67.2-57.6c-10.8 0-18.7 8-44.8 8c-26.9 0-33.4-8-44.8-8c-37.1 0-67.2 25.8-67.2 57.6v19.2c0 10.6 10 19.2 22.4 19.2z\" fill=\"currentColor\"/>",
   "width": 448,
   "height": 512
}
图标尺寸为 448 x 512

如果您不设置任何尺寸，height 将被设置为 "1em"，而 width 将被设置为 448 / 512 = "0.875em"。但是，小数点后超过两位的数值会进行四舍五入，因此实际的 width 将为 "0.88em"：

html<svg
   xmlns="http://www.w3.org/2000/svg"
   xmlns:xlink="http://www.w3.org/1999/xlink"
   aria-hidden="true"
   focusable="false"
   role="img"
   class="iconify iconify--fa-regular"
   width="0.88em"
   height="1em"
   preserveAspectRatio="xMidYMid meet"
   viewBox="0 0 448 512"
>
   <path d="..." fill="currentColor"></path>
</svg>

如果您将 width 设置为 56，但不设置 height，则 height 将被设置为 56 * 512 / 448 = 64：

html<svg width="56" height="64" ...>...</svg>

如果您同时设置这两个值：将 width 设置为 56，将 height 设置为 128，则数值将按您设置的那样生效（另请参阅下方的 "Alignment" 部分）：

html<svg width="56" height="128" ...>...</svg>

对齐方式 ​

如果你同时设置了 width 和 height，且它们的比例与图标的宽高比不匹配，会发生什么？

例如，如果图标是 24x24，但你将一个维度设置为 40，另一个维度设置为 24，会发生什么？

使用 box-shadow 显示图标尺寸
jsx<Icon icon="jam:info" width="40" height="24" />
<Icon icon="jam:info" width="24" height="40" />

SVG 的行为与其他图像不同。当为其他图像格式设置错误的宽高比时，图像会被拉伸。但对 SVG 进行相同操作时，其边界框会发生改变，图像会在该边界框内对齐。

在上面的示例中，一个图标太宽，另一个图标太高。浏览器会将图标居中，而不是拉伸图标。