实验性 SVG 组件

类型：boolean
默认：false

¥Type: boolean
Default: false

Added in: astro@5.0.0

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

¥This feature allows you to import SVG files and use them as Astro components. By default, Astro will inline the SVG content into your HTML output.

要启用此功能，请在 Astro 配置中将 experimental.svg 设置为 true：

¥To enable this feature, set experimental.svg to true in your Astro config:

{
 experimental: {
   svg: true,
 },
}

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

¥To use this feature, reference the default import of any local .svg file. Since this import is treated as an Astro component, it requires using the same conventions (e.g. capitalization) as when using dynamic tags.

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

<Logo />

SVG 组件属性

¥SVG component attributes

你可以传递诸如 width、height、fill、stroke 之类的属性，以及原生 <svg> 元素接受的任何其他属性。这些属性将自动应用于底层 <svg> 元素。如果原始 .svg 文件中存在属性并传递给组件，则传递给组件的值将覆盖原始值。

¥You can pass props such as width, height, fill, stroke, and any other attribute accepted by the native <svg> element. These attributes will automatically be applied to the underlying <svg> element. If a property is present in the original .svg file and is passed to the component, the value passed to the component will override the original value.

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

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

`size`

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

¥As a convenience, SVG components also accept a size property. size is a shorthand which sets both the width and height properties to the same value.

以下示例使用 Astro 的 size 属性设置相等的宽度和高度 48，而不是分别设置 width 和 height 的 HTML <svg> 属性：

¥The following example uses Astro’s size property to set an equal width and height of 48 instead of setting the HTML <svg> attributes of width and height separately:

<!-- Using the size prop to set both width and height -->
<Logo size={48} />

`mode`

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

¥Add the mode attribute on any SVG component to override your default configured svg.mode technique for handling imported SVG files.

以下示例生成精灵表，而不是将徽标的 SVG 内容内联到 HTML 输出中：

¥The following example generates a sprite sheet instead of inlining the logo’s SVG content into the HTML output:

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

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

experimental.svg.mode

类型：string
默认：'inline'

¥Type: string
Default: 'inline'

Added in: astro@5.0.0

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

¥The default technique for handling imported SVG files. Astro will inline the SVG content into your HTML output if not specified.

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

inline：Astro 将把 SVG 内容内联到你的 HTML 输出中。（默认）
sprite：Astro 将生成包含所有导入的 SVG 文件的精灵表。

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

¥For a complete overview, and to give feedback on this experimental API, see the SVG feature RFC.