feat: add support for svg in StrapiImage

app/package.json

@@ -13,6 +13,7 @@
     "next": "13.4.12",
     "react": "18.2.0",
     "react-dom": "18.2.0",
+    "react-inlinesvg": "^4.1.0",
     "strapi-sdk-js": "^2.3.3"
   },
   "devDependencies": {

app/src/components/StrapiImage.tsx

@@ -1,29 +1,41 @@
 import { CLIENT_STRAPI_URL } from "@/strapi";
 import Image from "next/image";
+import SVG from "react-inlinesvg";
 
 /**
  * Display an Image fetched from the Strapi instance
  * @param img object returned by Strapi when querying the image.
- * @param size the prepared size of the image (one of "thumbnail", "small", "medium", "large", "origin")
+ * @param size the prepared size of the image (one of "thumbnail", "small", "medium", "large", "origin"). This parameter is ignored for SVGs
  */
 export default function StrapiImage({
   img,
   size,
+  className,
 }: {
   img: any;
   size: "thumbnail" | "small" | "medium" | "large" | "origin";
+  className?: string;
 }) {
-  let selectedFormat =
-    size === "origin" ? img.data.attributes : img.data.attributes.formats[size];
-  return (
-    <>
-      <Image
-        alt={selectedFormat.name}
-        src={selectedFormat.url}
-        width={selectedFormat.width}
-        height={selectedFormat.height}
-        loader={(p) => `${CLIENT_STRAPI_URL}${p.src}`}
-      />
-    </>
-  );
+  let image = img.data.attributes;
+
+  if (image.ext !== ".svg") {
+    let selectedFormat = size === "origin" ? image : image.formats[size];
+
+    return (
+      <>
+        <Image
+          alt={selectedFormat.name}
+          src={selectedFormat.url}
+          width={selectedFormat.width}
+          height={selectedFormat.height}
+          loader={(p) => `${CLIENT_STRAPI_URL}${p.src}`}
+          className={className}
+        />
+      </>
+    );
+  } else {
+    return (
+      <SVG src={`${CLIENT_STRAPI_URL}${image.url}`} className={className} />
+    );
+  }
 }

app/src/pages/index.tsx

@@ -1,15 +1,32 @@
 import Background from "@/assets/background.svg";
-import CLICLogo from "@/assets/clic_color_info.svg";
 import NavigationBar from "@/components/NavigationBar";
+import StrapiImage from "@/components/StrapiImage";
+import strapi from "@/strapi";
+import { ApiAssociation } from "@/types/generated/contentTypes";
+import { GetServerSideProps, InferGetServerSidePropsType } from "next";
 
-export default function Home() {
+export default function Home(props: { association: ApiAssociation }) {
   return (
     <div className="main">
       <NavigationBar />
       <div className="background">
-        <CLICLogo className="CLICLogo" />
+        <StrapiImage
+          img={props.association.attributes.logo}
+          size="medium"
+          className="CLICLogo"
+        />
         <Background className="background" />
       </div>
     </div>
   );
 }
+
+export const getServerSideProps: GetServerSideProps<
+  InferGetServerSidePropsType<typeof Home>
+> = async (context) => {
+  let association = await strapi.find<ApiAssociation>("association", {
+    populate: "*",
+  });
+  console.log(JSON.stringify(association));
+  return { props: { association: association.data } };
+};