Expose TypeDoc's icons for use by themes

Resolves #1978.

Author: Gerrit0

CHANGELOG.md

@@ -3,6 +3,7 @@
 ### Features
 
 -   The `DEBUG_SEARCH_WEIGHTS` global variable can now be set on `window` to add search scoring information in the search results.
+-   TypeDoc's icons are now available on `DefaultThemeRenderContext.icons` for use/modification by themes.
 
 ## v0.23.4 (2022-07-02)
 

src/lib/output/themes/default/DefaultThemeRenderContext.ts

@@ -10,6 +10,7 @@ import { comment } from "./partials/comment";
 import { footer } from "./partials/footer";
 import { header } from "./partials/header";
 import { hierarchy } from "./partials/hierarchy";
+import { icons } from "./partials/icon";
 import { member } from "./partials/member";
 import { memberDeclaration } from "./partials/member.declaration";
 import { memberGetterSetter } from "./partials/member.getterSetter";
@@ -40,6 +41,8 @@ export class DefaultThemeRenderContext {
         this.options = options;
     }
 
+    icons = icons;
+
     hook = (name: keyof RendererHooks) =>
         this.theme.owner.hooks.emit(name, this);
 

src/lib/output/themes/default/partials/anchor-icon.tsx

@@ -1,8 +1,8 @@
 import { JSX } from "../../../../utils";
-import { icons } from "./icon";
+import type { DefaultThemeRenderContext } from "../DefaultThemeRenderContext";
 
