实验性 SVG 组件

类型： boolean
默认值： false

添加于： astro@5.0.0

该功能允许你导入 SVG 文件并将其作为 Astro 组件来使用。默认情况下，Astro 会将 SVG 内容内联到你的 HTML 输出中。

要启用该功能，请在你的 Astro 配置中将 experimental.svg 设置为 true。

{
 experimental: {
   svg: true,
 },
}

要使用该功能，请引用任意本地 .svg 文件的默认导入。由于此导入会被视为 Astro 组件，因此需要使用与使用动态标签时相同的约定（例如：大写）。

---
import Logo from './path/to/svg/file.svg';
---

<Logo />

SVG 组件属性

你可以传入诸如 width、height、fill、stroke 这样的属性，以及任何原生的 <svg> 元素接受的其他属性。这些属性将自动应用于底层的 <svg> 元素。如果原有的 .svg 文件中已有某个将要传递给组件的属性，那么这个原有值将会被传入值覆盖。

---
import Logo from '../assets/logo.svg';
---

<Logo width={64} height={64} fill="currentColor" />

为了方便起见，SVG 组件还接受 size 属性。 size 是将 width 和 height 属性设置为相同值的简写方式。

以下示例使用 Astro 的 size 属性将宽度和高度设置为相同的 48，而无需分别设置 HTML <svg> 属性的 width 和 height：

<!-- 使用 size 属性来设置相同的宽度和高度 -->
<Logo size={48} />

在任意 SVG 组件上添加 mode 属性，以覆盖你默认配置的 svg.mode 技术来处理导入的 SVG 文件。

以下示例生成了一个精灵序列图，而不是将图标的 SVG 内容内联到 HTML 输出中：

---
import Logo from '../assets/logo.svg';
---

<Logo size={64} mode="sprite" />

类型： string
默认值： 'inline'

添加于： astro@5.0.0

处理导入的 SVG 文件的默认技术。如果未指定，Astro 会将 SVG 内容内联到 HTML 输出中。

{
 experimental: {
   svg: {
     mode: 'sprite',
   }
 },
}

有关完整概述以及对此实验性 API 的反馈，请参阅 SVG 功能 RFC。