add zenn icon

components/atoms/genericIcon.tsx

@@ -18,6 +18,8 @@ import {
   SiDeno,
 } from 'react-icons/si';
 
+import { SiZenn } from '@icons-pack/react-simple-icons';
+
 type Props = {
   iconName: string;
   styleName?: string;
@@ -42,6 +44,7 @@ const GenericIcon = (props: Props) => {
     right: <FaChevronRight />,
     left: <FaChevronLeft />,
     book: <FaBookOpen />,
+    zenn: <SiZenn />,
   };
 
   return <div className={styleName}>{icons[iconName]}</div>;

components/molecules/headerBar.tsx

@@ -9,14 +9,25 @@ const HeaderBar = () => {
           Kdevlog
         </h1>
       </Link>
-      <div id="github-icon-container" className="flex ml-64">
-        <a
-          id="github-icon"
-          href="https://github.com/dak2"
-          className="ml-2 text-2xl"
-        >
-          <GenericIcon iconName="github" />
-        </a>
+      <div id="icon-container" className="flex ml-64">
+        <div id="github-icon-container">
+          <a
+            id="github-icon"
+            href="https://github.com/dak2"
+            className="ml-2 text-2xl"
+          >
+            <GenericIcon iconName="github" />
+          </a>
+        </div>
+        <div id="zenn-icon-container" className="ml-6">
+          <a
+            id="github-icon"
+            href="https://zenn.dev/daichikk"
+            className="ml-2 text-2xl"
+          >
+            <GenericIcon iconName="zenn" />
+          </a>
+        </div>
       </div>
     </div>
   );

package.json

@@ -9,6 +9,7 @@
     "deploy": "vercel --prod"
   },
   "dependencies": {
+    "@icons-pack/react-simple-icons": "^8.0.1",
     "autoprefixer": "^10.2.5",
     "date-fns": "^2.30.0",
     "date-fns-tz": "^2.0.0",

styles/global.scss

@@ -20,7 +20,6 @@ html {
             padding-top: 40px;
           }
           #github-icon-container {
-            margin-left: auto;
             #github-icon {
               padding-top: 3vh;
               font-size: 15vh;