图标尺寸
本教程是 Iconify Icon Web 组件教程 的一部分。
默认情况下，图标高度设置为 "1em"，图标宽度会根据图标的宽高比动态调整。
这使得只需在样式表或 style 中更改 font-size，即可轻松调整图标大小，就像使用图标字体一样：
<p>
<iconify-icon icon="cil:locomotive"></iconify-icon>
<iconify-icon
class="iconify"
icon="cil:paper-plane"
style="font-size: 36px"
></iconify-icon>
<iconify-icon class="big-icon" icon="cil:truck"></iconify-icon>
</p>p {
font-size: 24px;
}
.big-icon {
font-size: 72px;
}如果你想在 CSS 中使用 width 和 height 控制图标尺寸，请参阅下方的 如何移除图标尺寸 部分。
单位
width 和 height 均可作为属性和特性使用。
24px 图标的示例：
<iconify-icon icon="mdi:home" height="24"></iconify-icon>
<iconify-icon icon="mdi:home" height="24px"></iconify-icon>
<iconify-icon
icon="mdi:home"
style="font-size: 16px;"
height="1.5em"
></iconify-icon>关键字 "auto"
特殊关键字 "auto" 会将尺寸设置为 viewBox 中的值。这使得按照图标的原始设计进行渲染变得十分简单。
只需将其中一个维度设置为 "auto"，另一个维度也会自动设为 "auto"，除非你另行指定。
例如，若 viewBox="0 0 24 24" 且 height 设置为 "auto"，则 height 将被设置为 24。
<iconify-icon icon="mdi:home" height="auto"></iconify-icon>关键字 "none" 和 "unset"
特殊关键字 "none" 和 "unset" 会从生成的 SVG 中移除尺寸。
这将生成一个没有尺寸的图标。你应该在 CSS 中设置图标的 width 和 height。
只需将其中一个尺寸设置为 "unset"，另一个尺寸也会自动设置为 "unset"，除非你另行指定。
<iconify-icon
icon="mdi:home"
height="none"
style="width: 48px; height: 48px"
></iconify-icon>这让您可以在 CSS 中分别完全控制每个图标的尺寸，而无需通过 font-size 同时控制它们。
有时您可能还需要在 CSS 中添加 display: block;，以确保图标正常显示。
仅设置宽度或高度
在上面的示例中，所有图标仅使用了 height。
当仅设置一个维度时会发生什么？
- 如果未设置宽度但设置了高度，则宽度将根据图标的宽高比进行计算。
- 如果未设置高度但设置了宽度，则高度将根据图标的高宽比进行计算。
- 如果属性中未设置任何尺寸，则高度将设置为 "1em"，宽度将根据图标的宽高比进行计算。此时图标的表现类似于文本，可通过样式表中的 font-size 来调整其大小。
示例
许多图标是正方形的。对于此类图标，如果您设置了其中一个尺寸，另一个尺寸将具有相同的值。
然而，也有许多图标并非正方形。例如，从图标字体和 Font Awesome 导入的图标。
以下是 fa-regular:address-book 的数据：
{
"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
}如果您不设置任何尺寸，height 将被设置为 "1em"，而 width 将被设置为 448 / 512 = "0.875em"。但是，小数点后超过两位的数值会进行四舍五入，因此实际的 width 将为 "0.88em"：
<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：
<svg width="56" height="64" ...>...</svg>如果您同时设置这两个值：将 width 设置为 56，将 height 设置为 128，则数值将按您设置的那样生效（另请参阅下方的 "Alignment" 部分）：
<svg width="56" height="128" ...>...</svg>对齐方式
如果你同时设置了 width 和 height，且它们的比例与图标的宽高比不匹配，会发生什么？
例如，如果图标是 24x24，但你将一个维度设置为 40，另一个维度设置为 24，会发生什么？
<iconify-icon icon="jam:info" width="40" height="24"></iconify-icon>
<iconify-icon icon="jam:info" width="24" height="40"></iconify-icon>SVG 的行为与其他图像不同。当为其他图像格式设置错误的宽高比时，图像会被拉伸。但对 SVG 进行相同操作时，其边界框会发生改变，图像会在该边界框内对齐。
在上面的示例中，一个图标太宽，另一个图标太高。浏览器会将图标居中，而不是拉伸图标。
你可以使用 preserveAspectRatio 属性控制对齐方式。默认值为 "xMidYMid slice"。
裁剪
浏览器不仅可以在图标周围添加空白以使其适应边界框，还可以裁剪掉无法适应的部分。
要裁剪图标的部分区域，请向图标添加 preserveAspectRatio="xMidYMid slice"：
<iconify-icon
icon="jam:info"
width="40"
height="24"
preserveAspectRatio="xMidYMid slice"
></iconify-icon>
<iconify-icon
icon="jam:info"
width="24"
height="40"
preserveAspectRatio="xMidYMid slice"
></iconify-icon>水平对齐
当...
- 图标过宽时...
- 图标过高且启用了裁剪（slice）时...
...你可以水平对齐图标。
要水平对齐图标，请将 preserveAspectRatio 中的 "xMid" 更改为 "xMin" 或 "xMax"：
对齐宽图标的示例：
<iconify-icon
icon="jam:info"
width="40"
height="24"
preserveAspectRatio="xMinYMid meet"
></iconify-icon>
<iconify-icon
icon="jam:info"
width="40"
height="24"
preserveAspectRatio="xMidYMid meet"
></iconify-icon>
<iconify-icon
icon="jam:info"
width="40"
height="24"
preserveAspectRatio="xMaxYMid meet"
></iconify-icon>启用裁剪时对齐高图标的示例：
<iconify-icon
icon="jam:info"
width="24"
height="40"
preserveAspectRatio="xMinYMid slice"
></iconify-icon>
<iconify-icon
icon="jam:info"
width="24"
height="40"
preserveAspectRatio="xMidYMid slice"
></iconify-icon>
<iconify-icon
icon="jam:info"
width="24"
height="40"
preserveAspectRatio="xMaxYMid slice"
></iconify-icon>垂直对齐
当...
- 图标过高时...
- 图标过宽且启用了裁剪（slice）时...
...你可以垂直对齐图标。
要垂直对齐图标，请将 preserveAspectRatio 中的 "YMid" 更改为 "YMin" 或 "YMax"：
对齐高图标的示例：
<iconify-icon
icon="jam:info"
width="24"
height="40"
preserveAspectRatio="xMidYMin meet"
></iconify-icon>
<iconify-icon
icon="jam:info"
width="24"
height="40"
preserveAspectRatio="xMidYMid meet"
></iconify-icon>
<iconify-icon
icon="jam:info"
width="24"
height="40"
preserveAspectRatio="xMidYMax meet"
></iconify-icon>启用裁剪时对齐宽图标的示例：
<iconify-icon
icon="jam:info"
width="40"
height="24"
preserveAspectRatio="xMidYMin slice"
></iconify-icon>
<iconify-icon
icon="jam:info"
width="40"
height="24"
preserveAspectRatio="xMidYMid slice"
></iconify-icon>
<iconify-icon
icon="jam:info"
width="40"
height="24"
preserveAspectRatio="xMidYMax slice"
></iconify-icon>垂直与水平对齐
你可以同时为图标添加水平和垂直对齐。
其中一种对齐方式将不会生效。例如，如果图标过高，水平对齐将被忽略，因为图标已经同时与左侧和右侧对齐。
<iconify-icon
icon="jam:info"
width="40"
height="24"
preserveAspectRatio="xMinYMin meet"
></iconify-icon>
<iconify-icon
icon="jam:info"
width="40"
height="24"
preserveAspectRatio="xMinYMin slice"
></iconify-icon>