[svg]: Create createIcon as the base icon factory for SVG

src/icons/AccessTime/AccessTimeIcon.tsx

@@ -1,26 +1,8 @@
-import { DEFAULT_FILL_NONE, DEFAULT_HEIGHT, DEFAULT_WIDTH } from '../../constants/constants';
-import { IconProps } from '../types';
+import { createIcon } from '../createIcon';
 
-export const AccessTimeIcon = ({
-  width = DEFAULT_WIDTH,
-  height = DEFAULT_HEIGHT,
-  fill = DEFAULT_FILL_NONE,
-  ...props
-}: IconProps): JSX.Element => {
-  return (
-    <svg
-      width={width}
-      height={height}
-      xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 0 24 24"
-      {...props}
-    >
-      <path
-        d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2M12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8m.5-13H11v6l5.25 3.15.75-1.23-4.5-2.67z"
-        fill={fill}
-      />
-    </svg>
-  );
-};
+export const AccessTimeIcon = createIcon({
+  displayName: 'AccessTimeIcon',
+  d: 'M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2M12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8m.5-13H11v6l5.25 3.15.75-1.23-4.5-2.67z'
+});
 
 export default AccessTimeIcon;

src/icons/Add/AddIcon.tsx

@@ -1,24 +1,11 @@
-import { DEFAULT_FILL_NONE, DEFAULT_HEIGHT, DEFAULT_WIDTH } from '../../constants/constants';
-import { IconProps } from '../types';
+import { createIcon } from '../createIcon';
 
-export const AddIcon = ({
-  width = DEFAULT_WIDTH,
-  height = DEFAULT_HEIGHT,
-  fill = DEFAULT_FILL_NONE,
-  ...props
-}: IconProps): JSX.Element => {
-  return (
-    <svg
-      width={width}
-      height={height}
-      xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 0 24 24"
-      data-testid="add-icon-svg"
-      {...props}
-    >
-      <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" fill={fill} />
-    </svg>
-  );
-};
+export const AddIcon = createIcon({
+  displayName: 'AddIcon',
+  d: 'M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z',
+  defaultProps: {
+    'data-testid': 'add-icon-svg'
+  }
+});
 
 export default AddIcon;

src/icons/createIcon/createIcon.tsx

@@ -0,0 +1,95 @@
+import React from 'react';
+import { DEFAULT_FILL_NONE, DEFAULT_HEIGHT, DEFAULT_WIDTH } from '../../constants/constants';
+import { IconProps } from '../types';
+
+/**
+ * Configuration options for creating an SVG icon component with `createIcon`.
+ */
+export interface CreateIconOptions {
+  /**
+   * The icon SVG viewBox.
+   * @default '0 0 24 24'
+   */
+  viewBox?: string;
+
+  /**
+   * The SVG path or elements to render inside the SVG.
+   */
+  path?: React.ReactNode | ((props: IconProps) => React.ReactNode);
+
+  /**
+   * Shorthand SVG path `d` attribute when providing a single path string.
+   */
+  d?: string;
+
+  /**
+   * The display name of the icon component (for React DevTools and testing).
+   */
+  displayName?: string;
+
+  /**
+   * Default props to override standard defaults (e.g. custom default fill or dimensions).
+   */
+  defaultProps?: Partial<IconProps> & Record<string, unknown>;
+}
+
+/**
+ * Factory function to create reusable, consistent SVG icon components.
+ * Standardizes prop handling (width, height, fill, viewBox, title), default values,
+ * and ref forwarding across icons.
+ *
+ * @param options - Configuration options for the icon (viewBox, path, d, displayName, defaultProps).
+ * @returns A React forwardRef component rendering the SVG icon.
+ */
+export function createIcon(options: CreateIconOptions): React.ForwardRefExoticComponent<
+  IconProps & React.RefAttributes<SVGSVGElement>
+> {
+  const {
+    viewBox = '0 0 24 24',
+    d: pathDefinition,
+    path: pathElement,
+    displayName,
+    defaultProps = {}
+  } = options;
+
+  const Comp = React.forwardRef<SVGSVGElement, IconProps>((props, ref) => {
+    const mergedProps = { ...defaultProps, ...props };
+    const {
+      width = DEFAULT_WIDTH,
+      height = DEFAULT_HEIGHT,
+      fill = DEFAULT_FILL_NONE,
+      title,
+      ...rest
+    } = mergedProps;
+
+    let content: React.ReactNode = null;
+    if (typeof pathElement === 'function') {
+      content = pathElement(mergedProps);
+    } else if (pathElement) {
+      content = pathElement;
+    } else if (pathDefinition) {
+      content = <path d={pathDefinition} fill={fill} />;
+    }
+
+    return (
+      <svg
+        {...rest}
+        ref={ref}
+        width={width}
+        height={height}
+        fill={fill}
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox={viewBox}
+      >
+        {title && <title>{title}</title>}
+        {content}
+      </svg>
+    );
+  });
+
+  Comp.displayName = displayName || 'Icon';
+
+  return Comp;
+}
+
+export default createIcon;

src/icons/createIcon/index.ts

@@ -0,0 +1 @@
+export { createIcon, default, type CreateIconOptions } from './createIcon';

src/icons/index.ts

@@ -51,6 +51,7 @@ export * from './ContentClassIcons';
 export * from './ContentFilter';
 export * from './Copy';
 export * from './CreateNew';
+export * from './createIcon';
 export * from './Credential';
 export * from './CrossCircle';
 export * from './Dashboard';

src/index.tsx

@@ -164,3 +164,9 @@ export {
   type Team as TeamPickerRecord,
   type TeamSearchFieldProps
 } from './custom/DashboardWidgets/GettingStartedWidget/TeamSearchField';
+
+export {
+  createIcon,
+  type CreateIconOptions
+} from './icons/createIcon';
+