1 files changed, 58 insertions, 18 deletions

diff --git a/src/components/icons.tsx b/src/components/icons.tsx
index 402b622..1411218 100644
--- a/src/components/icons.tsx
+++ b/src/components/icons.tsx
@@ -1,15 +1,37 @@
 /*
- * SPDX-FileCopyrightText: 2023 Kristóf Marussy
+ * SPDX-FileCopyrightText: 2023-2024 Kristóf Marussy
  *
  * SPDX-License-Identifier: MIT
  */
 
 import { useId } from 'react';
-import { siGithub, siGooglescholar, siLinkedin, siOrcid } from 'simple-icons';
+import {
+  siCreativecommons,
+  siDblp,
+  siGithub,
+  siGooglescholar,
+  siLinkedin,
+  siOrcid,
+  siScopus,
+} from 'simple-icons';
 
 import fediverse from './icons/fediverse';
+import mtmt from './icons/mtmt';
 
-export function Icon({ path, alt }: { path: string; alt: string }) {
+export interface IconProps {
+  hidden?: boolean;
+  className?: string;
+  alt?: string;
+}
+
+export function Icon({
+  path,
+  alt,
+  hidden,
+  className,
+}: IconProps & {
+  path: string;
+}) {
   const titleId = useId();
 
   return (
@@ -18,37 +40,55 @@ export function Icon({ path, alt }: { path: string; alt: string }) {
         version="1.1"
         xmlns="http://www.w3.org/2000/svg"
         role="img"
-        aria-labelledby={titleId}
+        {...(hidden ? { 'aria-hidden': true } : { 'aria-labelledby': titleId })}
         viewBox="0 0 24 24"
         width="24"
         height="24"
+        {...(className ? { className } : {})}
       >
         <path fill="currentColor" d={path} />
       </svg>
-      <span className="sr-only" id={titleId}>
-        {alt}
-      </span>
+      {!hidden && (
+        <span className="sr-only" id={titleId}>
+          {alt}
+        </span>
+      )}
     </>
   );
 }
 
+export interface SimpleIcon {
+  path: string;
+  title: string;
+}
+
 export function SimpleIcon({
   icon: { path, title },
-}: {
-  icon: {
-    path: string;
-    title: string;
-  };
+  ...props
+}: IconProps & {
+  icon: SimpleIcon;
 }) {
-  return <Icon path={path} alt={title} />;
+  return <Icon path={path} {...{ ...props, alt: props.alt ?? title }} />;
 }
 
-export const FediverseIcon = () => <SimpleIcon icon={fediverse} />;
+function makeSimpleIcon(icon: SimpleIcon): (props: IconProps) => JSX.Element {
+  return (props) => <SimpleIcon icon={icon} {...props} />;
+}
+
+export const CreativeCommonsIcon = makeSimpleIcon(siCreativecommons);
+
+export const DBLPIcon = makeSimpleIcon(siDblp);
+
+export const FediverseIcon = makeSimpleIcon(fediverse);
+
+export const GithubIcon = makeSimpleIcon(siGithub);
+
+export const GoogleScholarIcon = makeSimpleIcon(siGooglescholar);
 
-export const GithubIcon = () => <SimpleIcon icon={siGithub} />;
+export const LinkedInIcon = makeSimpleIcon(siLinkedin);
 
-export const GoogleScholarIcon = () => <SimpleIcon icon={siGooglescholar} />;
+export const MTMTIcon = makeSimpleIcon(mtmt);
 
-export const LinkedInIcon = () => <SimpleIcon icon={siLinkedin} />;
+export const OrcidIcon = makeSimpleIcon(siOrcid);
 
-export const OrcidIcon = () => <SimpleIcon icon={siOrcid} />;
+export const ScopusIcon = makeSimpleIcon(siScopus);