From c6f599cc616e9f5f637b98e4d0390aa703d52b37 Mon Sep 17 00:00:00 2001
From: Harel M <harel.mazor@gmail.com>
Date: Sat, 13 Sep 2025 23:11:13 +0300
Subject: [PATCH] Unite icons (#1374)

## Launch Checklist

This removes the `@mdi` (material design icons) package and uses the
icons from `react-icons`.
The icons are not exactly the same, but have the same idea behind them.

 - [x] Briefly describe the changes in this PR.
- [x] Include before/after visuals or gifs if this PR includes visual
changes.
 - [x] Add an entry to `CHANGELOG.md` under the `## main` section.

Main changes can be found below.
Before:
<img width="580" height="780" alt="image"
src="https://github.com/user-attachments/assets/e3d5fc8a-bd59-48fe-bdae-31bb290749c8"
/>


After:

<img width="580" height="780" alt="image"
src="https://github.com/user-attachments/assets/bacdbdba-9e73-4bef-bd30-26fe946269c1"
/>

---------

Co-authored-by: pre-commit-ci[bot] <66853113+pre-commit-ci[bot]@users.noreply.github.com>
---
 CHANGELOG.md                        |  1 +
 package-lock.json                   | 15 ---------------
 package.json                        |  2 --
 src/components/FilterEditor.tsx     | 17 ++++++-----------
 src/components/LayerEditorGroup.tsx | 20 ++++----------------
 src/components/_DataProperty.tsx    | 13 ++++++-------
 src/components/_FunctionButtons.tsx |  6 ++----
 src/components/_ZoomProperty.tsx    | 13 ++++++-------
 8 files changed, 25 insertions(+), 62 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 0923f698..a3201ef4 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -3,6 +3,7 @@
 ### ✨ Features and improvements
 - Added translation to "Links" in debug modal
 - Add support for hillshade's color arrays and relief-color elevation expression
+- Remove `@mdi` packages in favor of `react-icons`
 - _...Add new stuff here..._
 
 ### 🐞 Bug fixes
diff --git a/package-lock.json b/package-lock.json
index e33d5ac2..54512c5e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -16,8 +16,6 @@
         "@maplibre/maplibre-gl-geocoder": "^1.9.0",
         "@maplibre/maplibre-gl-inspect": "^1.7.1",
         "@maplibre/maplibre-gl-style-spec": "^23.3.0",
-        "@mdi/js": "^7.4.47",
-        "@mdi/react": "^1.6.1",
         "@prantlf/jsonlint": "^16.0.0",
         "array-move": "^4.0.0",
         "buffer": "^6.0.3",
@@ -1953,19 +1951,6 @@
         "supercluster": "^8.0.1"
       }
     },
-    "node_modules/@mdi/js": {
-      "version": "7.4.47",
-      "resolved": "https://registry.npmjs.org/@mdi/js/-/js-7.4.47.tgz",
-      "integrity": "sha512-KPnNOtm5i2pMabqZxpUz7iQf+mfrYZyKCZ8QNz85czgEt7cuHcGorWfdzUMWYA0SD+a6Hn4FmJ+YhzzzjkTZrQ=="
-    },
-    "node_modules/@mdi/react": {
-      "version": "1.6.1",
-      "resolved": "https://registry.npmjs.org/@mdi/react/-/react-1.6.1.tgz",
-      "integrity": "sha512-4qZeDcluDFGFTWkHs86VOlHkm6gnKaMql13/gpIcUQ8kzxHgpj31NuCkD8abECVfbULJ3shc7Yt4HJ6Wu6SN4w==",
-      "dependencies": {
-        "prop-types": "^15.7.2"
-      }
-    },
     "node_modules/@nodelib/fs.scandir": {
       "version": "2.1.5",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
diff --git a/package.json b/package.json
index 026261f9..3d1a9024 100644
--- a/package.json
+++ b/package.json
@@ -31,8 +31,6 @@
     "@maplibre/maplibre-gl-geocoder": "^1.9.0",
     "@maplibre/maplibre-gl-inspect": "^1.7.1",
     "@maplibre/maplibre-gl-style-spec": "^23.3.0",
-    "@mdi/js": "^7.4.47",
-    "@mdi/react": "^1.6.1",
     "@prantlf/jsonlint": "^16.0.0",
     "array-move": "^4.0.0",
     "buffer": "^6.0.3",
diff --git a/src/components/FilterEditor.tsx b/src/components/FilterEditor.tsx
index df1ca85b..b9767423 100644
--- a/src/components/FilterEditor.tsx
+++ b/src/components/FilterEditor.tsx
@@ -1,9 +1,9 @@
 import React from "react";
-import {mdiTableRowPlusAfter} from "@mdi/js";
+import { TbMathFunction } from "react-icons/tb";
+import { PiListPlusBold } from "react-icons/pi";
 import {isEqual} from "lodash";
 import {type ExpressionSpecification, type LegacyFilterSpecification} from "maplibre-gl";
 import {latest, migrate, convertFilter} from "@maplibre/maplibre-gl-style-spec";
-import {mdiFunctionVariant} from "@mdi/js";
 
 import {combiningFilterOps} from "../libs/filterops";
 import InputSelect from "./InputSelect";
@@ -198,9 +198,7 @@ class FilterEditorInternal extends React.Component<FilterEditorInternalProps, Fi
           onClick={this.makeExpression}
           title={t("Convert to expression")}
         >
-          <svg style={{marginRight: "0.2em", width:"14px", height:"14px", verticalAlign: "middle"}} viewBox="0 0 24 24">
-            <path fill="currentColor" d={mdiFunctionVariant} />
-          </svg>
+          <TbMathFunction />
           {t("Upgrade to expression")}
         </InputButton>
       </div>;
@@ -217,9 +215,7 @@ class FilterEditorInternal extends React.Component<FilterEditorInternalProps, Fi
             title={t("Convert to expression")}
             className="maputnik-make-zoom-function"
           >
-            <svg style={{width:"14px", height:"14px", verticalAlign: "middle"}} viewBox="0 0 24 24">
-              <path fill="currentColor" d={mdiFunctionVariant} />
-            </svg>
+            <TbMathFunction />
           </InputButton>
         </div>
       );
