fix: some types of InlineSVG (#1497)

- extend the Intrinsic svg html attributes 

instead of explicit type cast, which is more unsafe

- Add `as const`

Which creates more narrow type unions for e.g the color "lightblue" |
"orange" | "green" instead of "string" for the non-const expression

src/components/util/InlineSVG.astro

@@ -2,8 +2,9 @@
 import { parse } from "node-html-parser";
 // svgo is a peer dependency of astro-icon
 import { optimize } from "svgo";
+import type { Attributes } from "node-html-parser/dist/nodes/html";
 
-export interface Props {
+export interface Props extends Attributes {
  src: string;
 }
 
@@ -12,8 +13,11 @@ interface SVGFile {
  file: string;
 }
 
-const { src, ...attributes } = Astro.props as Props;
-const res = import.meta.glob("/src/**/*.svg", { eager: true, query: "?raw" });
+const { src, ...attributes } = Astro.props;
+const res = import.meta.glob("/src/**/*.svg", {
+ eager: true,
+ query: "?raw",
+}) as Record<string, SVGFile>;
 
 if (!(src in res)) {
  throw new Error(`${src} not found`);

src/pages/learn.astro

@@ -28,7 +28,7 @@ const learningFeatures = [
  color: "lightblue",
  url: "/guides/how-nix-works",
  },
-];
+] as const;
 
 const learningResources = [
  {
@@ -51,7 +51,7 @@ const learningResources = [
  url: "/guides/nix-pills",
  buttonText: "Take the Pills",
  },
-];
+] as const;
 ---
 
 <Layout title="Learn Nix | Nix & NixOS">