feat(icon): add brand visuals icons to icon component

package.json

@@ -95,6 +95,7 @@
   "dependencies": {
     "@babel/runtime": "^7.0.0",
     "@momentum-design/animations": "^0.0.4",
+    "@momentum-design/brand-visuals": "^0.0.24",
     "@momentum-design/icons": "0.0.164",
     "@momentum-design/tokens": "0.0.77",
     "@momentum-ui/design-tokens": "^0.0.63",

src/components/Icon/Icon.constants.ts

@@ -58,6 +58,7 @@ const DEFAULTS = {
   AUTO_SCALE: false,
   VIEW_BOX_SPEC: VIEW_BOX_SPECS.NORMAL,
   WEIGHTLESS: false,
+  LIBRARY: 'icons' as const,
 };
 
 const EXCEPTION_ICONS_LIST: Array<InferredIconName> = [

src/components/Icon/Icon.stories.tsx

@@ -66,6 +66,16 @@ Weights.parameters = {
   ],
 };
 
+const BrandVisuals = Template<IconProps>(Icon).bind({});
+
+BrandVisuals.argTypes = { ...argTypes };
+
+BrandVisuals.args = {
+  name: 'cisco-ai-assistant-color',
+  library: 'brand-visuals',
+  weightless: true,
+};
+
 const Common = MultiTemplate<IconProps>(Icon).bind({});
 
 Common.argTypes = { ...argTypes };
@@ -88,4 +98,4 @@ Common.parameters = {
   ],
 };
 
-export { Example, Sizes, Weights, Common };
+export { Example, Sizes, Weights, BrandVisuals, Common };

src/components/Icon/Icon.tsx

@@ -31,10 +31,11 @@ const Icon: React.FC<Props> = (props: Props) => {
     weight,
     weightless = DEFAULTS.WEIGHTLESS,
     ariaLabel,
+    library = DEFAULTS.LIBRARY,
     ...otherProps
   } = props;
   const resolvedSVGName = getResolvedSVGName(name, weight, weightless);
-  const { SvgIcon, error } = useDynamicSVGImport(resolvedSVGName);
+  const { SvgIcon, error } = useDynamicSVGImport(resolvedSVGName, library);
 
   const isColoredIcon = /-colou?red$/.test(name as string);
 

src/components/Icon/Icon.types.ts

@@ -1,11 +1,12 @@
 import { CSSProperties } from 'react';
 import IconKeys from '@momentum-design/icons/dist/types/types';
+import BrandVisualsKeys from '@momentum-design/brand-visuals/dist/types/types';
 
 export type IconWeight = 'light' | 'regular' | 'bold' | 'filled';
 
 type RemoveWeight<T> = T extends `${infer Base}-${IconWeight}` ? Base : T;
 
-export type InferredIconName = RemoveWeight<IconKeys>;
+export type InferredIconName = RemoveWeight<IconKeys | BrandVisualsKeys>;
 
 export type IconScale =
   | 8
@@ -29,6 +30,8 @@ export type IconScale =
   | 'auto'
   | 'inherit';
 
+export type IconLibrary = 'icons' | 'brand-visuals';
+
 export interface Props {
   /**
    * If set to true, then the icon size will scale according to the parent element.
@@ -110,4 +113,6 @@ export interface Props {
    * An example would be brand icons.
    */
   weightless?: boolean;
+
+  library?: IconLibrary;
 }

src/hooks/useDynamicSVGImport.test.ts

