test markdown works as well

packages/astro/test/core-image-svg.test.js

@@ -286,5 +286,62 @@ describe('astro:assets - SVG Components', () => {
 				assert.equal($use.length, 1);
 			});
 		});
+
+		describe('markdown', () => {
+			it('Adds the <svg> tag with the definition', async () => {
+				let res = await fixture.fetch('/blog/basic');
+				let html = await res.text();
+				const $ = cheerio.load(html, { xml: true });
+
+				const $svg = $('svg');
+				assert.equal($svg.length, 1);
+				assert.equal($svg.attr('role'), 'img');
+
+				const $symbol = $svg.find('symbol');
+				assert.equal($symbol.length, 1);
+				assert.equal($symbol.attr('id').startsWith('a:'), true);
+
+				const $use = $svg.find('symbol + use');
+				assert.equal($use.length, 1);
+				assert.equal($use.attr('xlink:href').startsWith('#a:'), true);
+				assert.equal($use.attr('xlink:href').slice(1), $symbol.attr('id'));
+			});
+			it('Adds the <svg> tag that uses the definition', async () => {
+				let res = await fixture.fetch('/blog/sprite');
+				let html = await res.text();
+				const $ = cheerio.load(html, { xml: true });
+
+				const $svg = $('svg');
+				assert.equal($svg.length, 2);
+				$svg.each(function() { assert.equal($(this).attr('role'), 'img') });
+
+				const definitionId =  $($svg[0]).find('symbol').attr('id')
+
+				const $reuse = $($svg[1]);
+				const $symbol = $reuse.find('symbol');
+				assert.equal($symbol.length, 0);
+
+				const $use = $reuse.find('use');
+				assert.equal($use.length, 1);
+				assert.equal($use.attr('xlink:href').startsWith('#a:'), true);
+				assert.equal($use.attr('xlink:href').slice(1), definitionId);
+			});
+			it('Adds the <svg> tag that applies props', async () => {
+				let res = await fixture.fetch('/blog/props');
+				let html = await res.text();
+				const $ = cheerio.load(html, { xml: true });
+
+				const $svg = $('svg');
+				assert.equal($svg.length, 1);
+				assert.equal($svg.attr('role'), 'img');
+				assert.equal($svg.attr('height'), '48');
+				assert.equal($svg.attr('width'), '48');
+				assert.equal(!!$svg.attr('size'), false);
+				assert.equal($svg.attr('class'), 'icon');
+				assert.equal($svg.attr('data-icon'), 'github');
+				assert.equal($svg.attr('aria-description'), 'Some description');
+				assert.equal($svg.find('title').text(), 'Find out more on GitHub!');
+			});
+		});
 	});
 });

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

@@ -0,0 +1,6 @@
+import mdx from '@astrojs/mdx';
+import { defineConfig } from 'astro/config';
+
+export default defineConfig({
+  integrations: [mdx()],
+});

packages/astro/test/fixtures/core-image-svg/package.json

@@ -3,7 +3,8 @@
   "version": "0.0.0",
   "private": true,
   "dependencies": {
-    "astro": "workspace:*"
+    "astro": "workspace:*",
+    "@astrojs/mdx": "workspace:*"
   },
   "scripts": {
     "dev": "astro dev"

packages/astro/test/fixtures/core-image-svg/src/content/blog/basic.mdx

@@ -0,0 +1,7 @@
+---
+title: Basic Test
+description: Check that SVG Components work
+---
+import Astro from '~/assets/astro.svg';
+
+<Astro />

packages/astro/test/fixtures/core-image-svg/src/content/blog/props.mdx

@@ -0,0 +1,14 @@
+---
+title: Props Test
+description: Check that SVG Components work
+---
+import Github from '~/assets/github.svg';
+
+<Github
+	size="48"
+	title="Find out more on GitHub!"
+	style={{color: 'red'}}
+	class="icon"
+	data-icon="github"
+	aria-description="Some description"
+/>

packages/astro/test/fixtures/core-image-svg/src/content/blog/sprite.mdx

@@ -0,0 +1,8 @@
+---
+title: Kitchen Sink Test
+description: Check that SVG Components work
+---
+import Astro from '~/assets/astro.svg';
+
+<Astro />
+<Astro />

packages/astro/test/fixtures/core-image-svg/src/content/config.ts

@@ -0,0 +1,10 @@
+import { defineCollection, z } from 'astro:content';
+
+const blog = defineCollection({
+	schema: z.object({
+		title: z.string(),
+		description: z.string().max(60, 'For SEO purposes, keep descriptions short!'),
+	}),
+});
+
+export const collections = { blog };

packages/astro/test/fixtures/core-image-svg/src/pages/blog/[...slug].astro

@@ -0,0 +1,22 @@
+---
+import { getCollection } from 'astro:content';
+
+export async function getStaticPaths() {
+	const blogEntries = await getCollection('blog');
+  return blogEntries.map(entry => ({
+    params: { slug: entry.slug }, props: { entry },
+  }));
+}
+
+const { entry } = Astro.props;
+const { Content } = await entry.render();
+---
+<html>
+	<head>
+		<title>{entry.data.title}</title>
+		<meta name="description" content={entry.data.description} />
+	</head>
+	<body>
+		<Content />
+	</body>
+</html>