refactor: fix svgs in all repo with svgr webpack for storybook and ro…

…llup for bundle (#3315)

* fix: svg usages as react component needs to be explicit

* refactor: fix svgs in all repo with svgr webpack for storybook and rollup for bundle

.changeset/brave-donkeys-bake.md

@@ -0,0 +1,6 @@
+---
+"@ultraviolet/icons": patch
+"@ultraviolet/ui": patch
+---
+
+Fix `<ProductIcon />` and `<CategoryIcon />` to have better svg import

.jest/svg.ts

@@ -0,0 +1,2 @@
+export default 'SvgrURL'
+export const ReactComponent = 'div'

.jest/unit.config.ts

@@ -26,6 +26,7 @@ const config = {
     '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$':
       '<rootDir>/.jest/fileMock.ts',
     '\\.(css|less)$': 'identity-obj-proxy',
+    '\\.svg$': '<rootDir>/.jest/svg.ts',
   },
   setupFilesAfterEnv: ['<rootDir>/.jest/setupTests.ts'],
 } satisfies Config.InitialOptions

.storybook/main.ts

@@ -19,13 +19,33 @@ export default {
   docs: {
     autodocs: true,
   },
+  core: {
+    builder: '@storybook/builder-webpack5',
+  },
   webpackFinal: async config => {
-    config?.module?.rules?.push({
+    const imageRule = config.module?.rules?.find(rule => {
+      const test = (rule as { test: RegExp }).test
+
+      if (!test) {
+        return false
+      }
+
+      return test.test('.svg')
+    }) as { [key: string]: any }
+
+    imageRule['exclude'] = /\.svg$/
+
+    config.module?.rules?.push({
       test: /\.svg$/,
       use: [
         {
           loader: '@svgr/webpack',
-          options: { svgo: false, memo: true }, // We disable svgo because we have custom configuration for it svgo.config.js
+        },
+        {
+          loader: 'file-loader',
+          options: {
+            name: 'static/media/[path][name].[ext]',
+          },
         },
       ],
       type: 'javascript/auto',

global.d.ts

@@ -1,7 +1,12 @@
 /// <reference types="@emotion/react/types/css-prop" />
 
 declare module '*.svg' {
+  import type { FunctionComponent, SVGProps } from 'react'
+
+  const ReactComponent: FunctionComponent<SVGProps<SVGSVGElement>>
   const content: string
+
+  export { ReactComponent }
   export default content
 }
 

package.json

@@ -162,6 +162,7 @@
     "eslint-plugin-prettier": "5.1.2",
     "eslint-plugin-testing-library": "6.2.0",
     "expect": "29.7.0",
+    "file-loader": "^6.2.0",
     "husky": "8.0.3",
     "identity-obj-proxy": "3.0.0",
     "jest": "29.7.0",

packages/icons/src/components/CategoryIcon/Icons.tsx

@@ -1,26 +1,26 @@
-import ai from './assets/ai.svg'
-import baremetal from './assets/baremetal.svg'
-import billing from './assets/billing.svg'
-import compute from './assets/compute.svg'
-import console from './assets/console.svg'
-import containers from './assets/containers.svg'
-import database from './assets/database.svg'
-import datacenter from './assets/datacenter.svg'
-import dedicatedServer from './assets/dedicated-server.svg'
-import devTools from './assets/dev-tools.svg'
-import documentation from './assets/documentation.svg'
-import iot from './assets/iot.svg'
-import labs from './assets/labs.svg'
-import managedServices from './assets/managed-services.svg'
-import network from './assets/network.svg'
-import observability from './assets/observability.svg'
-import security from './assets/security.svg'
-import serverless from './assets/serverless.svg'
-import storage from './assets/storage.svg'
-import toolsServices from './assets/tools-services.svg'
-import useCase from './assets/use-case.svg'
-import vpc from './assets/vpc.svg'
-import webHosting from './assets/web-hosting.svg'
+import { ReactComponent as ai } from './assets/ai.svg'
+import { ReactComponent as baremetal } from './assets/baremetal.svg'
+import { ReactComponent as billing } from './assets/billing.svg'
+import { ReactComponent as compute } from './assets/compute.svg'
+import { ReactComponent as console } from './assets/console.svg'
+import { ReactComponent as containers } from './assets/containers.svg'
+import { ReactComponent as database } from './assets/database.svg'
+import { ReactComponent as datacenter } from './assets/datacenter.svg'
+import { ReactComponent as dedicatedServer } from './assets/dedicated-server.svg'
+import { ReactComponent as devTools } from './assets/dev-tools.svg'
+import { ReactComponent as documentation } from './assets/documentation.svg'
+import { ReactComponent as iot } from './assets/iot.svg'
+import { ReactComponent as labs } from './assets/labs.svg'
+import { ReactComponent as managedServices } from './assets/managed-services.svg'
+import { ReactComponent as network } from './assets/network.svg'
+import { ReactComponent as observability } from './assets/observability.svg'
+import { ReactComponent as security } from './assets/security.svg'
+import { ReactComponent as serverless } from './assets/serverless.svg'
+import { ReactComponent as storage } from './assets/storage.svg'
+import { ReactComponent as toolsServices } from './assets/tools-services.svg'
+import { ReactComponent as useCase } from './assets/use-case.svg'
+import { ReactComponent as vpc } from './assets/vpc.svg'
+import { ReactComponent as webHosting } from './assets/web-hosting.svg'
 
 export const CATEGORY_ICONS = {
   baremetal,