More svgr config

Author: arelra

dotcom-rendering/index.d.ts

@@ -15,10 +15,20 @@ declare module 'dynamic-import-polyfill' {
 }
 
 // SVG handling
+// declare module '*.svg' {
+// 	const content: any;
+// 	// eslint-disable-next-line import/no-default-export -- This is how we import SVGs
+// 	export default content;
+// }
 declare module '*.svg' {
-	const content: any;
-	// eslint-disable-next-line import/no-default-export -- This is how we import SVGs
-	export default content;
+	import type React from 'react';
+
+	const ReactComponent: React.FunctionComponent<
+		React.SVGProps<SVGSVGElement> & { title?: string }
+	>;
+
+	// eslint-disable-next-line import/no-default-export -- vite poc
+	export default ReactComponent;
 }
 
 // Extend PerformanceEntry from lib.dom.ts with current 'In Draft' properties (to allow access as use in browsers that support)

dotcom-rendering/src/server/server.dev.ts

@@ -1,3 +1,4 @@
+import react from '@vitejs/plugin-react-swc';
 import express, { type Handler, Router } from 'express';
 import { createServer } from 'vite';
 import svgr from 'vite-plugin-svgr';
@@ -136,7 +137,23 @@ export const devServer = async (): Promise<void> => {
 	const vite = await createServer({
 		server: { middlewareMode: true },
 		appType: 'custom',
-		plugins: [svgr()],
+		plugins: [
+			react({
+				jsxImportSource: '@emotion/react',
+				parserConfig: { tsx: true },
+			}),
+			svgr({
+				// svgr options: https://react-svgr.com/docs/options/
+				svgrOptions: {
+					exportType: 'default',
+					ref: true,
+					svgo: false,
+					titleProp: true,
+				},
+				include: '**/*.svg',
+			}),
+		],
+		// plugins: [svgr()],
 	});
 	console.log('!!! Vite httpServer:', vite.httpServer);
 

dotcom-rendering/vite.config.js

@@ -40,7 +40,16 @@ export default defineConfig({
 			jsxImportSource: '@emotion/react',
 			parserConfig: { tsx: true },
 		}),
-		svgr(),
+		svgr({
+			// svgr options: https://react-svgr.com/docs/options/
+			svgrOptions: {
+				exportType: 'default',
+				ref: true,
+				svgo: false,
+				titleProp: true,
+			},
+			include: '**/*.svg',
+		}),
 	],
 	resolve: {
 		alias: {