feat: integrate SVGR for SVG handling in webpack and add new provider icons

surfsense_web/next.config.ts

@@ -23,12 +23,44 @@ const nextConfig: NextConfig = {
 	// Mark BlockNote server packages as external
 	serverExternalPackages: ["@blocknote/server-util"],
 
-	// Configure webpack to handle blocknote packages
+	// Turbopack config (used during `next dev --turbopack`)
+	turbopack: {
+		rules: {
+			"*.svg": {
+				loaders: ["@svgr/webpack"],
+				as: "*.js",
+			},
+		},
+	},
+
+	// Configure webpack to handle blocknote packages + SVGR
 	webpack: (config, { isServer }) => {
 		if (isServer) {
 			// Don't bundle these packages on the server
 			config.externals = [...(config.externals || []), "@blocknote/server-util"];
 		}
+
+		// SVGR: import *.svg as React components
+		const fileLoaderRule = config.module.rules.find(
+			(rule: any) => rule.test?.test?.(".svg"),
+		);
+		config.module.rules.push(
+			// Re-apply the existing file loader for *.svg?url imports
+			{
+				...fileLoaderRule,
+				test: /\.svg$/i,
+				resourceQuery: /url/, // e.g. import icon from './icon.svg?url'
+			},
+			// Convert all other *.svg imports to React components
+			{
+				test: /\.svg$/i,
+				issuer: fileLoaderRule.issuer,
+				resourceQuery: { not: [...fileLoaderRule.resourceQuery.not, /url/] },
+				use: ["@svgr/webpack"],
+			},
+		);
+		fileLoaderRule.exclude = /\.svg$/i;
+
 		return config;
 	},