Use SVGs instead of emoji for the categories, making them consistent …

…over OSes
Flaburgan · Feb 26, 2025 · b414270 · b414270
1 parent 085d84e
commit b414270
Show file tree

Hide file tree

Showing 4 changed files with 3 additions and 15 deletions.
diff --git a/components/categories-selector.tsx b/components/categories-selector.tsx
@@ -43,7 +43,7 @@ export default function CategoriesSelector({setSelectedItems, setCategoriesMode}
               <div key={id} className={selectedCategories[id] ? classNames(styles.selected) : ""} onClick={() => updateCategories(id)}>
                 <div>
                   <h3>{category.name[locale]}</h3>
-                  <p>{category.emoji}</p>
+                  <img src={`./images/ademe/${category.slug}.svg`} />
                 </div>
               </div>
             );

diff --git a/data/ademe/0-categories.json b/data/ademe/0-categories.json
@@ -6,7 +6,6 @@
         "en": "Digital",
         "fr": "Numérique"
       },
-      "emoji": "💻",
       "slug": "numerique",
       "color": "#28c"
     },
@@ -16,7 +15,6 @@
         "en": "Food",
         "fr": "Alimentation"
       },
-      "emoji": "🍽",
       "slug": "alimentation",
       "color": "#acf"
     },
@@ -26,7 +24,6 @@
         "en": "Drink",
         "fr": "Boisson"
       },
-      "emoji": "🍹",
       "slug": "boisson",
       "color": "#d04"
     },
@@ -36,7 +33,6 @@
         "en": "Transport",
         "fr": "Transport"
       },
-      "emoji": "🚴‍♂️",
       "slug": "transport",
       "color": "#981b5e"
     },
@@ -46,7 +42,6 @@
         "en": "Clothing",
         "fr": "Habillement"
       },
-      "emoji": "👔",
       "slug": "habillement",
       "color": "#b0b"
     },
@@ -56,7 +51,6 @@
         "en": "Home Appliance",
         "fr": "Électroménager"
       },
-      "emoji": "🛁",
       "slug": "electromenager",
       "color": "#aab"
     },
@@ -66,7 +60,6 @@
         "en": "Furniture",
         "fr": "Mobilier"
       },
-      "emoji": "🪑",
       "slug": "mobilier",
       "color": "#d74"
     },
@@ -76,7 +69,6 @@
         "en": "Heating",
         "fr": "Chauffage"
       },
-      "emoji": "🏠",
       "slug": "chauffage",
       "color": "#4b1"
     },
@@ -86,7 +78,6 @@
         "en": "Fruits and Vegetables",
         "fr": "Fruits et légumes"
       },
-      "emoji": "🍅",
       "slug": "fruitsetlegumes",
       "color": "#d26"
     },
@@ -96,7 +87,6 @@
         "en": "Digital Use",
         "fr": "Usage numérique"
       },
-      "emoji": "✉️",
       "slug": "usagenumerique",
       "color": "#d26"
     }

diff --git a/styles/categories-selector.module.scss b/styles/categories-selector.module.scss
@@ -36,9 +36,8 @@
       margin-top: 0;
       margin-bottom: .5rem;
     }
-    p {
-      margin: 0;
-      font-size: 2rem;
+    img {
+      height: 50px;
     }
   }
 

diff --git a/types/AdemeECV.ts b/types/AdemeECV.ts
@@ -24,7 +24,6 @@ export interface AdemeCategory {
     en: string;
     fr: string;
   };
-  emoji: string;
   slug: string;
   color: string;
 }