use map for icons

src/components/icon/Icon.tsx

@@ -1,6 +1,6 @@
 import cx from 'classnames';
 import React from 'react';
-import styles from './icon.css';
+import styles from './icon.scss';
 
 type IconProps = {
   icon: string,

src/components/icon/icon.css

@@ -1,46 +0,0 @@
-:root {
-    --icon-settings: '\e900';
-    --icon-plus: '\e901';
-    --icon-trash: '\e902';
-    --icon-edit: '\e903';
-    --icon-tick: '\e904';
-}
-
-.icon {
-    display: inline-flex;
-    align-items: center;
-
-    &:after {
-        font-family: simpleCalorieTracker;
-    }
-
-    &.icon-settings {
-        &:after {
-            content: var(--icon-settings);
-        }
-    }
-
-    &.icon-plus {
-        &:after {
-            content: var(--icon-plus);
-        }
-    }
-
-    &.icon-edit {
-        &:after {
-            content: var(--icon-edit);
-        }
-    }
-
-    &.icon-trash {
-        &:after {
-            content: var(--icon-trash);
-        }
-    }
-
-    &.icon-tick {
-        &:after {
-            content: var(--icon-tick);
-        }
-    }
-}

src/components/icon/icon.scss

@@ -0,0 +1,16 @@
+@import '../../styles/maps/icons';
+
+.icon {
+    display: inline-flex;
+    align-items: center;
+
+    &:after {
+        font-family: simpleCalorieTracker;
+    }
+
+    @each $name, $value in $icons {
+        &.icon-#{$name}:after {
+            content: $value;
+        }
+    }
+}

src/styles/maps/icons.scss

@@ -0,0 +1,7 @@
+$icons: (
+  settings: '\e900',
+  plus: '\e901',
+  trash: '\e902',
+  edit: '\e903',
+  tick: '\e904'
+);

src/styles/maps/icons.yml

@@ -1,2 +0,0 @@
-settings: '\e900'
-plus: '\e901'