Releases: withastro/astro
@astrojs/[email protected]
@astrojs/[email protected]
@astrojs/[email protected]
@astrojs/[email protected]
[email protected]
Minor Changes
-
#12067
c48916cThanks @stramel! - Adds experimental support for built-in SVG components.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.
To enable this feature, set
experimental.svgtotruein your Astro config:{ experimental: { svg: true, }, }
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
sizeattribute to set equalheightandwidthproperties:--- import Logo from './path/to/svg/file.svg'; --- <Logo size={24} />
For a complete overview, and to give feedback on this experimental API, see the Feature RFC.
-
#12329
8309c61Thanks @florian-lefebvre! - Adds a newastro:routes:resolvedhook to the Integration API. Also update theastro:build:donehook by deprecatingroutesand adding a newassetsmap.When building an integration, you can now get access to routes inside the
astro:routes:resolvedhook:const integration = () => { return { name: 'my-integration', hooks: { 'astro:routes:resolved': ({ routes }) => { console.log(routes); }, }, }; };
This hook runs before
astro:config:done, and whenever a route changes in development.The
routesarray fromastro:build:doneis now deprecated, and exposed properties are now available onastro:routes:resolved, except fordistURL. For this, you can use the newly exposedassetsmap:const integration = () => { + let routes return { name: 'my-integration', hooks: { + 'astro:routes:resolved': (params) => { + routes = params.routes + }, 'astro:build:done': ({ - routes + assets }) => { + for (const route of routes) { + const distURL = assets.get(route.pattern) + if (distURL) { + Object.assign(route, { distURL }) + } + } console.log(routes) } } } } -
#12377
af867f3Thanks @ascorbic! - Adds experimental support for automatic responsive imagesThis feature is experimental and may change in future versions. To enable it, set
experimental.responsiveImagestotruein yourastro.config.mjsfile.{ experimental: { responsiveImages: true, }, }
When this flag is enabled, you can pass a
layoutprop to any<Image />or<Picture />component to create a responsive image. When a layout is set, images have automatically generatedsrcsetandsizesattributes based on the image's dimensions and the layout type. Images withresponsiveandfull-widthlayouts will have styles applied to ensure they resize according to their container.--- import { Image, Picture } from 'astro:assets'; import myImage from '../assets/my_image.png'; --- <Image src={myImage} alt="A description of my image." layout="responsive" width={800} height={600} /> <Picture src={myImage} alt="A description of my image." layout="full-width" formats={['avif', 'webp', 'jpeg']} />
This
<Image />component will generate the following HTML output:<img src="/_astro/my_image.hash3.webp" srcset=" /_astro/my_image.hash1.webp 640w, /_astro/my_image.hash2.webp 750w, /_astro/my_image.hash3.webp 800w, /_astro/my_image.hash4.webp 828w, /_astro/my_image.hash5.webp 1080w, /_astro/my_image.hash6.webp 1280w, /_astro/my_image.hash7.webp 1600w " alt="A description of my image" sizes="(min-width: 800px) 800px, 100vw" loading="lazy" decoding="async" fetchpriority="auto" width="800" height="600" style="--w: 800; --h: 600; --fit: cover; --pos: center;" data-astro-image="responsive" />
Responsive image properties
These are additional properties available to the
<Image />and<Picture />components when responsive images are enabled:layout: The layout type for the image. Can beresponsive,fixed,full-widthornone. Defaults to value ofimage.experimentalLayout.fit: Defines how the image should be cropped if the aspect ratio is changed. Values match those of CSSobject-fit. Defaults tocover, or the value ofimage.experimentalObjectFitif set.position: Defines the position of the image crop if the aspect ratio is changed. Values match those of CSSobject-position. Defaults tocenter, or the value ofimage.experimentalObjectPositionif set.priority: If set, eagerly loads the image. Otherwise images will be lazy-loaded. Use this for your largest above-the-fold image. Defaults tofalse.
Default responsive image settings
You can enable responsive images for all
<Image />and<Picture />components by settingimage.experimentalLayoutwith a default value. This can be overridden by thelayoutprop on each component.Example:
{ image: { // Used for all `<Image />` and `<Picture />` components unless overridden experimentalLayout: 'responsive', }, experimental: { responsiveImages: true, }, }
--- import { Image } from 'astro:assets'; import myImage from '../assets/my_image.png'; --- <Image src={myImage} alt="This will use responsive layout" width={800} height={600} /> <Image src={myImage} alt="This will use full-width layout" layout="full-width" /> <Image src={myImage} alt="This will disable responsive images" layout="none" />
For a complete overview, and to give feedback on this experimental API, see the Responsive Images RFC.
-
#12475
3f02d5fThanks @ascorbic! - Changes the default content config location fromsrc/content/config.*tosrc/content.config.*.The previous location is still supported, and is required if the
legacy.collectionsflag is enabled.