1 files changed, 58 insertions, 0 deletions

diff --git a/src/components/icons.tsx b/src/components/icons.tsx
new file mode 100644
index 0000000..5f3b40f
--- /dev/null
+++ b/src/components/icons.tsx
@@ -0,0 +1,58 @@
+/*
+ * SPDX-FileCopyrightText: 2023 Kristóf Marussy
+ *
+ * SPDX-License-Identifier: MIT
+ */
+
+import { useId } from 'react';
+import {
+  siGithub,
+  siGooglescholar,
+  siLinkedin,
+  siOrcid,
+} from 'simple-icons';
+
+import fediverse from './icons/fediverse';
+
+export function Icon({ path, alt }: {
+  path: string;
+  alt: string;
+}) {
+  const titleId = useId();
+
+  return (
+    <>
+      <svg
+        version="1.1"
+        xmlns="http://www.w3.org/2000/svg"
+        role="img"
+        aria-labelledby={titleId}
+        viewBox="0 0 24 24"
+        width="24"
+        height="24"
+      >
+        <path fill="currentColor" d={path} />
+      </svg>
+      <span className="sr-only" id={titleId}>{alt}</span>
+    </>
+  );
+}
+
+export function SimpleIcon({ icon: { path, title } }: {
+  icon: {
+    path: string;
+    title: string;
+  };
+}) {
+  return <Icon path={path} alt={title} />;
+}
+
+export const FediverseIcon = () => <SimpleIcon icon={fediverse} />;
+
+export const GithubIcon = () => <SimpleIcon icon={siGithub} />;
+
+export const GoogleScholarIcon = () => <SimpleIcon icon={siGooglescholar} />;
+
+export const LinkedInIcon = () => <SimpleIcon icon={siLinkedin} />;
+
+export const OrcidIcon = () => <SimpleIcon icon={siOrcid} />;