-export const anchorIcon = (anchor: string | undefined) => (
+export const anchorIcon = (context: DefaultThemeRenderContext, anchor: string | undefined) => (
     <a href={`#${anchor}`} aria-label="Permalink" class="tsd-anchor-icon">
-        {icons.anchor()}
+        {context.icons.anchor()}
     </a>
 );

src/lib/output/themes/default/partials/icon.tsx

@@ -1,11 +1,6 @@
 import { ReflectionKind } from "../../../../models";
 import { JSX } from "../../../../utils";
 
-type UtilityIcons = Record<
-    "chevronDown" | "checkbox" | "menu" | "search" | "chevronSmall" | "anchor",
-    () => JSX.Element
->;
-
 const seenIcons = new Set<unknown>();
 
 export function clearSeenIconCache() {
@@ -46,7 +41,10 @@ const kindIcon = (kind: ReflectionKind, letterPath: JSX.Element, color: string,
     </svg>
 );
 
-export const icons: Record<ReflectionKind, () => JSX.Element> & UtilityIcons = {
+export const icons: Record<
+    ReflectionKind | "chevronDown" | "checkbox" | "menu" | "search" | "chevronSmall" | "anchor",
+    () => JSX.Element
+> = {
     [ReflectionKind.Accessor]: () =>
         kindIcon(
             ReflectionKind.Accessor,

src/lib/output/themes/default/partials/index.tsx

@@ -2,9 +2,8 @@ import { classNames, wbr } from "../../lib";
 import type { DefaultThemeRenderContext } from "../DefaultThemeRenderContext";
 import { JSX } from "../../../../utils";
 import type { ContainerReflection, ReflectionCategory } from "../../../../models";
-import { icons } from "./icon";
 
-function renderCategory({ urlTo }: DefaultThemeRenderContext, item: ReflectionCategory, prependName = "") {
+function renderCategory({ urlTo, icons }: DefaultThemeRenderContext, item: ReflectionCategory, prependName = "") {
     return (
         <section class="tsd-index-section">
             <h3 class="tsd-index-heading">{prependName ? `${prependName} - ${item.title}` : item.title}</h3>
@@ -52,7 +51,7 @@ export function index(context: DefaultThemeRenderContext, props: ContainerReflec
             <details class="tsd-index-content tsd-index-accordion" open={true}>
                 <summary class="tsd-accordion-summary tsd-index-summary">
                     <h5 class="tsd-index-heading uppercase" role="button" aria-expanded="false" tabIndex={0}>
-                        {icons.chevronSmall()} Index
+                        {context.icons.chevronSmall()} Index
                     </h5>
                 </summary>
                 <div class="tsd-accordion-details">{content}</div>

src/lib/output/themes/default/partials/member.tsx

@@ -11,7 +11,7 @@ export const member = (context: DefaultThemeRenderContext, props: DeclarationRef
             <h3 class="tsd-anchor-link">
                 {renderFlags(props.flags, props.comment)}
                 <span class={classNames({ deprecated: props.isDeprecated() })}>{wbr(props.name)}</span>
-                {anchorIcon(props.anchor)}
+                {anchorIcon(context, props.anchor)}
             </h3>
         )}
         {props.signatures

src/lib/output/themes/default/partials/navigation.tsx

@@ -3,7 +3,6 @@ import { JSX, partition } from "../../../../utils";
 import type { PageEvent } from "../../../events";
 import { classNames, camelToTitleCase, wbr } from "../../lib";
 import type { DefaultThemeRenderContext } from "../DefaultThemeRenderContext";
-import { icons } from "./icon";
 
 export function navigation(context: DefaultThemeRenderContext, props: PageEvent<Reflection>) {
     return (
@@ -15,12 +14,12 @@ export function navigation(context: DefaultThemeRenderContext, props: PageEvent<
     );
 }
 
-function buildFilterItem(name: string, displayName: string, defaultValue: boolean) {
+function buildFilterItem(context: DefaultThemeRenderContext, name: string, displayName: string, defaultValue: boolean) {
     return (
         <li class="tsd-filter-item">
             <label class="tsd-filter-input">
                 <input type="checkbox" id={`tsd-filter-${name}`} name={name} checked={defaultValue} />
-                {icons.checkbox()}
+                {context.icons.checkbox()}
                 <span>{displayName}</span>
             </label>
         </li>
@@ -40,15 +39,15 @@ function settings(context: DefaultThemeRenderContext) {
                 .toLowerCase();
 
             visibilityOptions.push(
-                buildFilterItem(filterName, camelToTitleCase(key.substring(1)), defaultFilters[key])
+                buildFilterItem(context, filterName, camelToTitleCase(key.substring(1)), defaultFilters[key])
             );
         } else if (
             (key === "protected" && !context.options.getValue("excludeProtected")) ||
             (key === "private" && !context.options.getValue("excludePrivate")) ||
             (key === "external" && !context.options.getValue("excludeExternals")) ||
             key === "inherited"
         ) {
-            visibilityOptions.push(buildFilterItem(key, camelToTitleCase(key), defaultFilters[key]));
+            visibilityOptions.push(buildFilterItem(context, key, camelToTitleCase(key), defaultFilters[key]));
         }
     }
 
@@ -58,7 +57,7 @@ function settings(context: DefaultThemeRenderContext) {
         <div class="tsd-navigation settings">
             <details class="tsd-index-accordion" open={false}>
                 <summary class="tsd-accordion-summary">
-                    <h3>{icons.chevronDown()} Settings</h3>
+                    <h3>{context.icons.chevronDown()} Settings</h3>
                 </summary>
                 <div class="tsd-accordion-details">
                     {visibilityOptions.length && (
@@ -96,7 +95,7 @@ function primaryNavigation(context: DefaultThemeRenderContext, props: PageEvent<
         <nav class="tsd-navigation primary">
             <details class="tsd-index-accordion" open={true}>
                 <summary class="tsd-accordion-summary">
-                    <h3>{icons.chevronDown()} Modules</h3>
+                    <h3>{context.icons.chevronDown()} Modules</h3>
                 </summary>
                 <div class="tsd-accordion-details">
                     <ul>
@@ -153,7 +152,7 @@ function secondaryNavigation(context: DefaultThemeRenderContext, props: PageEven
                     )}
                 >
                     <a href={context.urlTo(child)} class="tsd-index-link">
-                        {icons[child.kind]()}
+                        {context.icons[child.kind]()}
                         {wbr(child.name)}
                     </a>
                 </li>
@@ -181,7 +180,7 @@ function secondaryNavigation(context: DefaultThemeRenderContext, props: PageEven
                     )}
                 >
                     <a href={context.urlTo(effectivePageParent)} class="tsd-index-link">
-                        {icons[effectivePageParent.kind]()}
+                        {context.icons[effectivePageParent.kind]()}
                         <span>{wbr(effectivePageParent.name)}</span>
                     </a>
                     {!!pageNavigation.length && <ul>{pageNavigation}</ul>}

src/lib/output/themes/default/partials/toolbar.tsx

@@ -2,15 +2,14 @@ import type { Reflection } from "../../../../models";
 import { JSX } from "../../../../utils";
 import type { PageEvent } from "../../../events";
 import type { DefaultThemeRenderContext } from "../DefaultThemeRenderContext";
-import { icons } from "./icon";
 
 export const toolbar = (context: DefaultThemeRenderContext, props: PageEvent<Reflection>) => (
     <header class="tsd-page-toolbar">
         <div class="tsd-toolbar-contents container">
             <div class="table-cell" id="tsd-search" data-base={context.relativeURL("./")}>
                 <div class="field">
                     <label for="tsd-search-field" class="tsd-widget search no-caption">
-                        {icons.search()}
+                        {context.icons.search()}
                     </label>
                     <input type="text" id="tsd-search-field" aria-label="Search" />
                 </div>
@@ -27,7 +26,7 @@ export const toolbar = (context: DefaultThemeRenderContext, props: PageEvent<Ref
 
             <div class="table-cell" id="tsd-widgets">
                 <a href="#" class="tsd-widget menu no-caption" data-toggle="menu" aria-label="Menu">
-                    {icons.menu()}
+                    {context.icons.menu()}
                 </a>
             </div>
         </div>