Change github icon color on hover

QubitPi · Dec 1, 2024 · 06a50fa · 06a50fa
1 parent 5cf1309
commit 06a50fa
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 5 deletions.
diff --git a/src/components/Header.css b/src/components/Header.css
@@ -33,13 +33,17 @@
 }
 
 .header .GitHub {
-    padding: 0.5rem 2rem;
+    padding: 0.5rem 1rem;
 }
 
-.header .GitHub a img {
+.header .GitHub a svg {
     max-height: 2rem;
+    width: 50px;
+    height: 50px;
 }
 
-.header .GitHub a img {
-    max-height: 2rem;
+.header .GitHub a svg:hover {
+    fill: #5BBCFF;
 }
+
+
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
@@ -15,6 +15,8 @@
  */
 
 import "./Header.css"
+import { ReactComponent as GitHubSvg } from './images/github.svg';
+
 
 export default function Header() {
   return (
@@ -27,7 +29,7 @@ export default function Header() {
         </div>
         <div className="GitHub">
           <a href="https://github.com/QubitPi/VK-45.01">
-            <img src="/github.svg" alt="github"/>
+            <GitHubSvg />
           </a>
         </div>
       </div>

diff --git a/public/github.svg → src/components/images/github.svg b/public/github.svg → src/components/images/github.svg