Dark Mode Icon Rendering Fixed

womenintech · Mar 28, 2022 · b7354f0 · b7354f0
1 parent 241a88b
commit b7354f0
Showing 1 changed file with 57 additions and 18 deletions.
diff --git a/pages/index.js b/pages/index.js
@@ -1821,12 +1821,25 @@ export default function Home() {
                           target="_blank"
                           rel="noreferrer"
                         >
-                          <img
-                            src={`${icon.path}`}
-                            alt={`${icon.name}`}
-                            width="36"
-                            height="36"
-                          />
+                          {icon.darkPath ? (
+                            <img
+                              src={
+                                theme == "dark"
+                                  ? `https://raw.githubusercontent.com/danielcranney/readme-generator/main/public/icons/skills/${icon.iTag}-colored-dark.svg`
+                                  : `https://raw.githubusercontent.com/danielcranney/readme-generator/main/public/icons/skills/${icon.iTag}-colored.svg`
+                              }
+                              alt={`${icon.name}`}
+                              width="36"
+                              height="36"
+                            />
+                          ) : (
+                            <img
+                              src={`https://raw.githubusercontent.com/danielcranney/readme-generator/main/public/icons/skills/${icon.iTag}-colored.svg`}
+                              alt={`${icon.name}`}
+                              width="36"
+                              height="36"
+                            />
+                          )}
                         </a>
                       </div>
                     );
@@ -1845,12 +1858,25 @@ export default function Home() {
                           target="_blank"
                           rel="noreferrer"
                         >
-                          <img
-                            src={`${icon.path}`}
-                            alt={`${icon.name}`}
-                            width="36"
-                            height="36"
-                          />
+                          {icon.darkPath ? (
+                            <img
+                              src={
+                                theme == "dark"
+                                  ? `https://raw.githubusercontent.com/danielcranney/readme-generator/main/public/icons/skills/${icon.iTag}-colored-dark.svg`
+                                  : `https://raw.githubusercontent.com/danielcranney/readme-generator/main/public/icons/skills/${icon.iTag}-colored.svg`
+                              }
+                              alt={`${icon.name}`}
+                              width="36"
+                              height="36"
+                            />
+                          ) : (
+                            <img
+                              src={`https://raw.githubusercontent.com/danielcranney/readme-generator/main/public/icons/skills/${icon.iTag}-colored.svg`}
+                              alt={`${icon.name}`}
+                              width="36"
+                              height="36"
+                            />
+                          )}
                         </a>
                       </div>
                     );
@@ -1870,12 +1896,25 @@ export default function Home() {
                           target="_blank"
                           rel="noreferrer"
                         >
-                          <img
-                            src={`${icon.path}`}
-                            alt={`${icon.name}`}
-                            width="36"
-                            height="36"
-                          />
+                          {icon.darkPath ? (
+                            <img
+                              src={
+                                theme == "dark"
+                                  ? `https://raw.githubusercontent.com/danielcranney/readme-generator/main/public/icons/skills/${icon.iTag}-colored-dark.svg`
+                                  : `https://raw.githubusercontent.com/danielcranney/readme-generator/main/public/icons/skills/${icon.iTag}-colored.svg`
+                              }
+                              alt={`${icon.name}`}
+                              width="36"
+                              height="36"
+                            />
+                          ) : (
+                            <img
+                              src={`https://raw.githubusercontent.com/danielcranney/readme-generator/main/public/icons/skills/${icon.iTag}-colored.svg`}
+                              alt={`${icon.name}`}
+                              width="36"
+                              height="36"
+                            />
+                          )}
                         </a>
                       </div>
                     );