Merge pull request #96 from Blazity/icons

fix: icon style

next.config.mjs

@@ -29,6 +29,13 @@ const config = withPlugins(
  },
  ],
  },
+ webpack: (config) => {
+ config.module.rules.push({
+ test: /\.svg$/i,
+ use: ["@svgr/webpack"],
+ })
+ return config
+ },
  })
 )
 

package.json

@@ -96,6 +96,7 @@
  "@storybook/react": "^7.4.6",
  "@storybook/test-runner": "^0.13.0",
  "@storybook/testing-library": "^0.1.0",
+ "@svgr/webpack": "^8.1.0",
  "@testing-library/jest-dom": "^5.16.5",
  "@testing-library/react": "^14.0.0",
  "@total-typescript/ts-reset": "^0.5.0",

src/components/Footer/Footer.tsx

@@ -1,8 +1,11 @@
-import { Facebook, Instagram, Twitter, Youtube } from "lucide-react"
 import Image from "next/image"
 import Link from "next/link"
 import { NextIntlClientProvider } from "next-intl"
 import { useLocale } from "@/i18n/i18n"
+import FacebookIcon from "../../../public/icons/facebook.svg"
+import InstagramIcon from "../../../public/icons/instagram.svg"
+import XIcon from "../../../public/icons/X.svg"
+import YoutubeIcon from "../../../public/icons/youtube.svg"
 import { DynamicLangSelect } from "../LangSelect/DynamicLangSelect"
 import { GetNavigationReturn } from "../Navigation/Navigation"
 
@@ -34,18 +37,18 @@ export async function Footer({ footer, logoUrl }: FooterProps) {
  </div>
  </div>
  <nav className="flex flex-col gap-10 md:gap-7">
- <div className="flex gap-4">
+ <div className="flex gap-5">
  <a href={twitterLink ?? ""} aria-label="Twitter" target="_blank" rel="noreferrer">
- <Twitter />
+ <XIcon />
  </a>
  <a href={facebookLink ?? ""} aria-label="Facebook" target="_blank" rel="noreferrer">
- <Facebook />
+ <FacebookIcon />
  </a>
  <a href={instagramLink ?? ""} aria-label="Instagram" target="_blank" rel="noreferrer">
- <Instagram />
+ <InstagramIcon />
  </a>
  <a href={youtubeLink ?? ""} aria-label="Youtube" target="_blank" rel="noreferrer">
- <Youtube />
+ <YoutubeIcon />
  </a>
  </div>
  <ul className="grid grid-cols-3 gap-x-10 gap-y-7 text-sm font-semibold md:gap-x-20">