refactor: use StarlightIcon type

withastro · Jan 14, 2025 · ba5bc64 · ba5bc64
1 parent b324eca
commit ba5bc64
Show file tree

Hide file tree

Showing 9 changed files with 19 additions and 20 deletions.
diff --git a/docs/src/components/icons-list.astro b/docs/src/components/icons-list.astro
@@ -1,6 +1,6 @@
 ---
 import { Icon } from '@astrojs/starlight/components';
-import { Icons } from '../../../packages/starlight/components/Icons';
+import { Icons, type StarlightIcon } from '../../../packages/starlight/components/Icons';
 
 interface Props {
 	labels?: {
@@ -10,7 +10,7 @@ interface Props {
 
 const { copied = 'Copied!' } = Astro.props.labels ?? {};
 
-const icons = Object.keys(Icons) as (keyof typeof Icons)[];
+const icons = Object.keys(Icons) as StarlightIcon[];
 ---
 
 <div class="icons-grid" data-label-copied={copied}>

diff --git a/packages/starlight/__tests__/remark-rehype/rehype-file-tree.test.ts b/packages/starlight/__tests__/remark-rehype/rehype-file-tree.test.ts
@@ -1,6 +1,6 @@
 import { describe, expect, test } from 'vitest';
 import { processFileTree } from '../../user-components/rehype-file-tree';
-import { Icons } from '../../components/Icons';
+import { Icons, type StarlightIcon } from '../../components/Icons';
 
 describe('validation', () => {
 	test('throws an error with no content', () => {
@@ -176,6 +176,6 @@ function extractFileTree(html: string, stripIcons = true) {
 	return tree;
 }
 
-function expectHtmlToIncludeIcon(html: string, icon: (typeof Icons)[keyof typeof Icons]) {
+function expectHtmlToIncludeIcon(html: string, icon: (typeof Icons)[StarlightIcon]) {
 	return expect(extractFileTree(html, false)).toContain(icon.replace('/>', '>'));
 }
diff --git a/packages/starlight/components/ContentNotice.astro b/packages/starlight/components/ContentNotice.astro
@@ -1,9 +1,9 @@
 ---
-import { Icons } from '../components/Icons';
+import type { StarlightIcon } from '../components/Icons';
 import Icon from '../user-components/Icon.astro';
 
 interface Props {
-	icon: keyof typeof Icons;
+	icon: StarlightIcon;
 	label: string;
 }
 

diff --git a/packages/starlight/schemas/hero.ts b/packages/starlight/schemas/hero.ts
@@ -1,9 +1,8 @@
 import { z } from 'astro/zod';
 import type { SchemaContext } from 'astro:content';
-import { Icons } from '../components/Icons';
+import { Icons, type StarlightIcon } from '../components/Icons';
 
-type IconName = keyof typeof Icons;
-const iconNames = Object.keys(Icons) as [IconName, ...IconName[]];
+const iconNames = Object.keys(Icons) as [StarlightIcon, ...StarlightIcon[]];
 
 export const HeroSchema = ({ image }: SchemaContext) =>
 	z.object({

diff --git a/packages/starlight/user-components/Card.astro b/packages/starlight/user-components/Card.astro
@@ -1,9 +1,9 @@
 ---
 import Icon from './Icon.astro';
-import type { Icons } from '../components/Icons';
+import type { StarlightIcon } from '../components/Icons';
 
 interface Props {
-	icon?: keyof typeof Icons;
+	icon?: StarlightIcon;
 	title: string;
 }
 

diff --git a/packages/starlight/user-components/LinkButton.astro b/packages/starlight/user-components/LinkButton.astro
@@ -1,11 +1,11 @@
 ---
 import type { HTMLAttributes } from 'astro/types';
-import { Icons } from '../components/Icons';
+import type { StarlightIcon } from '../components/Icons';
 import Icon from './Icon.astro';
 
 interface Props extends Omit<HTMLAttributes<'a'>, 'href'> {
 	href: string | URL;
-	icon?: keyof typeof Icons | undefined;
+	icon?: StarlightIcon | undefined;
 	iconPlacement?: 'start' | 'end' | undefined;
 	variant?: 'primary' | 'secondary' | 'minimal';
 }

diff --git a/packages/starlight/user-components/TabItem.astro b/packages/starlight/user-components/TabItem.astro
@@ -1,9 +1,9 @@
 ---
 import { TabItemTagname } from './rehype-tabs';
-import type { Icons } from '../components/Icons';
+import type { StarlightIcon } from '../components/Icons';
 
 interface Props {
-	icon?: keyof typeof Icons;
+	icon?: StarlightIcon;
 	label: string;
 }
 

diff --git a/packages/starlight/user-components/rehype-file-tree.ts b/packages/starlight/user-components/rehype-file-tree.ts
@@ -6,7 +6,7 @@ import { fromHtml } from 'hast-util-from-html';
 import { toString } from 'hast-util-to-string';
 import { rehype } from 'rehype';
 import { CONTINUE, SKIP, visit } from 'unist-util-visit';
-import { Icons } from '../components/Icons';
+import { Icons, type StarlightIcon } from '../components/Icons';
 import { definitions } from './file-tree-icons';
 
 declare module 'vfile' {
@@ -160,7 +160,7 @@ function getFileIcon(fileName: string) {
 	const name = getFileIconName(fileName);
 	if (!name) return defaultFileIcon;
 	if (name in Icons) {
-		const path = Icons[name as keyof typeof Icons];
+		const path = Icons[name as StarlightIcon];
 		return makeSVGIcon(path);
 	}
 	return defaultFileIcon;

diff --git a/packages/starlight/user-components/rehype-tabs.ts b/packages/starlight/user-components/rehype-tabs.ts
@@ -2,13 +2,13 @@ import type { Element } from 'hast';
 import { select } from 'hast-util-select';
 import { rehype } from 'rehype';
 import { CONTINUE, SKIP, visit } from 'unist-util-visit';
-import { Icons } from '../components/Icons';
+import type { StarlightIcon } from '../components/Icons';
 
 interface Panel {
 	panelId: string;
 	tabId: string;
 	label: string;
-	icon?: keyof typeof Icons;
+	icon?: StarlightIcon;
 }
 
 declare module 'vfile' {
@@ -67,7 +67,7 @@ const tabsProcessor = rehype()
 					...ids,
 					label: String(dataLabel),
 				};
-				if (dataIcon) panel.icon = String(dataIcon) as keyof typeof Icons;
+				if (dataIcon) panel.icon = String(dataIcon) as StarlightIcon;
 				file.data.panels?.push(panel);
 
 				// Remove `<TabItem>` props