feat(sound): import svg icons and remove old icon-fonts

mateusfg7 · Dec 13, 2021 · cd4c0c6 · cd4c0c6
1 parent 057437d
commit cd4c0c6
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 18 deletions.
diff --git a/src/components/Sound/index.tsx b/src/components/Sound/index.tsx
@@ -9,22 +9,22 @@ export interface ISound {
 }
 
 export const Sound: React.FC<ISound> = ({ name }) => {
-  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 rename: { [index: string]: string } = {
+    rain: 'rain',
+    storm: 'storm',
+    wind: 'wind',
+    drops: 'water',
+    waves: 'ocean-waves',
+    water: 'small-waves',
+    'birds-tree': 'forest-ambience',
+    leafs: 'leafs',
+    fire: 'fire',
+    night: 'night',
+    coffee: 'coffee',
+    'noise-block': 'fan',
+    train: 'train',
+    'air-plane': 'air-plane',
+    underwater: 'underwater'
   }
 
   const [soundIsActive, setSoundIsActive] = useState(false)
@@ -48,7 +48,7 @@ export const Sound: React.FC<ISound> = ({ name }) => {
     <SoundComponent>
       <audio loop preload="true" ref={soundHTMLRef}>
         <source
-          src={`${process.env.CDN_AUDIO_SERVER}/${name}.mp3`}
+          src={`${process.env.CDN_AUDIO_SERVER}/${rename[name]}.mp3`}
           type="audio/mp3"
         />
       </audio>
@@ -58,7 +58,7 @@ export const Sound: React.FC<ISound> = ({ name }) => {
         className={soundIsActive ? 'selected' : ''}
         onClick={() => toggleSoundState()}
       >
-        <i className={`${icons[name]} icons`} />
+        <img src={`/icons/${name}.svg`} className="icons" />
       </SoundButton>
 
       <VolumeController

diff --git a/src/components/Sound/styles.ts b/src/components/Sound/styles.ts
@@ -25,6 +25,9 @@ export const SoundButton = styled.div`
   &:hover {
     cursor: pointer;
     color: rgba(255, 255, 255, 0.8);
+    img {
+      opacity: 0.8;
+    }
 
     border-radius: 10%;
     background: rgba(255, 255, 255, 0.1);
@@ -33,6 +36,9 @@ export const SoundButton = styled.div`
 
   &.selected {
     color: rgba(255, 255, 255, 1);
+    img {
+      opacity: 1;
+    }
 
     border-radius: 10% 10% 0 0;
     background: rgba(255, 255, 255, 0.1);
@@ -42,6 +48,13 @@ export const SoundButton = styled.div`
     font-size: 80px;
   }
 
+  img {
+    width: 80px;
+    filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(288deg)
+      brightness(102%) contrast(102%);
+    opacity: 0.7;
+  }
+
   @media (max-width: 800px) {
     &:hover {
       background: none;