Support SVG images defined in metadata

src/components/extension-card.js

@@ -71,7 +71,7 @@ const FinerDetails = styled.div`
 const Logo = ({ extension }) => {
   return (
     <LogoImage>
-      <ExtensionImage extension={extension} />
+      <ExtensionImage extension={extension} size={80} />
     </LogoImage>
   )
 }

src/components/extension-image.js

@@ -1,14 +1,17 @@
 import * as React from "react"
 import { GatsbyImage, getImage, StaticImage } from "gatsby-plugin-image"
 
-const ExtensionImage = ({ extension }) => {
+const ExtensionImage = ({ extension, size }) => {
   const metadata = extension.metadata
   const sourceControl = metadata.sourceControl
 
-  let imageData
+  let imageData, svgData
   let altText
   if (metadata && metadata.icon) {
     imageData = getImage(metadata.icon)
+    if (!imageData) {
+      svgData = metadata.icon.publicURL
+    }
     altText = "The icon of the project"
   } else if (sourceControl?.projectImage) {
     imageData = getImage(sourceControl.projectImage)
@@ -17,8 +20,9 @@ const ExtensionImage = ({ extension }) => {
     imageData = getImage(sourceControl.ownerImage)
     altText = "The icon of the organisation"
   }
-
-  if (imageData) {
+  if (svgData) {
+    return <img src={svgData} alt={altText} height={size} width={size} />
+  } else if (imageData) {
     return <GatsbyImage layout="constrained" image={imageData} alt={altText} />
   } else {
     return (

src/components/extension-image.test.js

@@ -1,4 +1,4 @@
-import { render, screen } from "@testing-library/react"
+import { cleanup, render, screen } from "@testing-library/react"
 import React from "react"
 import ExtensionImage from "./extension-image"
 
@@ -114,5 +114,39 @@ describe("the extension image", () => {
 
       expect(image.src).toContain("yaml-logo.png")
     })
+
+    describe("when the image is an svg", () => {
+      const extension = {
+        metadata: {
+          icon: {
+            childImageSharp: null,
+            publicURL: "some-svg.svg",
+          },
+          sourceControl: {
+            projectImage: {
+              childImageSharp: {
+                gatsbyImageData: "social-logo.png",
+              },
+            },
+            ownerImage: {
+              childImageSharp: {
+                gatsbyImageData: "owner-logo.png",
+              },
+            },
+          },
+        },
+      }
+
+      beforeEach(() => {
+        cleanup()
+        render(<ExtensionImage extension={extension} />)
+      })
+
+      it("renders the owner image", () => {
+        const image = screen.getByRole("img", {})
+
+        expect(image.src).toContain("some-svg.svg")
+      })
+    })
   })
 })

src/pages/index.js

@@ -56,8 +56,9 @@ export const pageQuery = graphql`
           }
           icon {
             childImageSharp {
-              gatsbyImageData(width: 220)
+              gatsbyImageData(width: 80)
             }
+            publicURL
           }
           sourceControl {
             projectImage {

src/templates/extension-detail.js

@@ -110,7 +110,7 @@ const DocumentationHeading = styled.h2`
 const Logo = ({ extension }) => {
   return (
     <LogoImage>
-      <ExtensionImage extension={extension} />
+      <ExtensionImage extension={extension} size={220} />
     </LogoImage>
   )
 }
@@ -274,6 +274,7 @@ export const pageQuery = graphql`
           childImageSharp {
             gatsbyImageData(width: 220)
           }
+          publicURL
         }
         maven {
           version