Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Add svg component reference #9911

Open
wants to merge 5 commits into
base: 5.0.0-beta
Choose a base branch
from
+31 −0
Open

Add svg component reference #9911

Changes from 1 commit
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
442cfee
feat(svg): add svg component reference
natemoo-re Nov 5, 2024
e155736
Update src/content/docs/en/guides/images.mdx
natemoo-re Nov 10, 2024
04739bc
Update src/content/docs/en/guides/images.mdx
natemoo-re Nov 10, 2024
e4012df
Update src/content/docs/en/guides/images.mdx
natemoo-re Nov 10, 2024
6262d9c
Update src/content/docs/en/guides/images.mdx
natemoo-re Nov 10, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
31 changes: 31 additions & 0 deletions src/content/docs/en/guides/images.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -159,6 +159,37 @@ import myImage from '../assets/my_image.png'; // Image is 1600x900

<ReadMore>See details about [the `<Picture />` component properties](/en/reference/modules/astro-assets/#picture-properties) in the `astro:assets` reference.</ReadMore>

### Inline `.svg` files in the HTML
natemoo-re marked this conversation as resolved.
Show resolved Hide resolved

<p><Since v="5.0.0" /></p>

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).
natemoo-re marked this conversation as resolved.
Show resolved Hide resolved

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

<Logo />
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Question: what happens if no attributes are passed? Is meta data from the .svg file used so that the image is basically presented as is? Are there any required attributes, or will this just work like this?

I'm not sure it's entirely necessary to actually state more here as long as someone can literally just do this and get SOME kind of image (even if not the way they want it to eventually look). Just want to make sure nothing is required, and everything else is an optional tweak of the logo file.

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If nothing is passed it will just use any attributes that are on the SVG file. I think this is the expected functionality.

```

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 `<svg>` element. Properties passed to the component will override duplicate properties that exist in the original `.svg` file.


```astro
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
```astro
```astro
---
import Logo from '../assets/logo.svg';
---

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


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.
natemoo-re marked this conversation as resolved.
Show resolved Hide resolved

**Example:**
natemoo-re marked this conversation as resolved.
Show resolved Hide resolved

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

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
#### `mode`
Add the `mode` attribute on any SVG component to override your default configured `svg.mode` technique for handling imported SVG files.
The following example generates a sprite sheet instead of inlining the logo's SVG content into the HTML output:
```astro
---
import Logo from '../assets/logo.svg';
---
<Logo size={64} mode="sprite" />
```


### Display unprocessed images with the HTML `<img>` tag

Expand Down
Loading