Merge pull request #32 from binhtran432k/fix/social-icon

binhtddev · web-flow · commit 2be7b3aa0571 · 2024-03-29T12:02:04.000+07:00
fix(social): use manual icon instead of plugin
diff --git a/bun.lockb b/bun.lockb
diff --git a/package.json b/package.json
@@ -48,7 +48,6 @@
     "vite-tsconfig-paths": "^4.2.1"
   },
   "dependencies": {
-    "@qwikest/icons": "^0.0.13",
     "clsx": "^2.1.0"
   }
 }
diff --git a/src/components/icon/icon.tsx b/src/components/icon/icon.tsx
@@ -0,0 +1,124 @@
+import { type QwikIntrinsicElements } from "@builder.io/qwik";
+
+export function SimpleIconsGithub(
+  props: QwikIntrinsicElements["svg"],
+  key: string,
+) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="1em"
+      height="1em"
+      viewBox="0 0 24 24"
+      {...props}
+      key={key}
+    >
+      <path
+        fill="currentColor"
+        d="M12 .297c-6.63 0-12 5.373-12 12c0 5.303 3.438 9.8 8.205 11.385c.6.113.82-.258.82-.577c0-.285-.01-1.04-.015-2.04c-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729c1.205.084 1.838 1.236 1.838 1.236c1.07 1.835 2.809 1.305 3.495.998c.108-.776.417-1.305.76-1.605c-2.665-.3-5.466-1.332-5.466-5.93c0-1.31.465-2.38 1.235-3.22c-.135-.303-.54-1.523.105-3.176c0 0 1.005-.322 3.3 1.23c.96-.267 1.98-.399 3-.405c1.02.006 2.04.138 3 .405c2.28-1.552 3.285-1.23 3.285-1.23c.645 1.653.24 2.873.12 3.176c.765.84 1.23 1.91 1.23 3.22c0 4.61-2.805 5.625-5.475 5.92c.42.36.81 1.096.81 2.22c0 1.606-.015 2.896-.015 3.286c0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"
+      ></path>
+    </svg>
+  );
+}
+
+export function SimpleIconsLinkedin(
+  props: QwikIntrinsicElements["svg"],
+  key: string,
+) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="1em"
+      height="1em"
+      viewBox="0 0 24 24"
+      {...props}
+      key={key}
+    >
+      <path
+        fill="currentColor"
+        d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037c-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85c3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 0 1-2.063-2.065a2.064 2.064 0 1 1 2.063 2.065m1.782 13.019H3.555V9h3.564zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0z"
+      ></path>
+    </svg>
+  );
+}
+
+export function SimpleIconsX(props: QwikIntrinsicElements["svg"], key: string) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="1em"
+      height="1em"
+      viewBox="0 0 24 24"
+      {...props}
+      key={key}
+    >
+      <path
+        fill="currentColor"
+        d="M18.901 1.153h3.68l-8.04 9.19L24 22.846h-7.406l-5.8-7.584l-6.638 7.584H.474l8.6-9.83L0 1.154h7.594l5.243 6.932ZM17.61 20.644h2.039L6.486 3.24H4.298Z"
+      ></path>
+    </svg>
+  );
+}
+
+export function SimpleIconsYoutube(
+  props: QwikIntrinsicElements["svg"],
+  key: string,
+) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="1em"
+      height="1em"
+      viewBox="0 0 24 24"
+      {...props}
+      key={key}
+    >
+      <path
+        fill="currentColor"
+        d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814M9.545 15.568V8.432L15.818 12z"
+      ></path>
+    </svg>
+  );
+}
+
+export function SimpleIconsInstagram(
+  props: QwikIntrinsicElements["svg"],
+  key: string,
+) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="1em"
+      height="1em"
+      viewBox="0 0 24 24"
+      {...props}
+      key={key}
+    >
+      <path
+        fill="currentColor"
+        d="M7.03.084c-1.277.06-2.149.264-2.91.563a5.874 5.874 0 0 0-2.124 1.388a5.878 5.878 0 0 0-1.38 2.127C.321 4.926.12 5.8.064 7.076C.008 8.354-.005 8.764.001 12.023c.007 3.259.021 3.667.083 4.947c.061 1.277.264 2.149.563 2.911c.308.789.72 1.457 1.388 2.123a5.872 5.872 0 0 0 2.129 1.38c.763.295 1.636.496 2.913.552c1.278.056 1.689.069 4.947.063c3.257-.007 3.668-.021 4.947-.082c1.28-.06 2.147-.265 2.91-.563a5.881 5.881 0 0 0 2.123-1.388a5.881 5.881 0 0 0 1.38-2.129c.295-.763.496-1.636.551-2.912c.056-1.28.07-1.69.063-4.948c-.006-3.258-.02-3.667-.081-4.947c-.06-1.28-.264-2.148-.564-2.911a5.892 5.892 0 0 0-1.387-2.123a5.857 5.857 0 0 0-2.128-1.38c-.764-.294-1.636-.496-2.914-.55C15.647.009 15.236-.006 11.977 0C8.718.008 8.31.021 7.03.084m.14 21.693c-1.17-.05-1.805-.245-2.228-.408a3.736 3.736 0 0 1-1.382-.895a3.695 3.695 0 0 1-.9-1.378c-.165-.423-.363-1.058-.417-2.228c-.06-1.264-.072-1.644-.08-4.848c-.006-3.204.006-3.583.061-4.848c.05-1.169.246-1.805.408-2.228c.216-.561.477-.96.895-1.382a3.705 3.705 0 0 1 1.379-.9c.423-.165 1.057-.361 2.227-.417c1.265-.06 1.644-.072 4.848-.08c3.203-.006 3.583.006 4.85.062c1.168.05 1.804.244 2.227.408c.56.216.96.475 1.382.895c.421.42.681.817.9 1.378c.165.422.362 1.056.417 2.227c.06 1.265.074 1.645.08 4.848c.005 3.203-.006 3.583-.061 4.848c-.051 1.17-.245 1.805-.408 2.23c-.216.56-.477.96-.896 1.38a3.705 3.705 0 0 1-1.378.9c-.422.165-1.058.362-2.226.418c-1.266.06-1.645.072-4.85.079c-3.204.007-3.582-.006-4.848-.06m9.783-16.192a1.44 1.44 0 1 0 1.437-1.442a1.44 1.44 0 0 0-1.437 1.442M5.839 12.012a6.161 6.161 0 1 0 12.323-.024a6.162 6.162 0 0 0-12.323.024M8 12.008A4 4 0 1 1 12.008 16A4 4 0 0 1 8 12.008"
+      ></path>
+    </svg>
+  );
+}
+
+export function SimpleIconsFacebook(
+  props: QwikIntrinsicElements["svg"],
+  key: string,
+) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="1em"
+      height="1em"
+      viewBox="0 0 24 24"
+      {...props}
+      key={key}
+    >
+      <path
+        fill="currentColor"
+        d="M9.101 23.691v-7.98H6.627v-3.667h2.474v-1.58c0-4.085 1.848-5.978 5.858-5.978c.401 0 .955.042 1.468.103a8.68 8.68 0 0 1 1.141.195v3.325a8.623 8.623 0 0 0-.653-.036a26.805 26.805 0 0 0-.733-.009c-.707 0-1.259.096-1.675.309a1.686 1.686 0 0 0-.679.622c-.258.42-.374.995-.374 1.752v1.297h3.919l-.386 2.103l-.287 1.564h-3.246v8.245C19.396 23.238 24 18.179 24 12.044c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.628 3.874 10.35 9.101 11.647"
+      ></path>
+    </svg>
+  );
+}
diff --git a/src/components/social/social-link.tsx b/src/components/social/social-link.tsx
@@ -1,8 +1,8 @@
-import { type JSXNode, component$ } from "@builder.io/qwik";
+import { component$, type JSXOutput } from "@builder.io/qwik";
 import { Link } from "@builder.io/qwik-city";
 
 export default component$(
-  ({ label, href, icon }: { label: string; href: string; icon: JSXNode }) => {
+  ({ label, href, icon }: { label: string; href: string; icon: JSXOutput }) => {
     return (
       <div class="group relative flex place-items-center">
         <span class="absolute left-0 top-0 origin-[38%48%] text-info group-hover:animate-spin group-hover:[animation-duration:200ms]">
diff --git a/src/components/social/social.tsx b/src/components/social/social.tsx
@@ -1,12 +1,12 @@
-import { type JSXNode, component$ } from "@builder.io/qwik";
+import { component$, type JSXOutput } from "@builder.io/qwik";
 import {
-  SiFacebook,
-  SiGithub,
-  SiInstagram,
-  SiLinkedin,
-  SiX,
-  SiYoutube,
-} from "@qwikest/icons/simpleicons";
+  SimpleIconsFacebook,
+  SimpleIconsGithub,
+  SimpleIconsInstagram,
+  SimpleIconsLinkedin,
+  SimpleIconsX,
+  SimpleIconsYoutube,
+} from "../icon/icon";
 import SocialLink from "./social-link";
 
 const socials = {
@@ -23,22 +23,18 @@ export default component$(() => {
     <ul class="container m-auto flex flex-wrap justify-center gap-4 px-2 py-4">
       {(
         [
-          ["Linkedin", socials.linkedin, SiLinkedin],
-          ["Github", socials.github, SiGithub],
-          ["Instagram", socials.instagram, SiInstagram],
-          ["X", socials.x, SiX],
-          ["Facebook", socials.facebook, SiFacebook],
-          ["Youtube", socials.youtube, SiYoutube],
-        ] as [string, string, (props: any) => JSXNode][]
+          ["Linkedin", socials.linkedin, SimpleIconsLinkedin],
+          ["Github", socials.github, SimpleIconsGithub],
+          ["Instagram", socials.instagram, SimpleIconsInstagram],
+          ["X", socials.x, SimpleIconsX],
+          ["Facebook", socials.facebook, SimpleIconsFacebook],
+          ["Youtube", socials.youtube, SimpleIconsYoutube],
+        ] as [string, string, () => JSXOutput][]
       )
         .filter(([, x]) => Boolean(x))
         .map(([label, href, Icon]) => (
           <li key={label} class="text-3xl">
-            <SocialLink
-              label={label}
-              href={href}
-              icon={(<Icon />) as JSXNode}
-            />
+            <SocialLink label={label} href={href} icon={<Icon />} />
           </li>
         ))}
     </ul>

Original file line number	Diff line number	Diff line change
`@@ -48,7 +48,6 @@`
`48`	`48`	`"vite-tsconfig-paths": "^4.2.1"`
`49`	`49`	`},`
`50`	`50`	`"dependencies": {`
`51`		`- "@qwikest/icons": "^0.0.13",`
`52`	`51`	`"clsx": "^2.1.0"`
`53`	`52`	`}`
`54`	`53`	`}`