feat(fonts): rename component (#13207)

packages/astro/client.d.ts

@@ -54,7 +54,7 @@ declare module 'astro:assets' {
 		inferRemoteSize: typeof import('./dist/assets/utils/index.js').inferRemoteSize;
 		Image: typeof import('./components/Image.astro').default;
 		Picture: typeof import('./components/Picture.astro').default;
-		Fonts: typeof import('./components/Fonts.astro').default;
+		Font: typeof import('./components/Font.astro').default;
 	};
 
 	type ImgAttributes = import('./dist/type-utils.js').WithRequired<

packages/astro/src/assets/fonts/README.md

@@ -8,4 +8,4 @@ The vite plugin orchestrates the fonts logic:
 - In dev, serves a middleware that dynamically loads and caches fonts data
 - In build, download fonts data (from cache if possible)
 
-The `<Fonts />` component is the only aspect not managed in the vite plugin, since it's exported from `astro:assets`.
+The `<Font />` component is the only aspect not managed in the vite plugin, since it's exported from `astro:assets`.

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

@@ -23,8 +23,6 @@ import { AstroError, AstroErrorData } from '../../core/errors/index.js';
 import type { ModuleLoader } from '../../core/module-loader/loader.js';
 import { createViteLoader } from '../../core/module-loader/vite.js';
 
-// TODO: maybe rename Fonts component to Font
-
 interface Options {
 	settings: AstroSettings;
 	sync: boolean;
@@ -32,7 +30,7 @@ interface Options {
 }
 
 /**
- * Preload data is used for links generation inside the <Fonts /> component
+ * Preload data is used for links generation inside the <Font /> component
  */
 type PreloadData = Array<{
 	/**

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

@@ -130,7 +130,7 @@ export default function assets({ settings, sync, logger }: Options): vite.Plugin
 					import { getImage as getImageInternal } from "astro/assets";
 					export { default as Image } from "astro/components/${imageComponentPrefix}Image.astro";
 					export { default as Picture } from "astro/components/${imageComponentPrefix}Picture.astro";
-					export { default as Fonts } from "astro/components/Fonts.astro";
+					export { default as Font } from "astro/components/Font.astro";
 					export { inferRemoteSize } from "astro/assets/utils/inferRemoteSize.js";
 
 					export const imageConfig = ${JSON.stringify({ ...settings.config.image, experimentalResponsiveImages: settings.config.experimental.responsiveImages })};

packages/astro/test/fixtures/fonts/src/pages/index.astro

@@ -1,5 +1,5 @@
 ---
-import { Fonts } from 'astro:assets'
+import { Font } from 'astro:assets'
 ---
 
-<Fonts family='Roboto' />
+<Font family='Roboto' />

packages/astro/test/fixtures/fonts/src/pages/preload.astro

@@ -1,5 +1,5 @@
 ---
-import { Fonts } from 'astro:assets'
+import { Font } from 'astro:assets'
 ---
 
-<Fonts family='Roboto' preload />
+<Font family='Roboto' preload />

packages/astro/test/fonts.test.js

@@ -9,7 +9,7 @@ describe('astro:fonts', () => {
 	/** @type {import('./test-utils.js').DevServer} */
 	let devServer;
 
-	describe('<Fonts /> component', () => {
+	describe('<Font /> component', () => {
 		// TODO: remove once fonts are stabilized
 		describe('Fonts are not enabled', () => {
 			before(async () => {