@purpurds/icon 3.7.1 → 4.0.1

package/package.json

@@ -1,13 +1,12 @@
 {
   "name": "@purpurds/icon",
-  "version": "3.7.1",
+  "version": "4.0.1",
   "license": "AGPL-3.0-only",
   "main": "./dist/icon.cjs.js",
   "types": "./dist/icon.d.ts",
   "exports": {
     ".": {
       "require": "./dist/icon.cjs.js",
-      "systemjs": "./dist/icon.system.js",
       "types": "./dist/icon.d.ts",
       "default": "./dist/icon.es.js"
     },
@@ -17,7 +16,7 @@
   "source": "src/icon.tsx",
   "dependencies": {
     "classnames": "~2.5.0",
-    "@purpurds/tokens": "3.7.1"
+    "@purpurds/tokens": "4.0.1"
   },
   "devDependencies": {
     "@rushstack/eslint-patch": "~1.7.0",

package/readme.mdx

@@ -60,3 +60,58 @@ export const MyComponent = () => {
   );
 };
 ```
+
+### Usage with dynamic import
+
+If you don't know beforehand what icon to use, e.g. if it comes from a CMS, you can
+use a dynamic import. Be aware that this will result in a larger bundle size since
+all icons have to be included in the bundle.
+
+```tsx
+import React, { useEffect, useState } from "react";
+import type { IconBaseProps, IconName } from "@purpurds/icon";
+import { DEFAULT_SIZE } from "@purpurds/icon";
+import { pascalCase } from "change-case";
+
+export type IconDynamicProps = {
+  name: IconName;
+} & IconBaseProps;
+
+export const IconDynamic = ({
+  ["data-testid"]: dataTestId,
+  name,
+  className,
+  allyTitle,
+  size = DEFAULT_SIZE,
+  ...props
+}: IconDynamicProps) => {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const [Component, setComponent] = useState<React.ComponentType<any> | null>(null);
+
+  useEffect(() => {
+    const importComponent = async () => {
+      try {
+        const module = await import(`@purpurds/icon/dist/components/${name}.es.js`);
+        setComponent(() => module[`Icon${pascalCase(name)}`]);
+      } catch (error) {
+        // eslint-disable-next-line no-console
+        console.error(`Error importing component "${name}":`, error);
+      }
+    };
+
+    importComponent();
+  }, [name]);
+
+  return Component ? (
+    <Component
+      allyTitle={allyTitle}
+      className={className}
+      size={size}
+      data-testid={dataTestId}
+      {...props}
+    />
+  ) : null;
+};
+
+IconDynamic.displayName = "IconDynamic";
+```