feat: lazy load functional and distinctive icons

gavmck · gavmck · commit 25c728d287ef · 2026-02-13T15:46:08.000Z
diff --git a/scripts/build.js b/scripts/build.js
@@ -10,12 +10,13 @@ import { globSvgPlugin } from './esbuild-plugin-glob-svg.js';
 
 const banner = `/*! ${pkg.name} v${pkg.version} | ${pkg.homepage} */`;
 
-// Build ESM version
+// Build ESM version with code splitting for lazy-loaded icon sets
 await esbuild.build({
   entryPoints: ['src/index.ts'],
-  outfile: 'dist/esm/index.js',
+  outdir: 'dist/esm',
   banner: { js: banner },
   bundle: true,
+  splitting: true,
   minify: true,
   write: true,
   format: 'esm',
diff --git a/scripts/esbuild-plugin-glob-svg.js b/scripts/esbuild-plugin-glob-svg.js
@@ -1,5 +1,5 @@
 import { readFileSync, readdirSync } from 'fs';
-import { resolve as pathResolve, dirname } from 'path';
+import { resolve as pathResolve, dirname, basename } from 'path';
 
 /**
  * ESBuild plugin to handle import.meta.glob for SVG files and ?raw imports
@@ -10,10 +10,8 @@ export const globSvgPlugin = () => ({
   setup(build) {
     // Handle ?raw imports for SVG files
     build.onResolve({ filter: /\.svg\?raw$/ }, (args) => {
-      console.log('Resolving SVG raw import:', args.path);
       const pathWithoutQuery = args.path.replace('?raw', '');
       const resolvedPath = pathResolve(args.resolveDir, pathWithoutQuery);
-      console.log('Resolved path:', resolvedPath);
       return {
         path: resolvedPath,
         namespace: 'svg-raw',
@@ -22,10 +20,8 @@ export const globSvgPlugin = () => ({
 
     // Load SVG files as raw strings
     build.onLoad({ filter: /.*/, namespace: 'svg-raw' }, (args) => {
-      console.log('Loading SVG raw file:', args.path);
       try {
         const content = readFileSync(args.path, 'utf8');
-        console.log('Successfully loaded SVG content, length:', content.length);
         return {
           contents: `export default ${JSON.stringify(content)};`,
           loader: 'js',
@@ -39,83 +35,85 @@ export const globSvgPlugin = () => ({
       }
     });
 
-    // Handle the icons.ts file specifically
+    // Helper function to read SVG files from a directory
+    const readSvgFiles = (dirPath) => {
+      try {
+        const files = readdirSync(dirPath).filter((f) => f.endsWith('.svg'));
+        return files.reduce((acc, file) => {
+          const key = file.replace('.svg', '');
+          const content = readFileSync(pathResolve(dirPath, file), 'utf8');
+          acc[key] = content;
+          return acc;
+        }, {});
+      } catch (err) {
+        console.warn(`Could not read directory: ${dirPath}`);
+        return {};
+      }
+    };
+
+    // Handle the icons.ts file - only includes standard icons
+    // (functional/distinctive are lazy-loaded via separate chunks)
     build.onLoad({ filter: /icons\.ts$/ }, async (args) => {
       try {
-        // Read the original file
         const source = readFileSync(args.path, 'utf8');
 
-        // Check if this file contains import.meta.glob
         if (!source.includes('import.meta.glob')) {
-          return null; // Let esbuild handle it normally
+          return null;
+        }
+
+        const fileName = basename(args.path);
+
+        // Handle functional-icons.ts
+        if (fileName === 'functional-icons.ts') {
+          const functionalDir = pathResolve(dirname(args.path), 'functional');
+          const functionalObj = readSvgFiles(functionalDir);
+
+          return {
+            contents: `export const functionalIcons = ${JSON.stringify(functionalObj)};`,
+            loader: 'ts',
+            resolveDir: dirname(args.path),
+          };
         }
 
-        // Define the icon directories relative to the icons.ts file
+        // Handle distinctive-icons.ts
+        if (fileName === 'distinctive-icons.ts') {
+          const distinctiveDir = pathResolve(dirname(args.path), 'distinctive');
+          const distinctiveObj = readSvgFiles(distinctiveDir);
+
+          return {
+            contents: `export const distinctiveIcons = ${JSON.stringify(distinctiveObj)};`,
+            loader: 'ts',
+            resolveDir: dirname(args.path),
+          };
+        }
+
+        // Handle main icons.ts - standard icons only, with keys/types for all sets
         const iconsDir = pathResolve(dirname(args.path), 'icons');
         const functionalDir = pathResolve(dirname(args.path), 'functional');
         const distinctiveDir = pathResolve(dirname(args.path), 'distinctive');
 
-        // Helper function to read SVG files from a directory
-        const readSvgFiles = (dirPath) => {
-          try {
-            const files = readdirSync(dirPath).filter((f) =>
-              f.endsWith('.svg'),
-            );
-            return files.reduce((acc, file) => {
-              const key = file.replace('.svg', '');
-              const content = readFileSync(pathResolve(dirPath, file), 'utf8');
-              acc[key] = content;
-              return acc;
-            }, {});
-          } catch (err) {
-            console.warn(`Could not read directory: ${dirPath}`);
-            return {};
-          }
-        };
-
-        // Read all SVG files
         const iconsObj = readSvgFiles(iconsDir);
-        const functionalObj = readSvgFiles(functionalDir);
-        const distinctiveObj = readSvgFiles(distinctiveDir);
-
-        // Generate the replacement code
-        const replacementCode = `/** eslint-disable spaced-comment */
-// This file is generated by esbuild-plugin-glob-svg for production builds
-// The original file uses Vite's import.meta.glob for development
-
-const formatIcons = (imports) =>
-  Object.entries(imports).reduce<Record<string, string>>(
-    (acc, [path, content]) => {
-      const key = path
-        .replace(/\\.\\/\\(icons|functional|distinctive\\)\\//, '')
-        .replace('.svg', '');
-      return { ...acc, [key]: content as string };
-    },
-    {},
-  );
-
-export const icons = ${JSON.stringify(iconsObj, null, 2)};
-export const functionalIcons = ${JSON.stringify(functionalObj, null, 2)};
-export const distinctiveIcons = ${JSON.stringify(distinctiveObj, null, 2)};
+        const functionalKeys = Object.keys(readSvgFiles(functionalDir));
+        const distinctiveKeys = Object.keys(readSvgFiles(distinctiveDir));
+
+        const replacementCode = `// Generated by esbuild-plugin-glob-svg for production builds
+
+export const icons = ${JSON.stringify(iconsObj)};
 
 export const iconKeys = ${JSON.stringify(Object.keys(iconsObj))} as (keyof typeof icons)[];
-export const functionalIconKeys = ${JSON.stringify(Object.keys(functionalObj))} as (keyof typeof functionalIcons)[];
-export const distinctiveIconKeys = ${JSON.stringify(Object.keys(distinctiveObj))} as (keyof typeof distinctiveIcons)[];
+export const functionalIconKeys = ${JSON.stringify(functionalKeys)} as string[];
+export const distinctiveIconKeys = ${JSON.stringify(distinctiveKeys)} as string[];
 
 export type IconName = ${
           Object.keys(iconsObj)
             .map((k) => `"${k}"`)
             .join(' | ') || 'string'
         };
 export type FunctionalIconName = ${
-          Object.keys(functionalObj)
-            .map((k) => `"${k}"`)
-            .join(' | ') || 'string'
+          functionalKeys.map((k) => `"${k}"`).join(' | ') || 'string'
         };
 export type DistinctiveIconName = ${
-          Object.keys(distinctiveObj)
-            .map((k) => `"${k}"`)
-            .join(' | ') || 'string'
+          distinctiveKeys.map((k) => `"${k}"`).join(' | ') || 'string'
         };
 
 export default icons;
@@ -128,10 +126,10 @@ export default icons;
         };
       } catch (err) {
         console.warn(
-          'Could not process icons.ts with glob-svg plugin:',
+          'Could not process icons file with glob-svg plugin:',
           err.message,
         );
-        return null; // Let esbuild handle it normally
+        return null;
       }
     });
   },
diff --git a/scripts/export-components.js b/scripts/export-components.js
@@ -29,11 +29,12 @@ function findTsFiles(dir, extensions = ['.ts', '.tsx']) {
         entry.isFile() &&
         extensions.some((ext) => entry.name.endsWith(ext))
       ) {
-        // Skip story files, test files, and spec files
+        // Skip story files, test files, spec files, and lazy-loaded icon data files
         if (
           !entry.name.includes('.stories.') &&
           !entry.name.includes('.test.') &&
-          !entry.name.includes('.spec.')
+          !entry.name.includes('.spec.') &&
+          !/^(functional|distinctive)-icons\.ts$/.test(entry.name)
         ) {
           files.push(fullPath);
         }
diff --git a/src/components/content/Icon/Icon.ts b/src/components/content/Icon/Icon.ts
@@ -9,8 +9,6 @@ import {
   IconName,
   FunctionalIconName,
   DistinctiveIconName,
-  functionalIcons,
-  distinctiveIcons,
 } from './icons';
 
 export interface IconAttributes {
@@ -61,20 +59,56 @@ export class Icon extends LitElement {
     }
   `;
 
+  // Static cache shared across all Icon instances
+  private static _functionalIcons?: Record<string, string>;
+  private static _distinctiveIcons?: Record<string, string>;
+  private static _functionalPromise?: Promise<Record<string, string>>;
+  private static _distinctivePromise?: Promise<Record<string, string>>;
+
   constructor() {
     super();
   }
 
-  private get iconSet() {
+  private get iconSet(): Record<string, string> {
     if (this.set === 'functional') {
-      return functionalIcons;
+      return Icon._functionalIcons ?? {};
     }
     if (this.set === 'distinctive') {
-      return distinctiveIcons;
+      return Icon._distinctiveIcons ?? {};
     }
     return icons;
   }
 
+  private async loadIconSet() {
+    if (this.set === 'functional' && !Icon._functionalIcons) {
+      if (!Icon._functionalPromise) {
+        Icon._functionalPromise = import('./functional-icons').then(
+          (m) => m.functionalIcons,
+        );
+      }
+      Icon._functionalIcons = await Icon._functionalPromise;
+      this.requestUpdate();
+    } else if (this.set === 'distinctive' && !Icon._distinctiveIcons) {
+      if (!Icon._distinctivePromise) {
+        Icon._distinctivePromise = import('./distinctive-icons').then(
+          (m) => m.distinctiveIcons,
+        );
+      }
+      Icon._distinctiveIcons = await Icon._distinctivePromise;
+      this.requestUpdate();
+    }
+  }
+
+  updated(changedProperties: Map<string, unknown>) {
+    super.updated(changedProperties);
+    if (
+      (changedProperties.has('set') || changedProperties.has('icon')) &&
+      (this.set === 'functional' || this.set === 'distinctive')
+    ) {
+      this.loadIconSet();
+    }
+  }
+
   render() {
     const { label, icon } = this;
 
diff --git a/src/components/content/Icon/distinctive-icons.ts b/src/components/content/Icon/distinctive-icons.ts
@@ -0,0 +1,20 @@
+// Using Vite's import.meta.glob to import SVG files
+// eslint-disable-next-line spaced-comment
+/// <reference types="vite/client" />
+
+const formatIcons = (imports) =>
+  Object.entries(imports).reduce<Record<string, string>>(
+    (acc, [path, content]) => {
+      const key = path.replace(/\.\/distinctive\//, '').replace('.svg', '');
+      return { ...acc, [key]: content as string };
+    },
+    {},
+  );
+
+const distinctiveSvgImport = import.meta.glob('./distinctive/*.svg', {
+  eager: true,
+  query: '?raw',
+  import: 'default',
+});
+
+export const distinctiveIcons = formatIcons(distinctiveSvgImport);
diff --git a/src/components/content/Icon/functional-icons.ts b/src/components/content/Icon/functional-icons.ts
@@ -0,0 +1,20 @@
+// Using Vite's import.meta.glob to import SVG files
+// eslint-disable-next-line spaced-comment
+/// <reference types="vite/client" />
+
+const formatIcons = (imports) =>
+  Object.entries(imports).reduce<Record<string, string>>(
+    (acc, [path, content]) => {
+      const key = path.replace(/\.\/functional\//, '').replace('.svg', '');
+      return { ...acc, [key]: content as string };
+    },
+    {},
+  );
+
+const functionalSvgImport = import.meta.glob('./functional/*.svg', {
+  eager: true,
+  query: '?raw',
+  import: 'default',
+});
+
+export const functionalIcons = formatIcons(functionalSvgImport);
diff --git a/src/components/content/Icon/icons.ts b/src/components/content/Icon/icons.ts
@@ -2,6 +2,9 @@
 // eslint-disable-next-line spaced-comment
 /// <reference types="vite/client" />
 
+import { distinctiveIcons } from './distinctive-icons';
+import { functionalIcons } from './functional-icons';
+
 const formatIcons = (imports) =>
   Object.entries(imports).reduce<Record<string, string>>(
     (acc, [path, content]) => {
@@ -18,20 +21,9 @@ const svgImports = import.meta.glob('./icons/*.svg', {
   query: '?raw',
   import: 'default',
 });
-const functionalSvgImport = import.meta.glob('./functional/*.svg', {
-  eager: true,
-  query: '?raw',
-  import: 'default',
-});
-const distinctiveSvgImport = import.meta.glob('./distinctive/*.svg', {
-  eager: true,
-  query: '?raw',
-  import: 'default',
-});
 
 export const icons = formatIcons(svgImports);
-export const functionalIcons = formatIcons(functionalSvgImport);
-export const distinctiveIcons = formatIcons(distinctiveSvgImport);
+export { functionalIcons, distinctiveIcons };
 
 export const iconKeys = Object.keys(icons) as (keyof typeof icons)[];
 export const functionalIconKeys = Object.keys(
