Add icons to socials

astro.config.mjs

@@ -21,7 +21,9 @@ export default defineConfig({
         mdx(),
         icon({
             include: {
-                heroicons: ['*'], // Loads entire Material Design Icon set
+                heroicons: ['*'],
+                'fa-brands': ['*'],
+                'simple-icons': ['*'],
             },
         }),
     ],

package.json

@@ -24,7 +24,9 @@
         "tailwindcss-hero-patterns": "^0.1.2"
     },
     "devDependencies": {
+        "@iconify-json/fa-brands": "^1.1.4",
         "@iconify-json/heroicons": "^1.1.11",
+        "@iconify-json/simple-icons": "^1.1.59",
         "@typescript-eslint/parser": "^5.61.0",
         "astro-icon": "1.0.0-next.2",
         "autoprefixer": "^10.4.14",

pnpm-lock.yaml

@@ -43,9 +43,15 @@ dependencies:
     version: 0.1.2
 
 devDependencies:
+  '@iconify-json/fa-brands':
+    specifier: ^1.1.4
+    version: 1.1.4
   '@iconify-json/heroicons':
     specifier: ^1.1.11
     version: 1.1.11
+  '@iconify-json/simple-icons':
+    specifier: ^1.1.59
+    version: 1.1.59
   '@typescript-eslint/parser':
     specifier: ^5.61.0
     version: 5.61.0(eslint@8.44.0)(typescript@5.1.6)
@@ -997,12 +1003,24 @@ packages:
     resolution: {integrity: sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==}
     dev: true
 
+  /@iconify-json/fa-brands@1.1.4:
+    resolution: {integrity: sha512-JT9BgOFT17qgwctdjGbIKENcW2jEOzo22/SPTAT2T4ygQPtG4niBFnjkDZNcqk9JHSyc6sYvgb9NFKoJ8eGkHQ==}
+    dependencies:
+      '@iconify/types': 2.0.0
+    dev: true
+
   /@iconify-json/heroicons@1.1.11:
     resolution: {integrity: sha512-Autw98FvUTmBCgb4CuKZ7iQQ2633YBCmcCbAbVNU9hAo6vms9uVcbtrAQt/qlB+qzNi52PV3DWDiRtJgmPeZIw==}
     dependencies:
       '@iconify/types': 2.0.0
     dev: true
 
+  /@iconify-json/simple-icons@1.1.59:
+    resolution: {integrity: sha512-JlT/oEDiI2MtJbR/HgSFS4MIr+dmVMKxQKwM6S3E2/fhjS0BTuNybjrFH/XfIOQ4MlNp/ZBoxBmpdFsKC2gScw==}
+    dependencies:
+      '@iconify/types': 2.0.0
+    dev: true
+
   /@iconify/tools@3.0.2:
     resolution: {integrity: sha512-qEJ7IrqZuQHdS0lIZwk9dLeD0z9k7+EIN0qpo5YbUk1dA2gyluM9Xn/tmED7ZaVekkEQe3K3EcLGqNJQTyewzw==}
     dependencies:

src/components/ButtonSecondary.astro

@@ -7,7 +7,7 @@ export interface Props {
 }
 const { link, icon, external } = Astro.props
 
-const buttonPaddingX = 'md:px-[.75rem] px-[.5rem]'
+const buttonPaddingX = 'md:px-[.75rem] px-[.5rem] md:gap-[.5rem] gap-[.5rem]'
 const buttonPaddingY = 'py-[.5rem]'
 ---
 
@@ -15,7 +15,7 @@ const buttonPaddingY = 'py-[.5rem]'
     href={link}
     target={external ? '_blank' : '_self'}
     rel={external ? 'noopener noreferrer' : ''}
-    class={`rounded hover:bg-background-hover hover:text-font-hover focus-visible:bg-background-hover focus-visible:text-font-hover focus-visible:outline-none ${buttonPaddingX} ${buttonPaddingY}`}
+    class={`flex flex-row items-center rounded hover:bg-background-hover hover:text-font-hover focus-visible:bg-background-hover focus-visible:text-font-hover focus-visible:outline-none ${buttonPaddingX} ${buttonPaddingY}`}
 >
     {icon && <Icon name={icon} />}
     <slot />

src/components/content/index/Socials.astro

@@ -30,41 +30,43 @@ const socials: Social[] = [
         name: 'GitHub (Personal)',
         profile: 'Sudoer777',
         url: 'https://github.com/sudoer777',
+        icon: 'fa-brands:github',
     },
     {
         name: 'GitHub (R-Technics)',
-        profile: 'Sudoer777',
+        profile: 'ethanreece-rtechnics',
-        url: 'https://github.com/sudoer777',
+        url: 'https://github.com/ethanreece-rtechnics',
+        icon: 'heroicons:briefcase-solid',
     },
     {
         name: 'GitHub (Scrumfish)',
-        profile: 'Sudoer777',
+        profile: 'ethanreece-scrumfish',
-        url: 'https://github.com/sudoer777',
+        url: 'https://github.com/ethanreece-scrumfish',
+        icon: 'heroicons:briefcase-solid',
     },
     {
         name: 'Forgejo',
-        profile: 'sudoer777@git.sudoer.ch',
+        profile: 'me@git.sudoer.ch',
-        url: 'https://git.sudoer.ch/sudoer777',
+        url: 'https://git.sudoer.ch/me',
+        icon: 'simple-icons:forgejo',
     },
     {
         name: 'Mastodon (GoToSocial)',
-        profile: 'Sudoer777',
+        profile: 'me@gts.sudoer.ch',
-        url: '',
+        url: 'https://gts.sudoer.ch/@me',
+        icon: 'fa-brands:mastodon',
     },
     {
         name: 'Devpost',
         profile: 'sudoer777',
         url: 'https://devpost.com/sudoer777',
-    },
+        icon: 'simple-icons:devpost',
-    {
-        name: 'GivePulse (UTD)',
-        profile: '',
-        url: '',
     },
     {
         name: 'LinkedIn',
         profile: '-ethanreece-',
         url: 'https://www.linkedin.com/in/-ethanreece-/',
+        icon: 'fa-brands:linkedin',
     },
 ]
 ---