Add svg component reference
#9911
Conversation
✅ Deploy Preview for astro-docs-2 ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
There was a problem hiding this comment.
People are going to love this @natemoo-re , thanks for chipping in on the docs for this feature! Some quick comments below! 🎉
| import Logo from '../assets/logo.svg'; | ||
| --- | ||
|
|
||
| <Logo /> |
There was a problem hiding this comment.
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.
There was a problem hiding this comment.
If nothing is passed it will just use any attributes that are on the SVG file. I think this is the expected functionality.
sarah11918
added
add new content
|
Should we also mention the default mode option in the config? |
|
@stramel - yes, we absolutely do need to mention that, too! I had reviewed this before that was in the other PR. When the docs/wording etc. there are confirmed, then we can come back and add here! 🙌 |
Co-authored-by: Sarah Rainsberger <[email protected]>
Co-authored-by: Sarah Rainsberger <[email protected]>
Co-authored-by: Sarah Rainsberger <[email protected]>
Co-authored-by: Sarah Rainsberger <[email protected]>
|
Made the updates that @sarah11918 suggested! Let me know if there's anything else I can do to help get this over the line! |
There was a problem hiding this comment.
Thanks @natemoo-re and @stramel !
I also added the stuff for mode and now I will need your help because the section title title and intro paragraph are for "inlining svg" and ... now they're not always inlined! 😅
I think with my suggestions here this is good (correct whatever is necessary!) EXCEPT that we probably need to now be more general about this section. So, maybe this is "SVG components"? And the intro is more like, "Astro provides support for local .svg files as components..." Does that framing sound right?
| ``` | ||
|
|
||
|
|
||
| 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. |
There was a problem hiding this comment.
| 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. | |
| #### `size` | |
| 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. |
| <!-- Using the size prop to set both width and height --> | ||
| <Logo size={48} /> | ||
| ``` | ||
|
|
There was a problem hiding this comment.
| #### `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" /> | |
| ``` |
| 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 |
There was a problem hiding this comment.
| ```astro | |
| ```astro | |
| --- | |
| import Logo from '../assets/logo.svg'; | |
| --- | |
Description (required)
This PR adds a new section to the Images guide to introduce using
.svgimports as components.For Astro version:
5.x. See astro PR #12067.