From ad0015323c252eb32a1cd75b267639a8902b8594 Mon Sep 17 00:00:00 2001
From: Yann Papouin <ypa@decgroupe.com>
Date: Wed, 31 May 2023 12:03:59 +0000
Subject: [PATCH] [IMP] Save/restore iconify name

---
 src/App.js                          | 9 ++++++---
 src/components/IconifyIconPicker.js | 4 ++--
 src/icon/icon.js                    | 1 +
 3 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/src/App.js b/src/App.js
index 86d2bac..900b33b 100644
--- a/src/App.js
+++ b/src/App.js
@@ -22,6 +22,7 @@ const App = () => {
     const [iconSpec, setIconSpec] = useState({
         version: VERSIONS[VERSIONS.length -1],
         iconPath: null,
+        iconIconifyName: null,
         color: DEFAULT_COLORS[Math.floor(Math.random()*DEFAULT_COLORS.length)],
         size: 65,
     });
@@ -44,6 +45,7 @@ const App = () => {
                     size: specs.iconSize * 100,
                     color: specs.backgroundColor,
                     iconPath: specs.iconPathData,
+                    iconNameSanitized: specs.iconIconifyName,
                 }
                 setIconSpec(iconSpec => {return {...iconSpec, ...newSpecs}})
             } else {
@@ -54,8 +56,8 @@ const App = () => {
         reader.readAsText(file);
     }, []);
 
-    const onChangeIconPicker = useCallback(iconPath => {
-        setIconSpec(iconSpec => {return {...iconSpec, iconPath}});
+    const onChangeIconPicker = useCallback(iconDetails => {
+        setIconSpec(iconSpec => {return {...iconSpec, ...iconDetails}});
     }, []);
 
     const {getRootProps} = useDropzone({
@@ -65,10 +67,11 @@ const App = () => {
     })
 
     useEffect(() => {
-        const {version, iconPath, color, size} = iconSpec;
+        const {version, iconPath, name, color, size} = iconSpec;
         setLoading(true);
         setIcon(new OdooIcons[version]({
             iconPathData: iconPath,
+            iconIconifyName: name,
             backgroundColor: color,
             iconSize: size / 100,
         }));
diff --git a/src/components/IconifyIconPicker.js b/src/components/IconifyIconPicker.js
index 643e2fd..9ba82a9 100644
--- a/src/components/IconifyIconPicker.js
+++ b/src/components/IconifyIconPicker.js
@@ -11,7 +11,7 @@ import Iconify from '@iconify/iconify'
 const DEFAULT_ICON_NAME = "mdi:home";
 
 
-const IconifyIconPicker = ({name, required, placeholder, defaultValue, onChange}) => {
+const IconifyIconPicker = ({ name, required, placeholder, defaultValue, onChange }) => {
 
     const [iconName, setIconName] = useState(defaultValue || DEFAULT_ICON_NAME);
 
@@ -27,7 +27,7 @@ const IconifyIconPicker = ({name, required, placeholder, defaultValue, onChange}
             }
             const iconSVG = Iconify.renderSVG(iconNameSanitized).outerHTML;
             const iconPath = getCombinedPathFromSvg(iconSVG);
-            onChange && onChange(iconPath);
+            onChange && onChange({ iconPath: iconPath, name: iconNameSanitized });
         })();
     }, [iconName, onChange]);
 
diff --git a/src/icon/icon.js b/src/icon/icon.js
index 7390931..f2efb5d 100644
--- a/src/icon/icon.js
+++ b/src/icon/icon.js
@@ -72,6 +72,7 @@ class AbstractIcon {
             iconSize: 1,
             iconColor: "#000000",
             iconPathData: "",
+            iconIconifyName: "",
         }
     }
     get iconPathData() {