diff --git a/docs/src/components/icons-list.astro b/docs/src/components/icons-list.astro
index 9c83c7b12c1..e0e37a98207 100644
--- 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[];
---
diff --git a/packages/starlight/__tests__/remark-rehype/rehype-file-tree.test.ts b/packages/starlight/__tests__/remark-rehype/rehype-file-tree.test.ts
index 36e8cb41793..5c94c7e5c82 100644
--- 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
index 9c354f9313b..fcf4ac3dbcc 100644
--- 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
index 6ecc50df135..86105523596 100644
--- 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
index 6b95e5bf88d..d7ead9c97bf 100644
--- 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
index 3bf68f073d7..3afa2bb65b0 100644
--- 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, '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
index a7dfe634f50..0bd9fa6df54 100644
--- 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
index 1bdb19072a5..72f658a03c1 100644
--- 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
index e7e40ebf9f2..b989a81fda8 100644
--- 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 `` props