{% for link in socialLinks %}
@@ -54,15 +55,7 @@
class="inline-flex items-center gap-2 px-3 py-2 text-sm bg-surface-100 dark:bg-surface-800 rounded-lg hover:bg-surface-200 dark:hover:bg-surface-700 transition-colors"
target="_blank"
>
- {% if link.icon == "github" %}
-
- {% elif link.icon == "linkedin" %}
-
- {% elif link.icon == "bluesky" %}
-
- {% elif link.icon == "mastodon" %}
-
- {% endif %}
+ {{ socialIcon(link.icon, "w-5 h-5") }}
{{ link.name }}
{% endfor %}
diff --git a/_includes/components/social-icon.njk b/_includes/components/social-icon.njk
new file mode 100644
index 0000000..3ccebce
--- /dev/null
+++ b/_includes/components/social-icon.njk
@@ -0,0 +1,86 @@
+{#
+ Social Icon Macro
+ Usage: {% from "components/social-icon.njk" import socialIcon %}
+ {{ socialIcon("github", "w-5 h-5") }}
+
+ SVG paths sourced from Simple Icons (simpleicons.org) - CC0 1.0 Universal
+ All icons render at 24x24 viewBox with fill="currentColor"
+#}
+
+{% macro socialIcon(name, cssClass) %}
+{%- if name == "github" -%}
+
+{%- elif name == "gitlab" -%}
+
+{%- elif name == "forgejo" -%}
+
+{%- elif name == "codeberg" -%}
+
+{%- elif name == "sourcehut" -%}
+
+{%- elif name == "linkedin" -%}
+
+{%- elif name == "bluesky" -%}
+
+{%- elif name == "mastodon" -%}
+
+{%- elif name == "activitypub" -%}
+
+{%- elif name == "pixelfed" -%}
+
+{%- elif name == "twitter" -%}
+
+{%- elif name == "facebook" -%}
+
+{%- elif name == "instagram" -%}
+
+{%- elif name == "threads" -%}
+
+{%- elif name == "youtube" -%}
+
+{%- elif name == "twitch" -%}
+
+{%- elif name == "flickr" -%}
+
+{%- elif name == "spotify" -%}
+
+{%- elif name == "bandcamp" -%}
+
+{%- elif name == "soundcloud" -%}
+
+{%- elif name == "rss" -%}
+
+{%- elif name == "matrix" -%}
+
+{%- elif name == "discord" -%}
+
+{%- elif name == "signal" -%}
+
+{%- elif name == "telegram" -%}
+
+{%- elif name == "xmpp" -%}
+
+{%- elif name == "reddit" -%}
+
+{%- elif name == "hackernews" -%}
+
+{%- elif name == "keybase" -%}
+
+{%- elif name == "orcid" -%}
+
+{%- elif name == "indieweb" -%}
+
+{%- elif name == "website" -%}
+
+{%- elif name == "email" -%}
+
+{%- elif name == "funkwhale" -%}
+
+{%- elif name == "lastfm" -%}
+
+{%- elif name == "peertube" -%}
+
+{%- elif name == "bookwyrm" -%}
+
+{%- endif -%}
+{% endmacro %}