diff --git a/src/content/docs/zh-cn/reference/experimental-flags/svg.mdx b/src/content/docs/zh-cn/reference/experimental-flags/svg.mdx new file mode 100644 index 0000000000000..5032d4c295721 --- /dev/null +++ b/src/content/docs/zh-cn/reference/experimental-flags/svg.mdx @@ -0,0 +1,100 @@ +--- +title: 实验性 SVG 组件 +sidebar: + label: SVG 组件 +i18nReady: true +--- + +import Since from '~/components/Since.astro' + +

+ +**类型:** `boolean`
+**默认值:** `false`
+ +

+ +该功能允许你导入 SVG 文件并将其作为 Astro 组件来使用。默认情况下,Astro 会将 SVG 内容内联到你的 HTML 输出中。 + +要启用该功能,请在你的 Astro 配置中将 `experimental.svg` 设置为 `true`。 + + ```js +{ + experimental: { + svg: true, + }, +} +``` + +要使用该功能,请引用任意本地 `.svg` 文件的默认导入。由于此导入会被视为 Astro 组件,因此需要使用与 [使用动态标签](/zh-cn/reference/astro-syntax/#动态标签) 时相同的约定(例如:大写)。 + +```astro +--- +import Logo from './path/to/svg/file.svg'; +--- + + +``` + +## SVG 组件属性 + +你可以传入诸如 `width`、`height`、`fill`、`stroke` 这样的属性,以及任何 [原生的 `` 元素](https://developer.mozilla.org/zh-CN/docs/Web/SVG/Element/svg) 接受的其他属性。这些属性将自动应用于底层的 `` 元素。如果原有的 `.svg` 文件中已有某个将要传递给组件的属性,那么这个原有值将会被传入值覆盖。 + +```astro +--- +import Logo from '../assets/logo.svg'; +--- + + +``` + +### `size` + +为了方便起见,SVG 组件还接受 `size` 属性。 `size` 是将 `width` 和 `height` 属性设置为相同值的简写方式。 + +以下示例使用 Astro 的 `size` 属性将宽度和高度设置为相同的 48,而无需分别设置 HTML `` 属性的 `width` 和 `height`: + +```astro + + +``` + +### `mode` + +在任意 SVG 组件上添加 `mode` 属性,以覆盖你默认配置的 `svg.mode` 技术来处理导入的 SVG 文件。 + +以下示例生成了一个精灵序列图,而不是将图标的 SVG 内容内联到 HTML 输出中: + +```astro +--- +import Logo from '../assets/logo.svg'; +--- + + +``` + +## experimental.svg.mode + +

+ +**类型:** `string`
+**默认值:** `'inline'`
+ +

+ +处理导入的 SVG 文件的默认技术。如果未指定,Astro 会将 SVG 内容内联到 HTML 输出中。 + + ```js +{ + experimental: { + svg: { + mode: 'sprite', + } + }, +} +``` + +- `inline`:Astro 会将 SVG 内容内联到你的 HTML 输出中。(默认) +- `sprite`:Astro 将生成包含所有导入的 SVG 文件的精灵序列图。 + +有关完整概述以及对此实验性 API 的反馈,请参阅 [SVG 功能 RFC](https://github.com/withastro/roadmap/pull/1035)。