Appearance

图标尺寸 ​

本教程是 Iconify SVG 框架教程 的一部分。

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

这使得更改图标尺寸变得非常容易，只需在样式表或内联样式中更改 font-size 即可，就像使用图标字体一样：

html<span class="iconify" data-icon="cil:locomotive"></span>
<span
   class="iconify"
   data-icon="cil:paper-plane"
   style="font-size: 36px;"
></span>
<span class="iconify big-icon" data-icon="cil:truck"></span>
css.iconify {
   font-size: 24px;
   line-height: 1em;
}

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

data- 属性 ​

你也可以通过使用 data-width 和 data-height 属性来设置尺寸。此时 font-size 将不会对图标产生影响，除非你将高度设置为相对于 font-size 的单位，例如 "em"。

html<span class="iconify" data-icon="cil:locomotive" data-height="24"></span>
<span
   class="iconify"
   data-icon="cil:paper-plane"
   data-height="2em"
   style="font-size: 18px;"
></span>
<span class="iconify" data-icon="cil:truck" data-width="72"></span>

在此示例中，第一个图标的高度为 24px，第二个图标的高度为 36px（2 * 18px），第三个图标的高度为 72px。

关键字 "none" 和 "unset" ​

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

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

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

html<span
   class="iconify"
   data-icon="mdi:home"
   data-height="none"
   style="width: 48px; height: 48px"
></span>

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

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

这些关键字只能与 data-width 和 data-height 配合使用。如果将它们设置为 width 或 height，则不会生效。

仅设置宽度或高度 ​

在上面的示例中，所有图标都仅使用了 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，会发生什么？

Using box-shadow to show icon dimensions
html<span
   class="iconify"
   data-icon="jam:info"
   data-width="40"
   data-height="24"
></span>
<span
   class="iconify"
   data-icon="jam:info"
   data-width="24"
   data-height="40"
></span>

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

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