图标尺寸
本教程是 Iconify for Svelte 教程 的一部分。
默认情况下，图标高度设置为 "1em"，图标宽度会根据图标的宽高比动态调整。
这使得只需在样式表或 style 中更改 font-size，即可轻松调整图标大小，就像使用图标字体一样：
<script>
import Icon from '@iconify/svelte';
</script>
<style>
/*
Cannot target component in CSS, target SVG
instead using Svelte's :global() function
*/
div :global(svg) {
font-size: 24px;
line-height: 1em;
}
/*
Must use :global() because Svelte cannot assign style to a
component by class name, it can only work with standard HTML tags.
*/
div :global(.big-icon) {
font-size: 72px;
}
</style>
<div>
<Icon icon="cil:locomotive" />
<Icon icon="cil:paper-plane" style="font-size: 36px" />
<Icon icon="cil:truck" class="big-icon" />
</div>
如果您想在 CSS 中使用 width 和 height 控制图标大小，请参阅下方的 如何移除图标尺寸 部分。
单位
尺寸可以是带单位或不带单位的 string，也可以是 number。如果值为 number 或不带单位的 string，浏览器会将其视为像素。
24px 图标的示例：
// 数字
<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。
<Icon icon="mdi:home" height="auto" />关键字 "none" 和 "unset"
特殊关键字 "none" 和 "unset" 会从生成的 SVG 中移除尺寸。
这将生成一个没有尺寸的图标。你应该在 CSS 中设置图标的 width 和 height。
只需将其中一个尺寸设置为 "unset"，另一个尺寸也会自动设置为 "unset"，除非你另行指定。
<script>
import Icon from '@iconify/svelte';
</script>
<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 导入的图标。
以下是 的数据：
{
"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，会发生什么？
<Icon icon="jam:info" width="40" height="24" />
<Icon icon="jam:info" width="24" height="40" />SVG 的行为与其他图像不同。当为其他图像格式设置错误的宽高比时，图像会被拉伸。但对 SVG 进行相同操作时，其边界框会发生改变，图像会在该边界框内对齐。
在上面的示例中，一个图标太宽，另一个图标太高。浏览器会将图标居中，而不是拉伸图标。