feat: make InlineSvg more universal

src/components/inline-svg.astro

@@ -1,17 +1,24 @@
 ---
-import type { SvgComponent } from "astro/types";
+import type { HTMLAttributes, SvgComponent } from "astro/types";
 
-interface Props {
+interface Props extends HTMLAttributes<"svg"> {
   SvgComponent: SvgComponent;
   size?: number;
 }
 
-const { size = 24, SvgComponent } = Astro.props;
+const {
+  SvgComponent,
+  height,
+  role = "presentation",
+  size = 24,
+  width,
+  ...rest
+} = Astro.props;
 ---
 
 <SvgComponent
-  height={size}
+  {...rest}
-  width={size}
+  height={height ?? size}
-  fill="currentColor"
+  {role}
-  role="presentation"
+  width={width ?? size}
 />

src/pages/index.astro

@@ -38,7 +38,11 @@ import BaseLayout from "../layouts/BaseLayout.astro";
               title="Mein Matrix-Konto"
               external
             >
-              <InlineSvg SvgComponent={MatrixLogo} slot="logo" />
+              <InlineSvg
+                SvgComponent={MatrixLogo}
+                fill="currentColor"
+                slot="logo"
+              />
               <span>@kmoschcau:matrix.org</span>
             </ButtonLink>
           </li>
@@ -49,7 +53,11 @@ import BaseLayout from "../layouts/BaseLayout.astro";
               title="Mein GitHub-Konto"
               external
             >
-              <InlineSvg SvgComponent={GitHubLogo} slot="logo" />
+              <InlineSvg
+                SvgComponent={GitHubLogo}
+                fill="currentColor"
+                slot="logo"
+              />
               <span>kmoschcau</span>
             </ButtonLink>
           </li>
@@ -60,7 +68,11 @@ import BaseLayout from "../layouts/BaseLayout.astro";
               title="Mein GitLab-Konto"
               external
             >
-              <InlineSvg SvgComponent={GitLabLogo} slot="logo" />
+              <InlineSvg
+                SvgComponent={GitLabLogo}
+                fill="currentColor"
+                slot="logo"
+              />
               <span>kmoschcau</span>
             </ButtonLink>
           </li>
@@ -71,7 +83,11 @@ import BaseLayout from "../layouts/BaseLayout.astro";
               title="Mein LinkedIn-Konto"
               external
             >
-              <InlineSvg SvgComponent={LinkedInLogo} slot="logo" />
+              <InlineSvg
+                SvgComponent={LinkedInLogo}
+                fill="currentColor"
+                slot="logo"
+              />
               <span>kmoschcau</span>
             </ButtonLink>
           </li>
@@ -82,7 +98,11 @@ import BaseLayout from "../layouts/BaseLayout.astro";
               title="Mein Keyoxide-Eintrag"
               external
             >
-              <InlineSvg SvgComponent={KeyoxideLogo} slot="logo" />
+              <InlineSvg
+                SvgComponent={KeyoxideLogo}
+                fill="currentColor"
+                slot="logo"
+              />
               <span>Keyoxide</span>
             </ButtonLink>
           </li>