Skip to content

Commit 406501a

Browse files
stramelsarah11918ematipico
authored
feat: unflag svg component feature (#13578)
Co-authored-by: Sarah Rainsberger <5098874+sarah11918@users.noreply.github.com> Co-authored-by: sarah11918 <5098874+sarah11918@users.noreply.github.com> Co-authored-by: ematipico <602478+ematipico@users.noreply.github.com>
1 parent 93470a1 commit 406501a

10 files changed

Lines changed: 50 additions & 49 deletions

File tree

‎.changeset/young-kids-turn.md‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
---
2+
'@astrojs/markdoc': minor
3+
'astro': minor
4+
---
5+
6+
The SVG import feature introduced behind a flag in [v5.0.0](https://github.com/withastro/astro/blob/main/packages/astro/CHANGELOG.md#500) is no longer experimental and is available for general use.
7+
8+
This feature allows you to import SVG files directly into your Astro project as components and inline them into your HTML.
9+
10+
To use this feature, import an SVG file in your Astro project, passing any common SVG attributes to the imported component.
11+
12+
```astro
13+
---
14+
import Logo from './path/to/svg/file.svg';
15+
---
16+
<Logo <Logo width={64} height={64} fill="currentColor" />
17+
```
18+
19+
If you have been waiting for stabilization before using the SVG Components feature, you can now do so.
20+
21+
If you were previously using this feature, please remove the experimental flag from your Astro config:
22+
23+
```diff
24+
import { defineConfig } from 'astro'
25+
26+
export default defineConfig({
27+
- experimental: {
28+
- svg: true,
29+
- }
30+
})
31+
```
32+
33+
Additionally, a few features that were available during the experimental stage were removed in a previous release. Please see [the v5.6.0 changelog](https://github.com/withastro/astro/blob/main/packages/astro/CHANGELOG.md#560) for details if you have not yet already updated your project code for the experimental feature accordingly.
34+
35+
36+
Please see the [SVG Components guide in docs](https://docs.astro.build/en/guides/images/#svg-components) for more about this feature.

‎packages/astro/src/assets/utils/node/emitAsset.ts‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ type ImageMetadataWithContents = ImageMetadata & { contents?: Buffer };
1414
*
1515
* @param {string | undefined} id - The identifier or path of the image file to process. If undefined, the function returns immediately.
1616
* @param {boolean} _watchMode - **Deprecated**: Indicates if the method is operating in watch mode. This parameter will be removed or updated in the future.
17-
* @param {boolean} experimentalSvgEnabled - A flag to enable experimental handling of SVG files. Embeds SVG file data if set to true.
17+
* @param {boolean} _experimentalSvgEnabled - **Deprecated**: A flag to enable experimental handling of SVG files. Embeds SVG file data if set to true.
1818
* @param {FileEmitter | undefined} [fileEmitter] - Function for emitting files during the build process. May throw in certain scenarios.
1919
* @return {Promise<ImageMetadataWithContents | undefined>} Resolves to metadata with optional image contents or `undefined` if processing fails.
2020
*/
@@ -25,7 +25,8 @@ export async function emitESMImage(
2525
_watchMode: boolean,
2626
// FIX: in Astro 6, this function should not be passed in dev mode at all.
2727
// Or rethink the API so that a function that throws isn't passed through.
28-
experimentalSvgEnabled: boolean,
28+
/** @deprecated */
29+
_experimentalSvgEnabled: boolean,
2930
fileEmitter?: FileEmitter,
3031
): Promise<ImageMetadataWithContents | undefined> {
3132
if (!id) {

‎packages/astro/src/assets/vite-plugin-assets.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -222,7 +222,7 @@ export default function assets({ fs, settings, sync, logger }: Options): vite.Pl
222222
const imageMetadata = await emitESMImage(
223223
id,
224224
this.meta.watchMode,
225-
!!settings.config.experimental.svg,
225+
id.endsWith('.svg'),
226226
emitFile,
227227
);
228228

@@ -233,7 +233,7 @@ export default function assets({ fs, settings, sync, logger }: Options): vite.Pl
233233
});
234234
}
235235

236-
if (settings.config.experimental.svg && /\.svg$/.test(id)) {
236+
if (id.endsWith('.svg')) {
237237
const contents = await fs.promises.readFile(imageMetadata.fsPath, { encoding: 'utf8' });
238238
// We know that the contents are present, as we only emit this property for SVG files
239239
return { code: makeSvgComponent(imageMetadata, contents) };

‎packages/astro/src/content/content-layer.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -270,7 +270,8 @@ export class ContentLayer {
270270
},
271271
collectionWithResolvedSchema,
272272
false,
273-
!!this.#settings.config.experimental.svg,
273+
// FUTURE: Remove in this in v6
274+
id.endsWith('.svg'),
274275
);
275276

276277
return parsedData;

‎packages/astro/src/content/runtime-assets.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ export function createImage(
1515
const metadata = (await emitESMImage(
1616
resolvedFilePath,
1717
pluginContext.meta.watchMode,
18+
// FUTURE: Remove in this in v6
1819
experimentalSvgEnabled,
1920
shouldEmitFile ? pluginContext.emitFile : undefined,
2021
)) as OmitBrand<ImageMetadata>;

‎packages/astro/src/content/vite-plugin-content-imports.ts‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -245,7 +245,8 @@ async function getContentEntryModule(
245245
{ id, collection, _internal, unvalidatedData },
246246
collectionConfig,
247247
params.shouldEmitFile,
248-
!!params.config.experimental.svg,
248+
// FUTURE: Remove in this in v6
249+
id.endsWith('.svg'),
249250
pluginContext,
250251
)
251252
: unvalidatedData;
@@ -281,7 +282,8 @@ async function getDataEntryModule(
281282
{ id, collection, _internal, unvalidatedData },
282283
collectionConfig,
283284
params.shouldEmitFile,
284-
!!params.config.experimental.svg,
285+
// FUTURE: Remove in this in v6
286+
id.endsWith('.svg'),
285287
pluginContext,
286288
)
287289
: unvalidatedData;

‎packages/astro/src/core/config/schemas/base.ts‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -95,7 +95,6 @@ export const ASTRO_CONFIG_DEFAULTS = {
9595
clientPrerender: false,
9696
contentIntellisense: false,
9797
responsiveImages: false,
98-
svg: false,
9998
headingIdCompat: false,
10099
preserveScriptOrder: false,
101100
},
@@ -463,7 +462,6 @@ export const AstroConfigSchema = z.object({
463462
.boolean()
464463
.optional()
465464
.default(ASTRO_CONFIG_DEFAULTS.experimental.responsiveImages),
466-
svg: z.boolean().optional().default(ASTRO_CONFIG_DEFAULTS.experimental.svg),
467465
headingIdCompat: z
468466
.boolean()
469467
.optional()

‎packages/astro/src/types/public/config.ts‎

Lines changed: 0 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -2176,42 +2176,6 @@ export interface ViteUserConfig extends OriginalViteUserConfig {
21762176

21772177
responsiveImages?: boolean;
21782178

2179-
/**
2180-
*
2181-
* @name experimental.svg
2182-
* @type {boolean}
2183-
* @default `undefined`
2184-
* @version 5.x
2185-
* @description
2186-
*
2187-
* This feature allows you to import SVG files directly into your Astro project. By default, Astro will inline the SVG content into your HTML output.
2188-
*
2189-
* To enable this feature, set `experimental.svg` to `true` in your Astro config:
2190-
*
2191-
* ```js
2192-
* {
2193-
* experimental: {
2194-
* svg: true,
2195-
* },
2196-
* }
2197-
* ```
2198-
*
2199-
* To use this feature, import an SVG file in your Astro project, passing any common SVG attributes to the imported component.
2200-
* Astro also provides a `size` attribute to set equal `height` and `width` properties:
2201-
*
2202-
* ```astro
2203-
* ---
2204-
* import Logo from './path/to/svg/file.svg';
2205-
* ---
2206-
*
2207-
* <Logo size={24} />
2208-
* ```
2209-
*
2210-
* For a complete overview, and to give feedback on this experimental API,
2211-
* see the [Feature RFC](https://github.com/withastro/roadmap/pull/1035).
2212-
*/
2213-
svg?: boolean;
2214-
22152179
/**
22162180
*
22172181
* @name experimental.fonts

‎packages/astro/test/fixtures/core-image-svg/astro.config.mjs‎

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,4 @@ import { defineConfig } from 'astro/config';
33

44
export default defineConfig({
55
integrations: [mdx()],
6-
experimental: {
7-
svg: true
8-
}
96
});

‎packages/integrations/markdoc/src/content-entry-type.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -318,7 +318,8 @@ async function emitOptimizedImages(
318318
const src = await emitESMImage(
319319
resolved.id,
320320
ctx.pluginContext.meta.watchMode,
321-
!!ctx.astroConfig.experimental.svg,
321+
// FUTURE: Remove in this in v6
322+
resolved.id.endsWith('.svg'),
322323
ctx.pluginContext.emitFile,
323324
);
324325

0 commit comments

Comments
 (0)