Add change color in hover at the blog text image

package.json

@@ -21,6 +21,7 @@
     "react-icons": "^5.0.1",
     "react-image-gallery": "^1.3.0",
     "react-star-ratings": "^2.3.0",
+    "react-svg": "^16.1.33",
     "tailwind-merge": "^2.2.1",
     "tailwindcss-animate": "^1.0.7"
   },

src/app/globals.css

@@ -69,7 +69,13 @@ html,
     --input: 217.2 32.6% 17.5%;
     --ring: 212.7 26.8% 83.9%;
   }
-
+  .fil0 {
+    height: 100%;
+    width: 100%;
+  }
+  svg:hover .fil0 {
+    fill: red;
+  }
   * {
     @apply border-border;
   }

src/components/Blog/index.tsx

@@ -1,19 +1,24 @@
+"use client";
+import { ReactSVG } from "react-svg";
 import Link from "next/link";
 import Image from "next/image";
 import { FC } from "react";
 
 const Blog: FC = () => {
   return (
-    <section className='w-full bg-black'>
-    <Link className="bg-cover bg-center bg-no-repeat bg-fixed bg-banner flex items-center justify-center max-w-[1920px] mx-auto px-4 ms:px-0" href={'https://actualizatucarro.blogspot.com'} target='_blank'>
-      <Image
-        src={'/images/blog.webp'}
-        alt="Título del Blog"
-        width={668}
-        height={363}
-        loading="lazy"
-      />
-    </Link>
+    <section className="w-full bg-black">
+      <Link
+        className="bg-cover bg-center bg-no-repeat bg-fixed bg-banner flex items-center justify-center max-w-[1920px] mx-auto px-4 ms:px-0"
+        href={"https://actualizatucarro.blogspot.com"}
+        target="_blank"
+      >
+        <ReactSVG
+          src="/icons/blogLogo.svg"
+          beforeInjection={(svg) => {
+            svg.classList.add("fil0");
+          }}
+        />
+      </Link>
     </section>
   );
 };