@@ -272,9 +268,8 @@ class FilterEditorInternal extends React.Component<FilterEditorInternalProps, Fi
               className="maputnik-add-filter"
               onClick={this.addFilterItem}
             >
-              <svg style={{width:"14px", height:"14px", verticalAlign: "text-bottom"}} viewBox="0 0 24 24">
-                <path fill="currentColor" d={mdiTableRowPlusAfter} />
-              </svg> {t("Add filter")}
+              <PiListPlusBold style={{ verticalAlign: "text-bottom" }} />
+              {t("Add filter")}
             </InputButton>
           </div>
           <div
diff --git a/src/components/LayerEditorGroup.tsx b/src/components/LayerEditorGroup.tsx
index d41a738f..6d431aa7 100644
--- a/src/components/LayerEditorGroup.tsx
+++ b/src/components/LayerEditorGroup.tsx
@@ -1,9 +1,5 @@
 import React from "react";
-import Icon from "@mdi/react";
-import {
-  mdiMenuDown,
-  mdiMenuUp
-} from "@mdi/js";
+import {MdArrowDropDown, MdArrowDropUp} from "react-icons/md";
 import {
   AccordionItem,
   AccordionItemHeading,
@@ -30,17 +26,9 @@ export default class LayerEditorGroup extends React.Component<LayerEditorGroupPr
         onClick={_e => this.props.onActiveToggle(!this.props.isActive)}
       >
         <AccordionItemButton className="maputnik-layer-editor-group__button">
-          <span style={{flexGrow: 1}}>{this.props.title}</span>
-          <Icon
-            path={mdiMenuUp}
-            size={1}
-            className="maputnik-layer-editor-group__button__icon maputnik-layer-editor-group__button__icon--up"
-          />
-          <Icon
-            path={mdiMenuDown}
-            size={1}
-            className="maputnik-layer-editor-group__button__icon maputnik-layer-editor-group__button__icon--down"
-          />
+          <span style={{flexGrow: 1, alignContent: "center"}}>{this.props.title}</span>
+          <MdArrowDropUp size={"2em"} className="maputnik-layer-editor-group__button__icon maputnik-layer-editor-group__button__icon--up"></MdArrowDropUp>
+          <MdArrowDropDown size={"2em"} className="maputnik-layer-editor-group__button__icon maputnik-layer-editor-group__button__icon--down"></MdArrowDropDown>
         </AccordionItemButton>
       </AccordionItemHeading>
       <AccordionItemPanel>
diff --git a/src/components/_DataProperty.tsx b/src/components/_DataProperty.tsx
index 669eb610..6d88c8ce 100644
--- a/src/components/_DataProperty.tsx
+++ b/src/components/_DataProperty.tsx
@@ -1,5 +1,6 @@
 import React from "react";
-import {mdiFunctionVariant, mdiTableRowPlusAfter} from "@mdi/js";
+import {PiListPlusBold} from "react-icons/pi";
+import {TbMathFunction} from "react-icons/tb";
 import latest from "@maplibre/maplibre-gl-style-spec/dist/latest.json";
 
 import InputButton from "./InputButton";
@@ -360,18 +361,16 @@ class DataPropertyInternal extends React.Component<DataPropertyInternalProps, Da
                 className="maputnik-add-stop"
                 onClick={this.props.onAddStop?.bind(this)}
               >
-                <svg style={{width:"14px", height:"14px", verticalAlign: "text-bottom"}} viewBox="0 0 24 24">
-                  <path fill="currentColor" d={mdiTableRowPlusAfter} />
-                </svg> {t("Add stop")}
+                <PiListPlusBold style={{ verticalAlign: "text-bottom" }} />
+                {t("Add stop")}
               </InputButton>
             }
             <InputButton
               className="maputnik-add-stop"
               onClick={this.props.onExpressionClick?.bind(this)}
             >
