Refactor Icon base class to be extendable

change/@ni-nimble-angular-95b60d3c-bce1-46a4-a5a0-0c486f84843a.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Internal change to icon pattern",
+  "packageName": "@ni/nimble-angular",
+  "email": "1588923+rajsite@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

change/@ni-nimble-components-b60d4aa1-b360-468e-b13c-5a5dca16fa53.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "SVGIcon proto",
+  "packageName": "@ni/nimble-components",
+  "email": "1588923+rajsite@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

packages/angular-workspace/nimble-angular/build/generate-icons.mjs

@@ -91,7 +91,7 @@ export class ${moduleName} { }
         modulePath: moduleFilePath
     });
 }
-console.log(`Finshed writing ${directiveAndModulePaths.length} icon directive and module files`);
+console.log(`Finished writing ${directiveAndModulePaths.length} icon directive and module files`);
 
 let barrelFileContents = `${generatedFilePrefix}\n`;
 for (const paths of directiveAndModulePaths) {

packages/blazor-workspace/build/generate-icons.mjs

@@ -46,4 +46,4 @@ for (const key of Object.keys(icons)) {
     const componentFilePath = path.resolve(iconsDirectory, componentFileName);
     fs.writeFileSync(componentFilePath, directiveFileContents, { encoding: 'utf-8' });
 }
-console.log('Finshed writing icon Razor component files');
+console.log('Finished writing icon Razor component files');

packages/nimble-components/build/generate-icons.mjs

@@ -44,7 +44,7 @@ for (const key of Object.keys(icons)) {
 
     const componentFileContents = `${generatedFilePrefix}
 import { ${svgName} } from '@ni/nimble-tokens/dist/icons/js';
-import { Icon, registerIcon } from '../../icon-base';
+import { IconSvg, registerIconSvg } from '../../icon-svg';
 
 declare global {
     interface HTMLElementTagNameMap {
@@ -55,13 +55,13 @@ declare global {
 /**
  * The icon component for the '${iconName}' icon
  */
-export class ${className} extends Icon {
+export class ${className} extends IconSvg {
     public constructor() {
         super(${svgName});
     }
 }
 
-registerIcon('${elementBaseName}', ${className});
+registerIconSvg('${elementBaseName}', ${className});
 export const ${tagName} = '${elementName}';
 `;
 
@@ -72,7 +72,7 @@ export const ${tagName} = '${elementName}';
         `export { ${className} } from './${directoryName}';\n`
     );
 }
-console.log(`Finshed writing ${fileCount} icon component files`);
+console.log(`Finished writing ${fileCount} icon component files`);
 
 const allIconsFilePath = path.resolve(iconsDirectory, 'all-icons.ts');
 console.log('Writing all-icons file');

packages/nimble-components/src/icon-base/index.ts

@@ -1,35 +1,20 @@
 import { attr } from '@ni/fast-element';
-import { DesignSystem, FoundationElement } from '@ni/fast-foundation';
-import type { NimbleIcon } from '@ni/nimble-tokens/dist/icons/js';
-import { template } from './template';
-import { styles } from './styles';
+import { FoundationElement } from '@ni/fast-foundation';
 import type { IconSeverity } from './types';
 
 /**
- * The base class for icon components
+ * The base class for icon components. Implementors:
+ * - Should not increase the API surface area, consumers of icons would not expect additional attributes to configure
+ * - Should not add interactive components to the template, expect to be visual only
+ * - Should respond well to sizing of the element
+ * - Should respond to configuration of the severity attribute and other tokens such as theme
  */
-export class Icon extends FoundationElement {
+export abstract class Icon extends FoundationElement {
     /**
      * @public
      * @remarks
      * HTML Attribute: severity
      */
     @attr
     public severity: IconSeverity;
-
-    public constructor(/** @internal */ public readonly icon: NimbleIcon) {
-        super();
-    }
 }
-
-type IconClass = typeof Icon;
-
-export const registerIcon = (baseName: string, iconClass: IconClass): void => {
-    const composedIcon = iconClass.compose({
-        baseName,
-        template,
-        styles
-    });
-
-    DesignSystem.getOrCreate().withPrefix('nimble').register(composedIcon());
-};

packages/nimble-components/src/icon-svg/index.ts

@@ -0,0 +1,24 @@
+import type { NimbleIcon } from '@ni/nimble-tokens/dist/icons/js';
+import { DesignSystem } from '@ni/fast-foundation';
+import { template } from './template';
+import { styles } from './styles';
+import { Icon } from '../icon-base';
+
+/**
+ * Icon base class for the standard nimble icon set
+ */
+export class IconSvg extends Icon {
+    public constructor(/** @internal */ public readonly icon: NimbleIcon) {
+        super();
+    }
+}
+
+export const registerIconSvg = (baseName: string, iconClass: typeof IconSvg): void => {
+    const composedIcon = iconClass.compose({
+        baseName,
+        template,
+        styles
+    });
+
+    DesignSystem.getOrCreate().withPrefix('nimble').register(composedIcon());
+};

packages/nimble-components/src/icon-base/template.ts → packages/nimble-components/src/icon-svg/template.ts

@@ -1,8 +1,8 @@
 import { html } from '@ni/fast-element';
-import type { Icon } from '.';
+import type { IconSvg } from '.';
 
 // Avoiding any whitespace in the template because this is an inline element
-export const template = html<Icon>`<div
+export const template = html<IconSvg>`<div
     class="icon"
     aria-hidden="true"
     :innerHTML=${x => x.icon.data}

packages/nimble-components/src/mapping/icon/tests/mapping-icon.spec.ts

@@ -6,11 +6,11 @@ import {
     type Fixture
 } from '../../../utilities/tests/fixture';
 import { waitForUpdatesAsync } from '../../../testing/async-helpers';
-import { Icon, registerIcon } from '../../../icon-base';
+import { IconSvg, registerIconSvg } from '../../../icon-svg';
 
 describe('Icon Mapping', () => {
     const testIconElementName = uniqueElementName();
-    class TestIcon extends Icon {}
+    class TestIcon extends IconSvg {}
 
     let element: MappingIcon;
     let connect: () => Promise<void>;
@@ -38,7 +38,7 @@ describe('Icon Mapping', () => {
 
         expect(element.resolvedIcon).toBeUndefined();
 
-        registerIcon(testIconElementName, TestIcon);
+        registerIconSvg(testIconElementName, TestIcon);
         await waitForUpdatesAsync();
 
         expect(element.resolvedIcon).toBeDefined();

packages/storybook/src/nimble/icon-base/icons.stories.ts

@@ -10,7 +10,7 @@ import { tableColumnMappingTag } from '@ni/nimble-components/dist/esm/table-colu
 import { mappingIconTag } from '@ni/nimble-components/dist/esm/mapping/icon';
 import { tableColumnTextTag } from '@ni/nimble-components/dist/esm/table-column/text';
 import { IconSeverity } from '@ni/nimble-components/dist/esm/icon-base/types';
-import { iconMetadata } from '@ni/nimble-components/dist/esm/icon-base/tests/icon-metadata';
+import { iconMetadata } from '@ni/nimble-components/dist/esm/icon-svg/tests/icon-metadata';
 import { tableFitRowsHeight } from '@ni/nimble-components/dist/esm/theme-provider/design-tokens';
 import {
     apiCategory,