You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Adds experimental support for built-in SVG components.
6
+
7
+
8
+
This feature allows you to import SVG files directly into your Astro project as components. By default, Astro will inline the SVG content into your HTML output.
9
+
10
+
To enable this feature, set `experimental.svg` to `true` in your Astro config:
11
+
12
+
```js
13
+
{
14
+
experimental: {
15
+
svg:true,
16
+
},
17
+
}
18
+
```
19
+
20
+
To use this feature, import an SVG file in your Astro project, passing any common SVG attributes to the imported component. Astro also provides a `size` attribute to set equal `height` and `width` properties:
21
+
22
+
```astro
23
+
---
24
+
import Logo from './path/to/svg/file.svg';
25
+
---
26
+
27
+
<Logo size={24} />
28
+
```
29
+
30
+
For a complete overview, and to give feedback on this experimental API, see the [Feature RFC](https://github.com/withastro/roadmap/pull/1035).
Adds a new `astro:routes:resolved` hook to the Integration API. Also update the `astro:build:done` hook by deprecating `routes` and adding a new `assets` map.
6
+
7
+
When building an integration, you can now get access to routes inside the `astro:routes:resolved` hook:
8
+
9
+
```js
10
+
constintegration= () => {
11
+
return {
12
+
name:'my-integration',
13
+
hooks: {
14
+
'astro:routes:resolved': ({ routes }) => {
15
+
console.log(routes)
16
+
}
17
+
}
18
+
}
19
+
}
20
+
```
21
+
22
+
This hook runs before `astro:config:done`, and whenever a route changes in development.
23
+
24
+
The `routes` array from `astro:build:done` is now deprecated, and exposed properties are now available on `astro:routes:resolved`, except for `distURL`. For this, you can use the newly exposed `assets` map:
Adds experimental support for automatic responsive images
6
+
7
+
This feature is experimental and may change in future versions. To enable it, set `experimental.responsiveImages` to `true` in your `astro.config.mjs` file.
8
+
9
+
```js title=astro.config.mjs
10
+
{
11
+
experimental: {
12
+
responsiveImages:true,
13
+
},
14
+
}
15
+
```
16
+
17
+
When this flag is enabled, you can pass a `layout` prop to any `<Image />` or `<Picture />` component to create a responsive image. When a layout is set, images have automatically generated `srcset` and `sizes` attributes based on the image's dimensions and the layout type. Images with `responsive` and `full-width` layouts will have styles applied to ensure they resize according to their container.
18
+
19
+
```astro
20
+
---
21
+
import { Image, Picture } from 'astro:assets';
22
+
import myImage from '../assets/my_image.png';
23
+
---
24
+
<Image src={myImage} alt="A description of my image." layout='responsive' width={800} height={600} />
25
+
<Picture src={myImage} alt="A description of my image." layout='full-width' formats={['avif', 'webp', 'jpeg']} />
26
+
```
27
+
This `<Image />` component will generate the following HTML output:
These are additional properties available to the `<Image />` and `<Picture />` components when responsive images are enabled:
54
+
55
+
-`layout`: The layout type for the image. Can be `responsive`, `fixed`, `full-width` or `none`. Defaults to value of `image.experimentalLayout`.
56
+
-`fit`: Defines how the image should be cropped if the aspect ratio is changed. Values match those of CSS `object-fit`. Defaults to `cover`, or the value of `image.experimentalObjectFit` if set.
57
+
-`position`: Defines the position of the image crop if the aspect ratio is changed. Values match those of CSS `object-position`. Defaults to `center`, or the value of `image.experimentalObjectPosition` if set.
58
+
-`priority`: If set, eagerly loads the image. Otherwise images will be lazy-loaded. Use this for your largest above-the-fold image. Defaults to `false`.
59
+
60
+
#### Default responsive image settings
61
+
62
+
You can enable responsive images for all `<Image />` and `<Picture />` components by setting `image.experimentalLayout` with a default value. This can be overridden by the `layout` prop on each component.
63
+
64
+
**Example:**
65
+
```js title=astro.config.mjs
66
+
{
67
+
image: {
68
+
// Used for all `<Image />` and `<Picture />` components unless overridden
69
+
experimentalLayout:'responsive',
70
+
},
71
+
experimental: {
72
+
responsiveImages:true,
73
+
},
74
+
}
75
+
```
76
+
77
+
```astro
78
+
---
79
+
import { Image } from 'astro:assets';
80
+
import myImage from '../assets/my_image.png';
81
+
---
82
+
83
+
<Image src={myImage} alt="This will use responsive layout" width={800} height={600} />
84
+
85
+
<Image src={myImage} alt="This will use full-width layout" layout="full-width" />
86
+
87
+
<Image src={myImage} alt="This will disable responsive images" layout="none" />
88
+
```
89
+
90
+
For a complete overview, and to give feedback on this experimental API, see the [Responsive Images RFC](https://github.com/withastro/roadmap/blob/responsive-images/proposals/0053-responsive-images.md).
Changes the generated URL query param from `_astroAction` to `_action` when submitting a form using Actions. This avoids leaking the framework name into the URL bar, which may be considered a security issue.
0 commit comments