-              <svg style={{width:"14px", height:"14px", verticalAlign: "text-bottom"}} viewBox="0 0 24 24">
-                <path fill="currentColor" d={mdiFunctionVariant} />
-              </svg> {t("Convert to expression")}
+              <TbMathFunction style={{ verticalAlign: "text-bottom" }} />
+              {t("Convert to expression")}
             </InputButton>
           </div>
         </div>
diff --git a/src/components/_FunctionButtons.tsx b/src/components/_FunctionButtons.tsx
index c1e97a6e..d72efb95 100644
--- a/src/components/_FunctionButtons.tsx
+++ b/src/components/_FunctionButtons.tsx
@@ -2,7 +2,7 @@ import React from "react";
 
 import InputButton from "./InputButton";
 import {MdFunctions, MdInsertChart} from "react-icons/md";
-import {mdiFunctionVariant} from "@mdi/js";
+import { TbMathFunction } from "react-icons/tb";
 import { type WithTranslation, withTranslation } from "react-i18next";
 
 type FunctionInputButtonsInternalProps = {
@@ -24,9 +24,7 @@ class FunctionInputButtonsInternal extends React.Component<FunctionInputButtonsI
           onClick={this.props.onExpressionClick}
           title={t("Convert to expression")}
         >
-          <svg style={{width:"14px", height:"14px", verticalAlign: "middle"}} viewBox="0 0 24 24">
-            <path fill="currentColor" d={mdiFunctionVariant} />
-          </svg>
+          <TbMathFunction />
         </InputButton>
       );
 
diff --git a/src/components/_ZoomProperty.tsx b/src/components/_ZoomProperty.tsx
index 9addd8f5..fd1301df 100644
--- a/src/components/_ZoomProperty.tsx
+++ b/src/components/_ZoomProperty.tsx
@@ -1,5 +1,6 @@
 import React from "react";
-import {mdiFunctionVariant, mdiTableRowPlusAfter} from "@mdi/js";
+import { PiListPlusBold } from "react-icons/pi";
+import { TbMathFunction } from "react-icons/tb";
 import latest from "@maplibre/maplibre-gl-style-spec/dist/latest.json";
 import { type WithTranslation, withTranslation } from "react-i18next";
 
@@ -233,17 +234,15 @@ class ZoomPropertyInternal extends React.Component<ZoomPropertyInternalProps, Zo
               className="maputnik-add-stop"
               onClick={this.props.onAddStop?.bind(this)}
             >
-              <svg style={{width:"14px", height:"14px", verticalAlign: "text-bottom"}} viewBox="0 0 24 24">
-                <path fill="currentColor" d={mdiTableRowPlusAfter} />
-              </svg> {t("Add stop")}
+              <PiListPlusBold style={{ verticalAlign: "text-bottom" }} />
+              {t("Add stop")}
             </InputButton>
             <InputButton
               className="maputnik-add-stop"
               onClick={this.props.onExpressionClick?.bind(this)}
             >
-              <svg style={{width:"14px", height:"14px", verticalAlign: "text-bottom"}} viewBox="0 0 24 24">
-                <path fill="currentColor" d={mdiFunctionVariant} />
-              </svg> {t("Convert to expression")}
+              <TbMathFunction style={{ verticalAlign: "text-bottom" }} />
+              {t("Convert to expression")}
             </InputButton>
           </div>
         </div>