实验性 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" />

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