feat: add social icon GitLab

closes #437

README.md

@@ -122,10 +122,10 @@ Open the `config.json` file and configure the radar to your needs.
 
 #### `config.social.[]`
 
-| Attribute | Description                                                                  |
+| Attribute | Description                                                                            |
-| --------- | ---------------------------------------------------------------------------- |
+| --------- | -------------------------------------------------------------------------------------- |
-| href      | URL to the website                                                           |
+| href      | URL to the website                                                                     |
-| icon      | One of `facebook`, `github`, `instagram`, `linkedin`, `x`, `xing`, `youtube` |
+| icon      | One of `facebook`, `github`, `gitlab`, `instagram`, `linkedin`, `x`, `xing`, `youtube` |
 
 ### Step 4: Add a help page with explanations
 

src/components/SocialLinks/SocialLinks.module.css

@@ -14,6 +14,7 @@
 }
 
 .link {
+  display: block;
   border: 1px solid var(--border);
   background: var(--foreground);
   padding: 6px;

src/components/SocialLinks/SocialLinks.tsx

@@ -3,6 +3,7 @@ import styles from "./SocialLinks.module.css";
 import {
   SocialFacebook,
   SocialGithub,
+  SocialGitlab,
   SocialInstagram,
   SocialLinkedin,
   SocialX,
@@ -22,6 +23,8 @@ function getIcon(name: string) {
       return SocialFacebook;
     case "github":
       return SocialGithub;
+    case "gitlab":
+      return SocialGitlab;
     case "instagram":
       return SocialInstagram;
     case "linkedin":
@@ -45,9 +48,14 @@ export function SocialLinks({ className }: SocialLinksProps) {
         const Icon = getIcon(link.icon);
         return (
           Icon && (
-            <li key={i} className={styles.link}>
+            <li key={i}>
-              <a href={link.href} target="_blank" rel="noopener noreferrer">
+              <a
-                {Icon && <Icon className={styles.icon} />}
+                href={link.href}
+                className={styles.link}
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                <Icon className={styles.icon} />
               </a>
             </li>
           )

src/icons/social-gitlab.svg

@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="a" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512">
+  <g id="b">
+    <path
+      d="M487.75,200.06l-.7-1.78L419.55,22.09c-1.37-3.45-3.81-6.38-6.95-8.37-6.44-4-14.69-3.55-20.66,1.11-2.88,2.34-4.98,5.52-5.99,9.09l-45.58,139.46h-184.58L110.2,23.93c-.99-3.59-3.09-6.78-5.99-9.12-5.97-4.66-14.22-5.11-20.66-1.11-3.13,1.99-5.56,4.92-6.95,8.37L8.96,198.18l-.67,1.78c-19.96,52.17-3.01,111.25,41.58,144.89l.23.18.62.44,102.84,77.01,50.88,38.51,30.99,23.4c7.45,5.66,17.76,5.66,25.21,0l30.99-23.4,50.88-38.51,103.46-77.48.26-.21c44.49-33.64,61.41-92.62,41.53-144.73Z" stroke-width="0"/>
+  </g>
+</svg>