feat(icon-loader): implement icon-loader package

apps/rollup-react/package.json

@@ -21,6 +21,7 @@
     "@rollup/plugin-commonjs": "^28.0.0",
     "@rollup/plugin-node-resolve": "^15.3.0",
     "@rollup/plugin-replace": "^6.0.1",
+    "rollup-plugin-serve": "^1.1.1",
     "babel-core": "^6.26.3",
     "babel-loader": "^9.2.1",
     "rollup": "^4.24.0",

apps/rollup-react/rollup.config.mjs

@@ -3,6 +3,9 @@ import commonjs from "@rollup/plugin-commonjs";
 import babel from "@rollup/plugin-babel";
 import replace from "@rollup/plugin-replace";
 import { IconifyPlugin } from "@oktaytest/rollup";
+import serve from "rollup-plugin-serve";
+
+const isDev = process.env.NODE_ENV === "development";
 
 /** @type {import('rollup')} */
 export default {
@@ -26,5 +29,6 @@ export default {
       preventAssignment: false,
       "process.env.NODE_ENV": '"development"',
     }),
+    ...(isDev ? [serve("public")] : []),
   ],
 };

apps/rspack-react/src/App.jsx

@@ -7,6 +7,7 @@ function App() {
   return (
     <div className="App">
       <Iconify name="mdi:home" />
+      <Iconify name="invalid:icon" />
     </div>
   );
 }

apps/vite-react/src/App.tsx

@@ -8,6 +8,7 @@ function App() {
       <Iconify name="mdi:home" />
       <Iconify name="logos:active-campaign" />
       <Iconify name="logos:apache-superset-icon" />
+      <Iconify name="invalid:icon" />
     </main>
   );
 }

packages/core/src/index.ts

@@ -13,7 +13,7 @@ export type IconifyOptions = {
   type?: "cjs" | "esm";
 };
 
-type Icon = {
+export type Icon = {
   svg: string;
   width: number;
   height: number;

packages/icon-loader/.gitignore

@@ -0,0 +1,28 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+node_modules
+.pnp
+.pnp.js
+
+
+# misc
+.DS_Store
+*.pem
+
+# build
+dist
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# turbo
+.turbo

packages/icon-loader/CHANGELOG.md

@@ -0,0 +1,20 @@
+# @oktaytest/core
+
+## 0.0.119
+
+### Patch Changes
+
+- add svelte support
+
+## 0.0.118
+
+### Patch Changes
+
+- add prepack scripts
+- 47ee90f: add prepack scripts
+
+## 0.0.114
+
+### Patch Changes
+
+- add vite and nuxt support

packages/icon-loader/package.json

@@ -0,0 +1,39 @@
+{
+  "name": "@oktaytest/icon-loader",
+  "version": "0.0.119",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "exports": {
+    ".": {
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    },
+    "./constants": {
+      "import": "./dist/constants.mjs",
+      "require": "./dist/constants.js",
+      "types": "./dist/constants.d.mts"
+    }
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "clean": "rm -rf dist",
+    "prepack": "yarn build"
+  },
+  "devDependencies": {
+    "@oktaytest/typescript-config": "*",
+    "@oktaytest/core": "*",
+    "tsup": "^8.0.1",
+    "typescript": "^5.3.3"
+  },
+  "dependencies": {
+    "svgson": "^5.3.1"
+  }
+}

packages/icon-loader/src/index.ts

@@ -0,0 +1,65 @@
+import type { Icon } from "@oktaytest/core";
+import { parseSync, stringify } from "svgson";
+
+// @ts-ignore
+import _icons from "oktay";
+
+const icons = _icons as Record<string, Icon>;
+
+export const fallbackIcon: Icon = {
+  svg: '<svg width="32" height="32" viewBox="0 0 24 24" > <path fill="currentColor" d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10s-4.477 10-10 10m0-2a8 8 0 1 0 0-16a8 8 0 0 0 0 16m-1-5h2v2h-2zm2-1.645V14h-2v-1.5a1 1 0 0 1 1-1a1.5 1.5 0 1 0-1.471-1.794l-1.962-.393A3.501 3.501 0 1 1 13 13.355" /> </svg>',
+  width: 32,
+  height: 32,
+};
+
+export type IconProps = {
+  name: string;
+  size?: number;
+  color?: string;
+};
+
+export type GetIconDetailsOptions = {
+  icon: Icon;
+  props: IconProps;
+};
+
+const loadIcon = (iconName: string) => {
+  const icon = icons?.[iconName];
+
+  if (icon) return icon;
+
+  console.warn(
+    `[Iconify] The icon "${iconName}" is missing from the configuration. To resolve this, ensure it is added to the 'icons' array within the Iconify plugin's configuration.`
+  );
+
+  return fallbackIcon;
+};
+
+export const getIconDetails = (props: IconProps) => {
+  const icon = loadIcon(props.name);
+
+  const parsed = parseSync(icon.svg);
+
+  let innerHtml = parsed.children.map((child) => stringify(child)).join("");
+
+  if (props.color) {
+    innerHtml = innerHtml.replace(/fill="([^"]+)"/, `fill="${props.color}"`);
+  }
+
+  const ratio = icon.width / icon.height;
+
+  const height = props.size ? props.size : icon.height;
+
+  const width = props.size ? props.size * ratio : icon.width;
+
+  const attributes: Record<string, string> = {
+    ...parsed.attributes,
+    width: `${width}px`,
+    height: `${height}px`,
+  };
+
+  return {
+    innerHtml,
+    attributes,
+  };
+};

packages/icon-loader/tsconfig.json

@@ -0,0 +1,8 @@
+{
+  "extends": "@oktaytest/typescript-config/react-native-library",
+  "include": ["."],
+  "exclude": ["dist", "build", "node_modules"],
+  "compilerOptions": {
+    "strict": true
+  }
+}

packages/icon-loader/tsup.config.ts

@@ -0,0 +1,10 @@
+import { defineConfig, Options } from "tsup";
+
+export default defineConfig((options: Options) => ({
+  entry: ["src/index.ts"],
+  clean: true,
+  format: ["cjs", "esm"],
+  external: ["oktay"],
+  dts: true,
+  ...options,
+}));

packages/react/package.json

@@ -33,8 +33,8 @@
     "typescript": "^5.3.3"
   },
   "dependencies": {
-    "html-react-parser": "^5.1.16",
-    "@oktaytest/core": "*"
+    "@oktaytest/core": "*",
+    "@oktaytest/icon-loader": "*"
   },
   "peerDependencies": {
     "react": ">=18.2.0"

packages/react/src/iconify.tsx

@@ -1,74 +1,17 @@
 import React from "react";
+import { getIconDetails } from "@oktaytest/icon-loader";
 
-import { IconifyProps, RuntimeIcon, RuntimeIconifyProps } from "./types";
-import { setAttributes } from "./utils";
-
-const getIcon = (iconName: string) =>
-  new Promise<RuntimeIcon>(async (resolve, reject) => {
-    try {
-      // todo: add error handling
-      // @ts-ignore
-      const iconsImport = await import("oktay");
-
-      const icons = iconsImport.default ?? iconsImport;
-
-      let icon = icons[iconName];
-
-      if (!icon) {
-        console.warn(
-          `[Iconify] The icon "${iconName}" is missing from the configuration. To resolve this, ensure it is added to the 'icons' array within the Iconify plugin's configuration.`
-        );
-
-        // @ts-ignore
-        const constantsImport = await import("@oktaytest/core/constants");
-
-        const constants = constantsImport.default ?? constantsImport;
-
-        const fallbackIcon = constants.fallbackIcon;
-
-        icon = fallbackIcon;
-      }
-
-      resolve(icon);
-    } catch (error) {
-      reject(error);
-    }
-  });
-
-const webIcon = async (props: RuntimeIconifyProps) => {
-  // @ts-ignore
-  const parse = await import("html-react-parser");
-
-  return parse.default(props.icon.svg);
-};
-
-const getComponent = async (props: RuntimeIconifyProps) => {
-  const formatted = setAttributes(props);
-
-  return webIcon(formatted);
-};
+import { IconifyProps } from "./types";
 
 export const Iconify = (props: IconifyProps) => {
-  const [Component, setComponent] = React.useState<React.ReactNode | null>(
-    null
-  );
+  const details = getIconDetails(props);
 
-  const renderIcon = async () => {
-    const icon = await getIcon(props.name);
-
-    const component = await getComponent({
-      ...props,
-      icon,
-    });
-
-    setComponent(component);
-  };
-
-  React.useEffect(() => {
-    renderIcon();
-  }, [props]);
-
-  return Component;
+  return (
+    <svg
+      {...details.attributes}
+      dangerouslySetInnerHTML={{ __html: details.innerHtml }}
+    />
+  );
 };
 
 export default Iconify;

packages/react/src/types.ts

@@ -3,13 +3,3 @@ export interface IconifyProps {
   size?: number;
   color?: string;
 }
-
-export interface RuntimeIcon {
-  svg: string;
-  width: number;
-  height: number;
-}
-
-export interface RuntimeIconifyProps extends IconifyProps {
-  icon: RuntimeIcon;
-}

packages/vite/src/index.ts

@@ -20,5 +20,8 @@ export const IconifyPlugin = (options: IconifyOptions): PluginOption[] => [
     async buildStart() {
       await loadIcons({ type: "esm", ...options });
     },
+    load(id) {
+      return null;
+    },
   },
 ];