ui: get rid of @mdi/react

packages/ui/package-lock.json

@@ -14,7 +14,6 @@
       "devDependencies": {
         "@emotion/react": "11.11.1",
         "@mdi/js": "^7.2.96",
-        "@mdi/react": "^1.6.1",
         "@theme-ui/components": "^0.16.1",
         "@theme-ui/core": "^0.16.1",
         "@types/react": "^18.2.39",
@@ -29,7 +28,6 @@
       "peerDependencies": {
         "@emotion/react": ">=11",
         "@mdi/js": ">=7",
-        "@mdi/react": ">=1",
         "@theme-ui/components": ">=0.16",
         "@theme-ui/core": ">=0.16",
         "framer-motion": ">=10",
@@ -285,15 +283,6 @@
       "integrity": "sha512-MnRjknFqpTC6FifhGHjZ0+QYq2bAkZFQqIj8JA2AdPZbBxUvr8QSgB2yPAJ8/ob/XkR41xlg5majDR3c1JP1hw==",
       "dev": true
     },
-    "node_modules/@mdi/react": {
-      "version": "1.6.1",
-      "resolved": "https://registry.npmjs.org/@mdi/react/-/react-1.6.1.tgz",
-      "integrity": "sha512-4qZeDcluDFGFTWkHs86VOlHkm6gnKaMql13/gpIcUQ8kzxHgpj31NuCkD8abECVfbULJ3shc7Yt4HJ6Wu6SN4w==",
-      "dev": true,
-      "dependencies": {
-        "prop-types": "^15.7.2"
-      }
-    },
     "node_modules/@notesnook/theme": {
       "resolved": "../theme",
       "link": true

packages/ui/package.json

@@ -26,7 +26,6 @@
     "mac-scrollbar": "^0.10.3",
     "framer-motion": "^10.6.8",
     "@mdi/js": "^7.2.96",
-    "@mdi/react": "^1.6.1",
     "@types/react": "^18.2.39",
     "@types/react-dom": "^18.2.17",
     "@types/react-modal": "3.16.3",
@@ -42,7 +41,6 @@
     "framer-motion": ">=10",
     "react-modal": ">=3",
     "@mdi/js": ">=7",
-    "@mdi/react": ">=1",
     "@emotion/react": ">=11",
     "@theme-ui/components": ">=0.16",
     "@theme-ui/core": ">=0.16",

packages/ui/src/components/icon/index.tsx

@@ -17,7 +17,7 @@ You should have received a copy of the GNU General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
-import { Icon as MDIIcon } from "@mdi/react";
+import { MDIIcon } from "./mdi-icon";
 import { Theme } from "@notesnook/theme";
 import { isThemeColor, SchemeColors } from "@notesnook/theme";
 import { Flex, FlexProps } from "@theme-ui/components";

packages/ui/src/components/icon/mdi-icon.tsx

@@ -0,0 +1,168 @@
+/*
+This file is part of the Notesnook project (https://notesnook.com/)
+
+Copyright (C) 2023 Streetwriters (Private) Limited
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+GNU General Public License for more details.
+
+You should have received a copy of the GNU General Public License
+along with this program.  If not, see <http://www.gnu.org/licenses/>.
+*/
+
+import * as React from "react";
+import { CSSProperties } from "react";
+
+export interface IconProps {
+  className?: string;
+  id?: string;
+  path: string;
+  title?: string | null;
+  description?: string | null;
+  size?: number | string | null;
+  color?: string | null;
+  horizontal?: boolean;
+  vertical?: boolean;
+  rotate?: number;
+  spin?: boolean | number;
+  style?: CSSProperties;
+  inStack?: boolean;
+}
+
+let idCounter = 0;
+
+export const MDIIcon = React.forwardRef<SVGSVGElement, IconProps>(
+  function MDIIcon(
+    {
+      path,
+      id = ++idCounter,
+      title = null,
+      description = null,
+      size = null,
+      color = "currentColor",
+      horizontal = false,
+      vertical = false,
+      rotate = 0,
+      spin = false,
+      style = {} as CSSProperties,
+      inStack = false,
+      ...rest
+    },
+    ref
+  ) {
+    const pathStyle: any = {};
+    const transform = [];
+    if (size !== null) {
+      if (inStack) {
+        transform.push(`scale(${size})`);
+      } else {
+        style.width = typeof size === "string" ? size : `${size * 1.5}rem`;
+        style.height = style.width;
+      }
+    }
+    if (horizontal) {
+      transform.push("scaleX(-1)");
+    }
+    if (vertical) {
+      transform.push("scaleY(-1)");
+    }
+    if (rotate !== 0) {
+      transform.push(`rotate(${rotate}deg)`);
+    }
+    if (color !== null) {
+      pathStyle.fill = color;
+    }
+    const pathElement = (
+      <path d={path} style={pathStyle} {...((inStack ? rest : {}) as any)} />
+    );
+    let transformElement = pathElement;
+    if (transform.length > 0) {
+      style.transform = transform.join(" ");
+      style.transformOrigin = "center";
+      if (inStack) {
+        transformElement = (
+          <g style={style}>
+            {pathElement}
+            <rect width="24" height="24" fill="transparent" />
+          </g>
+        );
+      }
+    }
+    let spinElement = transformElement;
+    const spinSec = spin === true || typeof spin !== "number" ? 2 : spin;
+    let inverse = !inStack && (horizontal || vertical);
+    if (spinSec < 0) {
+      inverse = !inverse;
+    }
+    if (spin) {
+      spinElement = (
+        <g
+          style={{
+            animation: `spin${inverse ? "-inverse" : ""} linear ${Math.abs(
+              spinSec
+            )}s infinite`,
+            transformOrigin: "center"
+          }}
+        >
+          {transformElement}
+          {!(horizontal || vertical || rotate !== 0) && (
+            <rect width="24" height="24" fill="transparent" />
+          )}
+        </g>
+      );
+    }
+    if (inStack) {
+      return spinElement;
+    }
+    let ariaLabelledby;
+    const labelledById = `icon_labelledby_${id}`;
+    const describedById = `icon_describedby_${id}`;
+    let role;
+    if (title) {
+      ariaLabelledby = description
+        ? `${labelledById} ${describedById}`
+        : labelledById;
+    } else {
+      role = "presentation";
+      if (description) {
+        throw new Error("title attribute required when description is set");
+      }
+    }
+    return (
+      <svg
+        ref={ref}
+        viewBox="0 0 24 24"
+        style={style}
+        role={role}
+        aria-labelledby={ariaLabelledby}
+        {...rest}
+      >
+        {title && <title id={labelledById}>{title}</title>}
+        {description && <desc id={describedById}>{description}</desc>}
+        {!inStack &&
+          spin &&
+          (inverse ? (
+            <style>
+              {
+                "@keyframes spin-inverse { from { transform: rotate(0deg) } to { transform: rotate(-360deg) } }"
+              }
+            </style>
+          ) : (
+            <style>
+              {
+                "@keyframes spin { from { transform: rotate(0deg) } to { transform: rotate(360deg) } }"
+              }
+            </style>
+          ))}
+        {spinElement}
+      </svg>
+    );
+  }
+);