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>

10 files changed, 50 insertions, 49 deletions

diff --git a/.changeset/young-kids-turn.md b/.changeset/young-kids-turn.md
new file mode 100644
index 000000000..bc3cd0964
--- /dev/null
+++ b/.changeset/young-kids-turn.md
@@ -0,0 +1,36 @@
+---
+'@astrojs/markdoc': minor
+'astro': minor
+---
+
+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.
+
+This feature allows you to import SVG files directly into your Astro project as components and inline them into your HTML.
+
+To use this feature, import an SVG file in your Astro project, passing any common SVG attributes to the imported component.
+
+```astro
+---
+import Logo from './path/to/svg/file.svg';
+---
+<Logo <Logo width={64} height={64} fill="currentColor" />
+```
+
+If you have been waiting for stabilization before using the SVG Components feature, you can now do so.
+
+If you were previously using this feature, please remove the experimental flag from your Astro config:
+
+```diff
+import { defineConfig } from 'astro'
+
+export default defineConfig({
+-  experimental: {
+-    svg: true,
+-  }
+})
+```
+
+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.
+
+
+Please see the [SVG Components guide in docs](https://docs.astro.build/en/guides/images/#svg-components) for more about this feature.
diff --git a/packages/astro/src/assets/utils/node/emitAsset.ts b/packages/astro/src/assets/utils/node/emitAsset.ts
index 3bdadc9ec..e9662701d 100644
--- a/packages/astro/src/assets/utils/node/emitAsset.ts
+++ b/packages/astro/src/assets/utils/node/emitAsset.ts
@@ -14,7 +14,7 @@ type ImageMetadataWithContents = ImageMetadata & { contents?: Buffer };
  *
  * @param {string | undefined} id - The identifier or path of the image file to process. If undefined, the function returns immediately.
  * @param {boolean} _watchMode - **Deprecated**: Indicates if the method is operating in watch mode. This parameter will be removed or updated in the future.
- * @param {boolean} experimentalSvgEnabled - A flag to enable experimental handling of SVG files. Embeds SVG file data if set to true.
+ * @param {boolean} _experimentalSvgEnabled - **Deprecated**: A flag to enable experimental handling of SVG files. Embeds SVG file data if set to true.
  * @param {FileEmitter | undefined} [fileEmitter] - Function for emitting files during the build process. May throw in certain scenarios.
  * @return {Promise<ImageMetadataWithContents | undefined>} Resolves to metadata with optional image contents or `undefined` if processing fails.
  */
@@ -25,7 +25,8 @@ export async function emitESMImage(
 	_watchMode: boolean,
 	// FIX: in Astro 6, this function should not be passed in dev mode at all.
 	// Or rethink the API so that a function that throws isn't passed through.
-	experimentalSvgEnabled: boolean,
+	/** @deprecated */
+	_experimentalSvgEnabled: boolean,
 	fileEmitter?: FileEmitter,
 ): Promise<ImageMetadataWithContents | undefined> {
 	if (!id) {
diff --git a/packages/astro/src/assets/vite-plugin-assets.ts b/packages/astro/src/assets/vite-plugin-assets.ts
index d2e058478..e5cbfa9be 100644
--- a/packages/astro/src/assets/vite-plugin-assets.ts
+++ b/packages/astro/src/assets/vite-plugin-assets.ts
@@ -222,7 +222,7 @@ export default function assets({ fs, settings, sync, logger }: Options): vite.Pl
 					const imageMetadata = await emitESMImage(
 						id,
 						this.meta.watchMode,
-						!!settings.config.experimental.svg,
+						id.endsWith('.svg'),
 						emitFile,
 					);
 
@@ -233,7 +233,7 @@ export default function assets({ fs, settings, sync, logger }: Options): vite.Pl
 						});
 					}
 
