@truenas/ui-components 0.1.46 → 0.1.48

package/scripts/icon-sprite/lib/find-icons-in-templates.ts

@@ -1,31 +1,69 @@
 import fs from 'fs';
 import fg from 'fast-glob';
 import * as cheerio from 'cheerio';
+import type { ForwardingComponentMapping } from './find-icons-in-forwarding-components';
 
-export function findIconsInTemplates(path: string, skipIcons?: Set<string>): Set<string> {
+export interface ScanResult {
+  icons: Set<string>;
+  sources: Map<string, string[]>;
+}
+
+export function findIconsInTemplates(
+  path: string,
+  skipIcons?: Set<string>,
+  forwardingMappings?: ForwardingComponentMapping[],
+): ScanResult {
   const iconNames = new Set<string>();
+  const sources = new Map<string, string[]>();
 
   const templates = fg.sync(`${path}/**/*.html`);
 
+  const addIcon = (iconName: string, templateFile: string) => {
+    iconNames.add(iconName);
+    const existing = sources.get(iconName) || [];
+    existing.push(templateFile);
+    sources.set(iconName, existing);
+  };
+
   templates.forEach((template) => {
     const content = fs.readFileSync(template, 'utf-8');
     const parsedTemplate = cheerio.load(content);
 
-    // Helper function to extract icon names from elements (used for both tn-icon and tn-icon-button)
-    const processIconElement = (iconTag: cheerio.Element) => {
-      // Check both 'name' and '[name]' attributes (Angular binding syntax)
-      const staticName = parsedTemplate(iconTag).attr('name');
-      const boundName = parsedTemplate(iconTag).attr('[name]');
-      const library = parsedTemplate(iconTag).attr('library');
+    // Generic function to extract icon names from an element's attributes
+    const processElement = (
+      el: cheerio.Element,
+      iconAttr: string,
+      libraryAttr: string | undefined,
+      defaultLibrary: string | undefined,
+    ) => {
+      // Check both static and [bound] attributes (Angular binding syntax)
+      // Cheerio lowercases HTML attribute names, so look up the lowercase form
+      const iconAttrLower = iconAttr.toLowerCase();
+      const staticName = parsedTemplate(el).attr(iconAttrLower);
+      const boundName = parsedTemplate(el).attr(`[${iconAttrLower}]`);
+      const libraryAttrLower = libraryAttr?.toLowerCase();
+      const library = libraryAttrLower
+        ? parsedTemplate(el).attr(libraryAttrLower) || parsedTemplate(el).attr(`[${libraryAttrLower}]`)
+        : undefined;
+
+      // Resolve library: use explicit value, fall back to default
+      let resolvedLibrary = defaultLibrary;
+      if (library) {
+        // Handle both static library="mdi" and bound [library]="'mdi'"
+        const staticLib = library.replace(/^['"]|['"]$/g, '');
+        if (/^[a-z]+$/.test(staticLib)) {
+          resolvedLibrary = staticLib;
+        }
+      }
 
       const extractedNames: string[] = [];
 
-      // Handle static name attribute: name="folder"
+      // Handle static name attribute: icon="folder"
       if (staticName) {
         extractedNames.push(staticName);
       }
 
-      // Handle bound name attribute: [name]="expression"
+      // Handle bound name attribute: [icon]="expression"
       // Extract string literals from the expression
       if (boundName) {
         // Match string literals that are values, not comparison operands
@@ -46,7 +84,7 @@ export function findIconsInTemplates(path: string, skipIcons?: Set<string>): Set
         }
 
         // Also handle simple string literals (no ternary, no comparison)
-        // e.g., [name]="'folder'" (though this is unusual)
+        // e.g., [icon]="'folder'" (though this is unusual)
         if (!boundName.includes('?') && !boundName.includes('=')) {
           const simpleStringRegex = /^['"]([^'"]+)['"]$/;
           const simpleMatch = boundName.match(simpleStringRegex);
@@ -72,13 +110,13 @@ export function findIconsInTemplates(path: string, skipIcons?: Set<string>): Set
         let finalIconName: string;
 
         // Handle library attribute - prefix the icon name with library prefix
-        if (library === 'mdi' && !iconName.startsWith('mdi-')) {
+        if (resolvedLibrary === 'mdi' && !iconName.startsWith('mdi-')) {
           finalIconName = `mdi-${iconName}`;
-        } else if (library === 'custom' && !iconName.startsWith('app-') && !iconName.startsWith('tn-')) {
+        } else if (resolvedLibrary === 'custom' && !iconName.startsWith('app-') && !iconName.startsWith('tn-')) {
           // Consumer custom icons get app- prefix
           // (Library templates should never use library="custom", they use libIconMarker() instead)
           finalIconName = `app-${iconName}`;
-        } else if (library === 'material' && !iconName.startsWith('mat-')) {
+        } else if (resolvedLibrary === 'material' && !iconName.startsWith('mat-')) {
           finalIconName = `mat-${iconName}`; // Material icons get mat- prefix
         } else {
           finalIconName = iconName;
@@ -89,20 +127,31 @@ export function findIconsInTemplates(path: string, skipIcons?: Set<string>): Set
           return;
         }
 
-        iconNames.add(finalIconName);
+        addIcon(finalIconName, template);
       });
     };
 
     // Scan tn-icon elements
     parsedTemplate('tn-icon').each((_, iconTag) => {
-      processIconElement(iconTag);
+      processElement(iconTag, 'name', 'library', undefined);
     });
 
     // Scan tn-icon-button elements (they also have name and library attributes)
     parsedTemplate('tn-icon-button').each((_, iconTag) => {
-      processIconElement(iconTag);
+      processElement(iconTag, 'name', 'library', undefined);
     });
+
+    // Scan icon-forwarding components
+    if (forwardingMappings) {
+      for (const mapping of forwardingMappings) {
+        parsedTemplate(mapping.selector).each((_, el) => {
+          for (const slot of mapping.iconSlots) {
+            processElement(el, slot.iconAttribute, slot.libraryAttribute, slot.defaultLibrary);
+          }
+        });
+      }
+    }
   });
 
-  return iconNames;
+  return { icons: iconNames, sources };
 }

package/scripts/icon-sprite/lib/find-icons-with-marker.spec.ts

@@ -0,0 +1,58 @@
+import path from 'path';
+import { findIconsWithMarker } from './find-icons-with-marker';
+
+const MARKER_FIXTURES = path.resolve(__dirname, '../__fixtures__/marker-sources');
+
+describe('findIconsWithMarker', () => {
+  it('should find tnIconMarker calls with mdi library', () => {
+    const { icons } = findIconsWithMarker(MARKER_FIXTURES);
+    expect(icons.has('mdi-content-save')).toBe(true);
+    expect(icons.has('mdi-delete')).toBe(true);
+    expect(icons.has('mdi-pencil')).toBe(true);
+    expect(icons.has('mdi-trash-can')).toBe(true);
+  });
+
+  it('should find tnIconMarker calls with material library', () => {
+    const { icons } = findIconsWithMarker(MARKER_FIXTURES);
+    expect(icons.has('mat-check_circle')).toBe(true);
+  });
+
+  it('should find tnIconMarker calls with custom library', () => {
+    const { icons } = findIconsWithMarker(MARKER_FIXTURES);
+    expect(icons.has('app-my-logo')).toBe(true);
+  });
+
+  it('should find tnIconMarker calls without library', () => {
+    const { icons } = findIconsWithMarker(MARKER_FIXTURES);
+    expect(icons.has('some-icon')).toBe(true);
+  });
+
+  it('should find libIconMarker calls with tn- prefix', () => {
+    const { icons } = findIconsWithMarker(MARKER_FIXTURES);
+    expect(icons.has('tn-dataset')).toBe(true);
+  });
+
+  it('should skip icons in the skip set', () => {
+    const skipIcons = new Set(['mdi-content-save', 'tn-dataset']);
+    const { icons } = findIconsWithMarker(MARKER_FIXTURES, skipIcons);
+    expect(icons.has('mdi-content-save')).toBe(false);
+    expect(icons.has('tn-dataset')).toBe(false);
+    // Others should still be found
+    expect(icons.has('mdi-delete')).toBe(true);
+  });
+
+  describe('source tracking', () => {
+    it('should return source file paths for each icon', () => {
+      const { sources } = findIconsWithMarker(MARKER_FIXTURES);
+      expect(sources.has('mdi-content-save')).toBe(true);
+      const saveSources = sources.get('mdi-content-save')!;
+      expect(saveSources.length).toBeGreaterThan(0);
+      expect(saveSources[0]).toContain('icons.ts');
+    });
+  });
+
+  it('should return empty set for directory with no markers', () => {
+    const { icons } = findIconsWithMarker(path.resolve(__dirname, '../__fixtures__/custom-icons'));
+    expect(icons.size).toBe(0);
+  });
+});

package/scripts/icon-sprite/lib/find-icons-with-marker.ts

@@ -1,22 +1,46 @@
-import { execSync } from 'node:child_process';
+import { spawnSync } from 'node:child_process';
+import type { ScanResult } from './find-icons-in-templates';
 
-export function findIconsWithMarker(path: string, skipIcons?: Set<string>): Set<string> {
+export function findIconsWithMarker(path: string, skipIcons?: Set<string>): ScanResult {
   // Updated regex to capture tnIconMarker() and libIconMarker() calls with optional second parameter
   // Matches: tnIconMarker('name') or tnIconMarker('name', 'library') or libIconMarker('tn-name')
-  const command = `grep -rEo "(tn|lib)IconMarker\\\\('[^']+',?\\s*'?[^'\\)]*'?\\)" --include="*.ts" --include="*.html" ${path}`;
+  const pattern = "(tn|lib)IconMarker\\('[^']+',?\\s*'?[^'\\)]*'?\\)";
 
   const icons = new Set<string>();
+  const sources = new Map<string, string[]>();
 
-  try {
-    const output = execSync(command, { encoding: 'utf-8' });
-    output
-      .split('\n')
-      .filter(Boolean)
-      .forEach((line) => {
-        const [, match] = line.split(':');
-        if (!match) {
+  const addIcon = (iconName: string, sourceFile: string) => {
+    icons.add(iconName);
+    const existing = sources.get(iconName) || [];
+    existing.push(sourceFile);
+    sources.set(iconName, existing);
+  };
+
+  const result = spawnSync(
+    'grep',
+    ['-rEo', pattern, '--include=*.ts', '--include=*.html', path],
+    { encoding: 'utf-8' },
+  );
+
+  if (result.status === 1 && !result.stderr) {
+    // grep returns exit code 1 when no matches found
+    return { icons, sources };
+  }
+  if (result.status !== 0 && result.status !== 1) {
+    throw new Error(`grep failed: ${result.stderr}`);
+  }
+
+  result.stdout
+    .split('\n')
+    .filter(Boolean)
+    .forEach((line) => {
+        // grep output format: "filepath:match"
+        const colonIdx = line.indexOf(':');
+        if (colonIdx === -1) {
           return;
         }
+        const sourceFile = line.substring(0, colonIdx);
+        const match = line.substring(colonIdx + 1);
 
         // Extract icon name (first parameter)
         const iconNameMatch = /'([^']+)'/.exec(match);
@@ -47,17 +71,8 @@ export function findIconsWithMarker(path: string, skipIcons?: Set<string>): Set<
           return;
         }
 
-        icons.add(iconName);
+        addIcon(iconName, sourceFile);
       });
-  } catch (error: any) {
-    // grep returns exit code 1 when no matches are found, which is not an error
-    if (error.status === 1 && !error.stderr) {
-      // No matches found, return empty set
-      return icons;
-    }
-    // Re-throw actual errors
-    throw error;
-  }
 
-  return icons;
+  return { icons, sources };
 }

package/scripts/icon-sprite/lib/validate-icons.spec.ts

@@ -0,0 +1,170 @@
+import fs from 'fs';
+import os from 'os';
+import path from 'path';
+import { validateIcons, printValidationReport } from './validate-icons';
+import type { ResolvedSpriteConfig } from '../sprite-config-interface';
+
+const FIXTURES_BASE = path.resolve(__dirname, '../__fixtures__');
+
+function createTempConfig(overrides: Partial<ResolvedSpriteConfig> = {}): ResolvedSpriteConfig {
+  return {
+    projectRoot: FIXTURES_BASE,
+    srcDirs: ['./consumer-templates', './marker-sources'],
+    outputDir: './output',
+    spriteUrlPath: 'assets/tn-icons',
+    customIconsDir: overrides.customIconsDir ?? null,
+    ...overrides,
+  };
+}
+
+function writeSpriteConfig(dir: string, icons: string[]): void {
+  fs.mkdirSync(dir, { recursive: true });
+  fs.writeFileSync(
+    path.join(dir, 'sprite-config.json'),
+    JSON.stringify({ iconUrl: 'sprite.svg?v=abc', icons }),
+  );
+}
+
+describe('validateIcons', () => {
+  let tempDir: string;
+
+  beforeEach(() => {
+    tempDir = fs.mkdtempSync(path.join(os.tmpdir(), 'icon-validate-'));
+  });
+
+  afterEach(() => {
+    fs.rmSync(tempDir, { recursive: true, force: true });
+  });
+
+  it('should report missing sprite config', () => {
+    const config = createTempConfig({ outputDir: path.join(tempDir, 'nonexistent') });
+    const result = validateIcons(config);
+
+    expect(result.spriteConfigFound).toBe(false);
+    expect(result.spriteIcons.size).toBe(0);
+  });
+
+  it('should detect icons missing from sprite', () => {
+    const outputDir = path.join(tempDir, 'output');
+    // Write a sprite config with only some icons
+    writeSpriteConfig(outputDir, ['mdi-folder']);
+
+    const config = createTempConfig({ outputDir });
+    const result = validateIcons(config);
+
+    expect(result.spriteConfigFound).toBe(true);
+    expect(result.missingFromSprite.size).toBeGreaterThan(0);
+    // mdi-folder is in the sprite, so it should NOT be missing
+    expect(result.missingFromSprite.has('mdi-folder')).toBe(false);
+  });
+
+  it('should detect stale icons in sprite', () => {
+    const outputDir = path.join(tempDir, 'output');
+    writeSpriteConfig(outputDir, ['mdi-folder', 'mdi-nonexistent-icon']);
+
+    const config = createTempConfig({ outputDir });
+    const result = validateIcons(config);
+
+    expect(result.staleInSprite.has('mdi-nonexistent-icon')).toBe(true);
+  });
+
+  it('should report clean when sprite matches scanned icons', () => {
+    const outputDir = path.join(tempDir, 'output');
+    // First, scan to get the full set
+    const config = createTempConfig({ outputDir });
+    const scan = validateIcons(config);
+    // Now write a sprite config with exactly those icons
+    writeSpriteConfig(outputDir, [...scan.scannedIcons]);
+
+    const result = validateIcons(config);
+    expect(result.missingFromSprite.size).toBe(0);
+    expect(result.staleInSprite.size).toBe(0);
+  });
+
+  it('should include custom icons in scanned set', () => {
+    const outputDir = path.join(tempDir, 'output');
+    writeSpriteConfig(outputDir, ['tn-logo', 'tn-brand']);
+
+    const config = createTempConfig({
+      outputDir,
+      customIconsDir: './custom-icons',
+    });
+    const result = validateIcons(config);
+
+    expect(result.scannedIcons.has('tn-logo')).toBe(true);
+    expect(result.scannedIcons.has('tn-brand')).toBe(true);
+  });
+});
+
+describe('printValidationReport', () => {
+  let consoleOutput: string[];
+  const originalLog = console.log;
+
+  beforeEach(() => {
+    consoleOutput = [];
+    console.log = (...args: unknown[]) => {
+      consoleOutput.push(args.map(String).join(' '));
+    };
+  });
+
+  afterEach(() => {
+    console.log = originalLog;
+  });
+
+  it('should return 0 when sprite is clean', () => {
+    const exitCode = printValidationReport({
+      scannedIcons: new Set(['mdi-folder']),
+      spriteIcons: new Set(['mdi-folder']),
+      missingFromSprite: new Set(),
+      staleInSprite: new Set(),
+      sources: new Map(),
+      spriteConfigFound: true,
+    });
+
+    expect(exitCode).toBe(0);
+    expect(consoleOutput.some(line => line.includes('up to date'))).toBe(true);
+  });
+
+  it('should return 1 when icons are missing', () => {
+    const exitCode = printValidationReport({
+      scannedIcons: new Set(['mdi-folder', 'mdi-new']),
+      spriteIcons: new Set(['mdi-folder']),
+      missingFromSprite: new Set(['mdi-new']),
+      staleInSprite: new Set(),
+      sources: new Map([['mdi-new', ['src/app/test.html']]]),
+      spriteConfigFound: true,
+    });
+
+    expect(exitCode).toBe(1);
+    expect(consoleOutput.some(line => line.includes('mdi-new'))).toBe(true);
+    expect(consoleOutput.some(line => line.includes('test.html'))).toBe(true);
+  });
+
+  it('should return 1 when no sprite config found', () => {
+    const exitCode = printValidationReport({
+      scannedIcons: new Set(['mdi-folder']),
+      spriteIcons: new Set(),
+      missingFromSprite: new Set(),
+      staleInSprite: new Set(),
+      sources: new Map(),
+      spriteConfigFound: false,
+    });
+
+    expect(exitCode).toBe(1);
+    expect(consoleOutput.some(line => line.includes('No sprite-config.json'))).toBe(true);
+  });
+
+  it('should return 0 when only stale icons exist', () => {
+    const exitCode = printValidationReport({
+      scannedIcons: new Set(['mdi-folder']),
+      spriteIcons: new Set(['mdi-folder', 'mdi-old']),
+      missingFromSprite: new Set(),
+      staleInSprite: new Set(['mdi-old']),
+      sources: new Map(),
+      spriteConfigFound: true,
+    });
+
+    expect(exitCode).toBe(0);
+    expect(consoleOutput.some(line => line.includes('mdi-old'))).toBe(true);
+  });
+});

package/scripts/icon-sprite/lib/validate-icons.ts

@@ -0,0 +1,185 @@
+import fs from 'fs';
+import { resolve } from 'path';
+import { discoverForwardingMappings } from './find-icons-in-forwarding-components';
+import { findIconsInTemplates } from './find-icons-in-templates';
+import type { ScanResult } from './find-icons-in-templates';
+import { findIconsWithMarker } from './find-icons-with-marker';
+import type { ResolvedSpriteConfig } from '../sprite-config-interface';
+
+export interface ValidationResult {
+  scannedIcons: Set<string>;
+  spriteIcons: Set<string>;
+  missingFromSprite: Set<string>;
+  staleInSprite: Set<string>;
+  sources: Map<string, string[]>;
+  spriteConfigFound: boolean;
+}
+
+/**
+ * Validates icon usage against the current sprite manifest.
+ * Reports missing icons (in code but not in sprite) and stale icons (in sprite but not in code).
+ */
+export function validateIcons(resolved: ResolvedSpriteConfig): ValidationResult {
+  const srcDirs = resolved.srcDirs.map(dir => resolve(resolved.projectRoot, dir));
+  const configPath = resolve(resolved.projectRoot, resolved.outputDir, 'sprite-config.json');
+
+  // Load library icons
+  const libraryIcons = loadLibraryIconsForValidation(resolved.projectRoot);
+
+  // Discover forwarding component mappings
+  const forwardingMappings = discoverForwardingMappings(srcDirs, resolved.projectRoot);
+
+  // Scan all source directories
+  const allSources = new Map<string, string[]>();
+  const scannedIcons = new Set<string>();
+
+  for (const srcDir of srcDirs) {
+    if (!fs.existsSync(srcDir)) {
+      continue;
+    }
+
+    const templateResult = findIconsInTemplates(srcDir, libraryIcons, forwardingMappings);
+    const markerResult = findIconsWithMarker(srcDir, libraryIcons);
+
+    mergeScanResult(scannedIcons, allSources, templateResult);
+    mergeScanResult(scannedIcons, allSources, markerResult);
+  }
+
+  // Include library icons in the scanned set (they're expected in the sprite)
+  for (const icon of libraryIcons) {
+    scannedIcons.add(icon);
+  }
+
+  // Include custom icons (they're always added to the sprite by generate)
+  if (resolved.customIconsDir) {
+    const customDir = resolve(resolved.projectRoot, resolved.customIconsDir);
+    if (fs.existsSync(customDir)) {
+      for (const filename of fs.readdirSync(customDir)) {
+        if (filename.endsWith('.svg')) {
+          scannedIcons.add(`tn-${filename.replace('.svg', '')}`);
+        }
+      }
+    }
+  }
+
+  // Load existing sprite config
+  let spriteIcons = new Set<string>();
+  let spriteConfigFound = false;
+
+  if (fs.existsSync(configPath)) {
+    spriteConfigFound = true;
+    try {
+      const config = JSON.parse(fs.readFileSync(configPath, 'utf-8'));
+      spriteIcons = new Set<string>(config.icons || []);
+    } catch {
+      // Corrupt config — treat as empty
+    }
+  }
+
+  // Compute differences
+  const missingFromSprite = new Set<string>();
+  for (const icon of scannedIcons) {
+    if (!spriteIcons.has(icon)) {
+      missingFromSprite.add(icon);
+    }
+  }
+
+  const staleInSprite = new Set<string>();
+  for (const icon of spriteIcons) {
+    if (!scannedIcons.has(icon)) {
+      staleInSprite.add(icon);
+    }
+  }
+
+  return {
+    scannedIcons,
+    spriteIcons,
+    missingFromSprite,
+    staleInSprite,
+    sources: allSources,
+    spriteConfigFound,
+  };
+}
+
+/**
+ * Prints the validation report to stdout.
+ * Returns the appropriate exit code (0 = clean, 1 = missing icons).
+ */
+export function printValidationReport(result: ValidationResult): number {
+  console.log('Icon Sprite Validation Report');
+  console.log('==============================\n');
+
+  if (!result.spriteConfigFound) {
+    console.log('⚠ No sprite-config.json found. Run "npx truenas-icons generate" first.\n');
+    console.log(`Scanned: ${result.scannedIcons.size} icon(s) across templates and markers`);
+    return 1;
+  }
+
+  console.log(`Scanned: ${result.scannedIcons.size} icon(s) across templates and markers`);
+  console.log(`Sprite:  ${result.spriteIcons.size} icon(s) in current sprite\n`);
+
+  if (result.missingFromSprite.size > 0) {
+    console.log(`Missing from sprite (${result.missingFromSprite.size} new icon(s) found):`);
+    for (const icon of [...result.missingFromSprite].sort()) {
+      const sourceFiles = result.sources.get(icon);
+      const sourceHint = sourceFiles?.length
+        ? ` (from ${sourceFiles[0]})`
+        : '';
+      console.log(`  + ${icon}${sourceHint}`);
+    }
+    console.log('');
+  }
+
+  if (result.staleInSprite.size > 0) {
+    console.log(`Stale icons (${result.staleInSprite.size} in sprite but not referenced):`);
+    for (const icon of [...result.staleInSprite].sort()) {
+      console.log(`  - ${icon}`);
+    }
+    console.log('');
+  }
+
+  if (result.missingFromSprite.size === 0 && result.staleInSprite.size === 0) {
+    console.log('✓ Sprite is up to date — no missing or stale icons.\n');
+    return 0;
+  }
+
+  if (result.missingFromSprite.size > 0) {
+    console.log('Run "npx truenas-icons generate" to rebuild the sprite.\n');
+    return 1;
+  }
+
+  return 0;
+}
+
+function mergeScanResult(
+  icons: Set<string>,
+  sources: Map<string, string[]>,
+  result: ScanResult,
+): void {
+  for (const icon of result.icons) {
+    icons.add(icon);
+  }
+  for (const [icon, files] of result.sources) {
+    const existing = sources.get(icon) || [];
+    existing.push(...files);
+    sources.set(icon, existing);
+  }
+}
+
+function loadLibraryIconsForValidation(projectRoot: string): Set<string> {
+  const librarySpritePath = resolve(
+    projectRoot,
+    'node_modules/@truenas/ui-components/assets/tn-icons/sprite-config.json'
+  );
+
+  if (!fs.existsSync(librarySpritePath)) {
+    return new Set<string>();
+  }
+
+  try {
+    const config = JSON.parse(fs.readFileSync(librarySpritePath, 'utf-8'));
+    return new Set<string>(config.icons || []);
+  } catch {
+    return new Set<string>();
+  }
+}

package/scripts/icon-sprite/tsconfig.json

@@ -0,0 +1,14 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "Node16",
+    "moduleResolution": "Node16",
+    "esModuleInterop": true,
+    "isolatedModules": true,
+    "strict": true,
+    "types": ["jest", "node"],
+    "rootDir": ".",
+    "outDir": "../../dist/out-tsc/scripts"
+  },
+  "include": ["**/*.ts"]
+}

package/types/truenas-ui-components.d.ts

@@ -628,6 +628,7 @@ interface IconResult {
     spriteUrl?: string;
 }
 declare class TnIconComponent {
+    private static warnedIcons;
     name: _angular_core.InputSignal<string>;
     size: _angular_core.InputSignal<IconSize>;
     color: _angular_core.InputSignal<string | undefined>;
@@ -658,6 +659,12 @@ declare class TnIconComponent {
     private tryCssIcon;
     private tryUnicodeIcon;
     private generateTextAbbreviation;
+    /**
+     * Warns once per icon name in dev mode when a sprite-prefixed icon is not
+     * found in the sprite. Only fires when the sprite is loaded and the icon
+     * name has a prefix indicating it should be a sprite icon.
+     */
+    private warnMissingSpriteIcon;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<TnIconComponent, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<TnIconComponent, "tn-icon", never, { "name": { "alias": "name"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "tooltip": { "alias": "tooltip"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "library": { "alias": "library"; "required": false; "isSignal": true; }; "fullSize": { "alias": "fullSize"; "required": false; "isSignal": true; }; "customSize": { "alias": "customSize"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }