feat(icon): uses new icon

use new icons on Sound component
mateusfg7 · Aug 31, 2020 · 7ccb029 · 7ccb029
1 parent 74f864f
commit 7ccb029
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 4 deletions.
diff --git a/src/components/Sound/index.tsx b/src/components/Sound/index.tsx
@@ -8,6 +8,24 @@ export default function Sound({
   VolumeController,
   env,
 }: ISound): JSX.Element {
+  const icons: { [index: string]: string } = {
+    rain: 'icofont-rainy',
+    storm: 'icofont-rainy-thunder',
+    wind: 'icofont-wind',
+    water: 'icofont-water-drop',
+    'ocean-waves': 'icofont-wind-waves',
+    'small-waves': 'icofont-wave',
+    'forest-ambience': 'icofont-tree-alt',
+    leafs: 'icofont-leaf',
+    fire: 'icofont-fire-burn',
+    night: 'icofont-night',
+    coffee: 'icofont-coffee-mug',
+    fan: 'icofont-headphone',
+    train: 'icofont-train-line',
+    'air-plane': 'icofont-airplane',
+    underwater: 'icofont-swimmer',
+  };
+
   const [state, setState] = useState(false);
 
   return (
@@ -28,7 +46,7 @@ export default function Sound({
           changeStateOfAudio(audio, state, setState, button, audioController);
         }}
       >
-        <img src={`/Noisekun/icons/${name}.svg`} alt={name} />
+        <i className={`${icons[name]} icons`} />
       </SoundButton>
 
       <VolumeController

diff --git a/src/components/Sound/styles.ts b/src/components/Sound/styles.ts
@@ -18,16 +18,20 @@ export const SoundButton = styled.div`
   width: 100px;
   height: 100px;
 
-  opacity: 0.5;
+  color: rgba(255, 255, 255, 0.5);
 
   transition: 0.1s;
 
   &:hover {
     cursor: pointer;
-    opacity: 0.8;
+    color: rgba(255, 255, 255, 0.8);
   }
 
   &.selected {
-    opacity: 1;
+    color: rgba(255, 255, 255, 1);
+  }
+
+  .icons {
+    font-size: 80px;
   }
 `;