-					if (settings.config.experimental.svg && /\.svg$/.test(id)) {
+					if (id.endsWith('.svg')) {
 						const contents = await fs.promises.readFile(imageMetadata.fsPath, { encoding: 'utf8' });
 						// We know that the contents are present, as we only emit this property for SVG files
 						return { code: makeSvgComponent(imageMetadata, contents) };
diff --git a/packages/astro/src/content/content-layer.ts b/packages/astro/src/content/content-layer.ts
index 49e4c5224..10879f2b5 100644
--- a/packages/astro/src/content/content-layer.ts
+++ b/packages/astro/src/content/content-layer.ts
@@ -270,7 +270,8 @@ export class ContentLayer {
 						},
 						collectionWithResolvedSchema,
 						false,
-						!!this.#settings.config.experimental.svg,
+						// FUTURE: Remove in this in v6
+						id.endsWith('.svg'),
 					);
 
 					return parsedData;
diff --git a/packages/astro/src/content/runtime-assets.ts b/packages/astro/src/content/runtime-assets.ts
index 74204e127..7bba50ee1 100644
--- a/packages/astro/src/content/runtime-assets.ts
+++ b/packages/astro/src/content/runtime-assets.ts
@@ -15,6 +15,7 @@ export function createImage(
 			const metadata = (await emitESMImage(
 				resolvedFilePath,
 				pluginContext.meta.watchMode,
+				// FUTURE: Remove in this in v6
 				experimentalSvgEnabled,
 				shouldEmitFile ? pluginContext.emitFile : undefined,
 			)) as OmitBrand<ImageMetadata>;
diff --git a/packages/astro/src/content/vite-plugin-content-imports.ts b/packages/astro/src/content/vite-plugin-content-imports.ts
index 68f9cf706..23a6147ce 100644
--- a/packages/astro/src/content/vite-plugin-content-imports.ts
+++ b/packages/astro/src/content/vite-plugin-content-imports.ts
@@ -245,7 +245,8 @@ async function getContentEntryModule(
 				{ id, collection, _internal, unvalidatedData },
 				collectionConfig,
 				params.shouldEmitFile,
-				!!params.config.experimental.svg,
+				// FUTURE: Remove in this in v6
+				id.endsWith('.svg'),
 				pluginContext,
 			)
 		: unvalidatedData;
@@ -281,7 +282,8 @@ async function getDataEntryModule(
 				{ id, collection, _internal, unvalidatedData },
 				collectionConfig,
 				params.shouldEmitFile,
-				!!params.config.experimental.svg,
+				// FUTURE: Remove in this in v6
+				id.endsWith('.svg'),
 				pluginContext,
 			)
 		: unvalidatedData;
diff --git a/packages/astro/src/core/config/schemas/base.ts b/packages/astro/src/core/config/schemas/base.ts
index 4692c6f9b..5d2c0196a 100644
--- a/packages/astro/src/core/config/schemas/base.ts
+++ b/packages/astro/src/core/config/schemas/base.ts
@@ -95,7 +95,6 @@ export const ASTRO_CONFIG_DEFAULTS = {
 		clientPrerender: false,
 		contentIntellisense: false,
 		responsiveImages: false,
-		svg: false,
 		headingIdCompat: false,
 		preserveScriptOrder: false,
 	},
@@ -463,7 +462,6 @@ export const AstroConfigSchema = z.object({
 				.boolean()
 				.optional()
 				.default(ASTRO_CONFIG_DEFAULTS.experimental.responsiveImages),
-			svg: z.boolean().optional().default(ASTRO_CONFIG_DEFAULTS.experimental.svg),
 			headingIdCompat: z
 				.boolean()
 				.optional()
diff --git a/packages/astro/src/types/public/config.ts b/packages/astro/src/types/public/config.ts
index dcfd99c1a..a2f9d3253 100644
--- a/packages/astro/src/types/public/config.ts
+++ b/packages/astro/src/types/public/config.ts
@@ -2178,42 +2178,6 @@ export interface ViteUserConfig extends OriginalViteUserConfig {
 
 		/**
 		 *
-		 * @name experimental.svg
-		 * @type {boolean}
-		 * @default `undefined`
-		 * @version 5.x
-		 * @description
-		 *
-		 * 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.
-		 *
-		 * To enable this feature, set `experimental.svg` to `true` in your Astro config:
-		 *
-		 * ```js
-		 * {
-		 *   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 `size` attribute to set equal `height` and `width` properties:
-		 *
-		 * ```astro
-		 * ---
-		 * 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](https://github.com/withastro/roadmap/pull/1035).
-		 */
-		svg?: boolean;
-
-		/**
-		 *
 		 * @name experimental.fonts
 		 * @type {FontFamily[]}
 		 * @version 5.7
diff --git a/packages/astro/test/fixtures/core-image-svg/astro.config.mjs b/packages/astro/test/fixtures/core-image-svg/astro.config.mjs
index 6a04ef793..d69e57975 100644
--- a/packages/astro/test/fixtures/core-image-svg/astro.config.mjs
+++ b/packages/astro/test/fixtures/core-image-svg/astro.config.mjs
@@ -3,7 +3,4 @@ import { defineConfig } from 'astro/config';
 
 export default defineConfig({
   integrations: [mdx()],
-	experimental: {
-		svg: true
-	}
 });
diff --git a/packages/integrations/markdoc/src/content-entry-type.ts b/packages/integrations/markdoc/src/content-entry-type.ts
index a41670a7b..5f2c5c155 100644
--- a/packages/integrations/markdoc/src/content-entry-type.ts
+++ b/packages/integrations/markdoc/src/content-entry-type.ts
@@ -318,7 +318,8 @@ async function emitOptimizedImages(
 					const src = await emitESMImage(
 						resolved.id,
 						ctx.pluginContext.meta.watchMode,
-						!!ctx.astroConfig.experimental.svg,
+						// FUTURE: Remove in this in v6
+						resolved.id.endsWith('.svg'),
 						ctx.pluginContext.emitFile,
 					);