@@ -1,39 +1,43 @@
+import { IconLibrary } from 'src/components/Icon/Icon.types';
 import { useDynamicSVGImport } from './useDynamicSVGImport';
 import { renderHook } from '@testing-library/react-hooks';
 
 describe('Icon', () => {
   beforeEach(() => jest.resetModules());
 
-  it('should successfully return svg component if icon exists', async () => {
-    const name = '3d-object-regular';
-    const onCompleteMock = jest.fn();
-    const onErrorMock = jest.fn();
-    const mockSVG = 'SVG_CONTENT';
-    jest.mock(
-      '@momentum-design/icons/dist/svg/3d-object-regular.svg?svgr',
-      () => {
-        return { ReactComponent: mockSVG };
-      },
-      { virtual: true }
-    );
+  it.each(['icons', 'brand-visuals'] as IconLibrary[])(
+    'should successfully return %s library svg component if icon exists',
+    async (library) => {
+      const name = '3d-object-regular';
+      const onCompleteMock = jest.fn();
+      const onErrorMock = jest.fn();
+      const mockSVG = 'SVG_CONTENT';
+      jest.mock(
+        `@momentum-design/${library}/dist/svg/3d-object-regular.svg?svgr`,
+        () => {
+          return { ReactComponent: mockSVG };
+        },
+        { virtual: true }
+      );
 
-    const hook = renderHook(() =>
-      useDynamicSVGImport(name, {
-        onCompleted: onCompleteMock,
-        onError: onErrorMock,
-      })
-    );
-    expect(hook.result.current.loading).toBe(true);
+      const hook = renderHook(() =>
+        useDynamicSVGImport(name, library, {
+          onCompleted: onCompleteMock,
+          onError: onErrorMock,
+        })
+      );
+      expect(hook.result.current.loading).toBe(true);
 
-    await hook.waitForNextUpdate();
+      await hook.waitForNextUpdate();
 
-    expect(onCompleteMock).toBeCalledTimes(1);
-    expect(onCompleteMock).toBeCalledWith(name, mockSVG);
-    expect(onErrorMock).not.toBeCalled();
-    expect(hook.result.current.SvgIcon).toEqual(mockSVG);
-    expect(hook.result.current.error).toBeUndefined();
-    expect(hook.result.current.loading).toBe(false);
-  });
+      expect(onCompleteMock).toBeCalledTimes(1);
+      expect(onCompleteMock).toBeCalledWith(name, mockSVG);
+      expect(onErrorMock).not.toBeCalled();
+      expect(hook.result.current.SvgIcon).toEqual(mockSVG);
+      expect(hook.result.current.error).toBeUndefined();
+      expect(hook.result.current.loading).toBe(false);
+    }
+  );
 
   it('should return error component does not exist', async () => {
     const name = 'bad_icon';
@@ -50,7 +54,7 @@ describe('Icon', () => {
     );
 
     const hook = renderHook(() =>
-      useDynamicSVGImport(name, {
+      useDynamicSVGImport(name, 'icons', {
         onCompleted: onCompleteMock,
         onError: onErrorMock,
       })

src/hooks/useDynamicSVGImport.ts

@@ -1,5 +1,6 @@
 import { useRef, useState, useEffect } from 'react';
 import { useIsMounted } from './useIsMounted';
+import { IconLibrary } from '../components/Icon/Icon.types';
 
 interface UseDynamicSVGImportOptions {
   onCompleted?: (
@@ -24,6 +25,7 @@ interface UseDynamicSVGImportReturn {
  */
 function useDynamicSVGImport(
   name: string,
+  library: IconLibrary,
   options: UseDynamicSVGImportOptions = {}
 ): UseDynamicSVGImportReturn {
   const ImportedIconRef = useRef<React.FC<React.SVGProps<SVGSVGElement>>>();
@@ -38,7 +40,7 @@ function useDynamicSVGImport(
       try {
         setError(undefined);
         ImportedIconRef.current = (
-          await import(`@momentum-design/icons/dist/svg/${name}.svg?svgr`)
+          await import(`@momentum-design/${library}/dist/svg/${name}.svg?svgr`)
         ).ReactComponent;
         if (isMounted()) {
           onCompleted?.(name, ImportedIconRef.current);

yarn.lock

@@ -2444,6 +2444,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@momentum-design/brand-visuals@npm:^0.0.24":
+  version: 0.0.24
+  resolution: "@momentum-design/brand-visuals@npm:0.0.24"
+  checksum: c7bf5e078d9157ed8ede29ba882792e05bd75b78a1ffa4c38dcff40156b81475b3aab7e0e33818d0e35b5cd815c7db0cd9e41a7de01cfc6befd16a78b727d0a7
+  languageName: node
+  linkType: hard
+
 "@momentum-design/icons@npm:0.0.164":
   version: 0.0.164
   resolution: "@momentum-design/icons@npm:0.0.164"
@@ -2495,6 +2502,7 @@ __metadata:
     "@commitlint/config-conventional": ^12.0.1
     "@hot-loader/react-dom": ~16.8.0
     "@momentum-design/animations": ^0.0.4
+    "@momentum-design/brand-visuals": ^0.0.24
     "@momentum-design/icons": 0.0.164
     "@momentum-design/tokens": 0.0.77
     "@momentum-ui/design-tokens": ^0.0.63