From 442cfeeb5d952a859ca6d64e63431a0d85416880 Mon Sep 17 00:00:00 2001 From: Nate Moore Date: Mon, 4 Nov 2024 22:39:36 -0600 Subject: [PATCH 1/5] feat(svg): add svg component reference --- src/content/docs/en/guides/images.mdx | 31 +++++++++++++++++++++++++++ 1 file changed, 31 insertions(+) diff --git a/src/content/docs/en/guides/images.mdx b/src/content/docs/en/guides/images.mdx index ddd08039efc36..7844496c3a353 100644 --- a/src/content/docs/en/guides/images.mdx +++ b/src/content/docs/en/guides/images.mdx @@ -159,6 +159,37 @@ import myImage from '../assets/my_image.png'; // Image is 1600x900 See details about [the `` component properties](/en/reference/modules/astro-assets/#picture-properties) in the `astro:assets` reference. +### Inline `.svg` files in the HTML + +

+ +To inline local `.svg` files directly in your HTML, SVG files can be imported and used like any other [Astro components](/en/basics/astro-components/#component-based-design). + +```astro +--- +import Logo from '../assets/logo.svg'; +--- + + +``` + +You can set attributes such as `width`, `height`, `fill`, `stroke`, and other common SVG attributes on the imported component. These attributes will automatically be applied to the underlying `` element. Properties passed to the component will override duplicate properties that exist in the original `.svg` file. + + +```astro + +``` + + +As a convenience, SVG components accept a `size` property. `size` is a shorthand which sets both the `width` and `height` properties to the same value. + +**Example:** + +```astro + + +``` + ### Display unprocessed images with the HTML `` tag From e155736b10808ad05d768d907b73eb7eb761a58f Mon Sep 17 00:00:00 2001 From: Nate Moore Date: Sun, 10 Nov 2024 10:35:12 -0600 Subject: [PATCH 2/5] Update src/content/docs/en/guides/images.mdx Co-authored-by: Sarah Rainsberger --- src/content/docs/en/guides/images.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/docs/en/guides/images.mdx b/src/content/docs/en/guides/images.mdx index 7844496c3a353..15cc4d4910d97 100644 --- a/src/content/docs/en/guides/images.mdx +++ b/src/content/docs/en/guides/images.mdx @@ -163,7 +163,7 @@ import myImage from '../assets/my_image.png'; // Image is 1600x900

-To inline local `.svg` files directly in your HTML, SVG files can be imported and used like any other [Astro components](/en/basics/astro-components/#component-based-design). +To inline local `.svg` files directly in your HTML, import the SVG file to use as an Astro component. This process assigns an `` HTML tag to a component, and requires the same conventions (e.g. capitalization) as when [using dynamic tags](/en/basics/astro-syntax/#dynamic-tags). ```astro --- From 04739bce46a8e1a256cc0a0217dfa942bf8e2d10 Mon Sep 17 00:00:00 2001 From: Nate Moore Date: Sun, 10 Nov 2024 10:35:20 -0600 Subject: [PATCH 3/5] Update src/content/docs/en/guides/images.mdx Co-authored-by: Sarah Rainsberger --- src/content/docs/en/guides/images.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/docs/en/guides/images.mdx b/src/content/docs/en/guides/images.mdx index 15cc4d4910d97..2a58d61710a0f 100644 --- a/src/content/docs/en/guides/images.mdx +++ b/src/content/docs/en/guides/images.mdx @@ -181,7 +181,7 @@ You can set attributes such as `width`, `height`, `fill`, `stroke`, and other co ``` -As a convenience, SVG components accept a `size` property. `size` is a shorthand which sets both the `width` and `height` properties to the same value. +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. **Example:** From e4012df59d521e87f3abd2678af0d3f38c7ee3b1 Mon Sep 17 00:00:00 2001 From: Nate Moore Date: Sun, 10 Nov 2024 10:35:35 -0600 Subject: [PATCH 4/5] Update src/content/docs/en/guides/images.mdx Co-authored-by: Sarah Rainsberger --- src/content/docs/en/guides/images.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/docs/en/guides/images.mdx b/src/content/docs/en/guides/images.mdx index 2a58d61710a0f..2d72d3a0686d8 100644 --- a/src/content/docs/en/guides/images.mdx +++ b/src/content/docs/en/guides/images.mdx @@ -183,7 +183,7 @@ You can set attributes such as `width`, `height`, `fill`, `stroke`, and other co 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. -**Example:** +The following example uses Astro's `size` property to set an equal width and height of 48 instead of setting the HTML `` attributes of `width` and `height` separately: ```astro From 6262d9ce08b13ad0cefee6d0fda69701a8b0b9bc Mon Sep 17 00:00:00 2001 From: Nate Moore Date: Sun, 10 Nov 2024 10:36:17 -0600 Subject: [PATCH 5/5] Update src/content/docs/en/guides/images.mdx Co-authored-by: Sarah Rainsberger --- src/content/docs/en/guides/images.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/docs/en/guides/images.mdx b/src/content/docs/en/guides/images.mdx index 2d72d3a0686d8..35525a6f34a74 100644 --- a/src/content/docs/en/guides/images.mdx +++ b/src/content/docs/en/guides/images.mdx @@ -159,7 +159,7 @@ import myImage from '../assets/my_image.png'; // Image is 1600x900 See details about [the `` component properties](/en/reference/modules/astro-assets/#picture-properties) in the `astro:assets` reference. -### Inline `.svg` files in the HTML +### Inline `.svg` files in the HTML (experimental)