💄(app-desk) handle svg as react component

The svg in nextjs was not handled as a react component, it was
not possible to change dynamically the color of the svg by example.
We add the @svgr/webpack, it will handle the svg as react component.
We keep as well the way next.js handle the svg, so we can use both
ways.
To handle the svg in the next way we need to add the
`?url` at the end of the svg import.

src/frontend/apps/desk/jest.config.ts

@@ -8,9 +8,23 @@ const createJestConfig = nextJest({
 // Add any custom config to be passed to Jest
 const config: Config = {
   coverageProvider: 'v8',
-  testEnvironment: 'jsdom',
+  moduleNameMapper: {
+    '^@/(.*)$': '<rootDir>/src/$1',
+  },
   setupFilesAfterEnv: ['<rootDir>/jest.setup.ts'],
+  testEnvironment: 'jsdom',
 };
 
-// createJestConfig is exported this way to ensure that next/jest can load the Next.js config which is async
-export default createJestConfig(config);
+const jestConfig = async () => {
+  const nextJestConfig = await createJestConfig(config)();
+  return {
+    ...nextJestConfig,
+    moduleNameMapper: {
+      '\\.svg$': '<rootDir>/jest/mocks/svg.js',
+      '^.+\\.svg\\?url$': `<rootDir>/jest/mocks/fileMock.js`,
+      ...nextJestConfig.moduleNameMapper,
+    },
+  };
+};
+
+export default jestConfig;