fix(Inline SVG Fixes)

app/components/Image.tsx

@@ -16,11 +16,12 @@ function Image({ url, width, height, alternativeText, ...props }: ImageProps) {
   return isSvg ? (
     <SVG
       {...props}
+      id="svg-image"
       src={url}
       width={width}
       title={alternativeText}
       role="img"
-      height={"auto"}
+      height="100%"
     />
   ) : (
     <img

app/components/__test__/Image.test.tsx

@@ -0,0 +1,28 @@
+import { render } from "@testing-library/react";
+import Image from "../Image";
+
+describe("Image", () => {
+  const altText = "Alt Text";
+  it("should not render if the url is not provided", () => {
+    const { queryByAltText } = render(<Image alternativeText={altText} />);
+    expect(queryByAltText(altText)).not.toBeInTheDocument();
+  });
+
+  it("should render an image as an <img> tag", () => {
+    const { getByAltText } = render(
+      <Image url="photo.jpg" alternativeText={altText} />,
+    );
+    const image = getByAltText(altText);
+    expect(image).toBeInTheDocument();
+    expect(image).toBeInstanceOf(HTMLImageElement);
+  });
+
+  it("should render an svg image inline instead of as an <img> tag", () => {
+    const { queryByAltText } = render(
+      <Image url="image.svg" alternativeText={altText} ext=".svg" />,
+    );
+    // since react-inlinesvg parses an actual svg to create the DOM,
+    // we basically just need to ensure that an <img> isn't present
+    expect(queryByAltText(altText)).not.toBeInTheDocument();
+  });
+});

data/opensource-licenses.json

@@ -236,6 +236,14 @@
     "licenseFile": "a2j-rechtsantragstelle/node_modules/mustache/LICENSE",
     "direct": true
   },
+  "node-forge": {
+    "licenses": "(BSD-3-Clause OR GPL-2.0)",
+    "repository": "https://github.com/digitalbazaar/forge",
+    "publisher": "Digital Bazaar, Inc.",
+    "email": "support@digitalbazaar.com",
+    "path": "a2j-rechtsantragstelle/node_modules/node-forge",
+    "licenseFile": "a2j-rechtsantragstelle/node_modules/node-forge/LICENSE"
+  },
   "pako": {
     "licenses": "(MIT AND Zlib)",
     "repository": "https://github.com/nodeca/pako",
@@ -309,6 +317,15 @@
     "licenseFile": "a2j-rechtsantragstelle/node_modules/react-imask/LICENSE",
     "direct": true
   },
+  "react-inlinesvg": {
+    "licenses": "MIT",
+    "repository": "https://github.com/gilbarbara/react-inlinesvg",
+    "publisher": "Gil Barbara",
+    "email": "gilbarbara@gmail.com",
+    "path": "a2j-rechtsantragstelle/node_modules/react-inlinesvg",
+    "licenseFile": "a2j-rechtsantragstelle/node_modules/react-inlinesvg/LICENSE",
+    "direct": true
+  },
   "react-select": {
     "licenses": "MIT",
     "repository": "https://github.com/JedWatson/react-select.git#master",
@@ -333,6 +350,14 @@
     "licenseFile": "a2j-rechtsantragstelle/node_modules/remix-validated-form/README.md",
     "direct": true
   },
+  "samlify": {
+    "licenses": "MIT",
+    "repository": "https://github.com/tngan/samlify",
+    "publisher": "tngan",
+    "path": "a2j-rechtsantragstelle/node_modules/samlify",
+    "licenseFile": "a2j-rechtsantragstelle/node_modules/samlify/LICENSE",
+    "direct": true
+  },
   "tiny-invariant": {
     "licenses": "MIT",
     "repository": "https://github.com/alexreardon/tiny-invariant",