diff --git a/packages/jest-config/jest.config.ts b/packages/jest-config/jest.config.ts
index 8a726b1b1..69b56ee91 100644
--- a/packages/jest-config/jest.config.ts
+++ b/packages/jest-config/jest.config.ts
@@ -6,7 +6,6 @@ const baseConfig: Config.InitialOptions = Object.freeze({
   transform: {
     // Enable JS/JSX transformation
     '\\.(t|j)sx?$': 'ts-jest',
-    '\\.(svg)$': 'jest-transformer-svg',
   },
   transformIgnorePatterns: [
     '[/\\\\]node_modules[/\\\\]((?!ky[/\\\\]).)+\\.(js|jsx|mjs|cjs|ts|tsx)$',
diff --git a/packages/jest-config/package.json b/packages/jest-config/package.json
index d54561b1e..f908b9bee 100644
--- a/packages/jest-config/package.json
+++ b/packages/jest-config/package.json
@@ -27,7 +27,6 @@
     "@types/node": "16",
     "eslint": "^8.10.0",
     "jest": "^27.5.1",
-    "jest-transformer-svg": "^1.0.2",
     "lint-staged": "^12.0.0",
     "prettier": "^2.3.2",
     "ts-node": "^10.0.0",
diff --git a/packages/ui/jest.config.ts b/packages/ui/jest.config.ts
index 0acdfcbe8..9282c2641 100644
--- a/packages/ui/jest.config.ts
+++ b/packages/ui/jest.config.ts
@@ -3,6 +3,9 @@ import { merge, Config } from '@logto/jest-config';
 const config: Config.InitialOptions = merge({
   testEnvironment: 'jsdom',
   setupFilesAfterEnv: ['<rootDir>/src/jest.setup.ts'],
+  transform: {
+    '\\.(svg)$': 'jest-transformer-svg',
+  },
 });
 
 export default config;
diff --git a/packages/ui/package.json b/packages/ui/package.json
index a22250b1a..2d7043da6 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -40,6 +40,7 @@
     "i18next": "^21.6.12",
     "i18next-browser-languagedetector": "^6.1.3",
     "jest": "^27.5.1",
+    "jest-transformer-svg": "^1.0.2",
     "js-base64": "^3.7.2",
     "ky": "^0.30.0",
     "libphonenumber-js": "^1.9.49",
@@ -49,6 +50,7 @@
     "postcss-modules": "^4.3.0",
     "prettier": "^2.3.2",
     "react": "^17.0.2",
+    "react-device-detect": "^2.2.2",
     "react-dom": "^17.0.2",
     "react-i18next": "^11.15.4",
     "react-modal": "^3.14.4",
@@ -58,7 +60,6 @@
     "react-timer-hook": "^3.0.5",
     "stylelint": "^13.13.1",
     "typescript": "^4.6.2",
-    "react-device-detect": "^2.2.2",
     "use-debounced-loader": "^0.1.1"
   },
   "alias": {
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index a3dded500..f9e5ded54 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -734,7 +734,6 @@ importers:
       jest: ^27.5.1
       jest-matcher-specific-error: ^1.0.0
       jest-transform-stub: ^2.0.0
-      jest-transformer-svg: ^1.0.2
       lint-staged: ^12.0.0
       prettier: ^2.3.2
       ts-jest: ^27.1.1
@@ -753,7 +752,6 @@ importers:
       '@types/node': 16.11.12
       eslint: 8.10.0
       jest: 27.5.1_ts-node@10.7.0
-      jest-transformer-svg: 1.0.2_jest@27.5.1
       lint-staged: 12.4.0
       prettier: 2.5.1
       ts-node: 10.7.0_42uktnex6oapjbpw2i7vzvmrzi
@@ -863,6 +861,7 @@ importers:
       i18next: ^21.6.12
       i18next-browser-languagedetector: ^6.1.3
       jest: ^27.5.1
+      jest-transformer-svg: ^1.0.2
       js-base64: ^3.7.2
       ky: ^0.30.0
       libphonenumber-js: ^1.9.49
@@ -908,6 +907,7 @@ importers:
       i18next: 21.6.12
       i18next-browser-languagedetector: 6.1.3
       jest: 27.5.1
+      jest-transformer-svg: 1.0.2_jest@27.5.1+react@17.0.2
       js-base64: 3.7.2
       ky: 0.30.0
       libphonenumber-js: 1.9.49
@@ -12672,13 +12672,14 @@ packages:
     resolution: {integrity: sha512-lspHaCRx/mBbnm3h4uMMS3R5aZzMwyNpNIJLXj4cEsV0mIUtS4IjYJLSoyjRCtnxb6RIGJ4NL2quZzfIeNhbkg==}
     dev: false
 
-  /jest-transformer-svg/1.0.2_jest@27.5.1:
+  /jest-transformer-svg/1.0.2_jest@27.5.1+react@17.0.2:
     resolution: {integrity: sha512-A9z5Vzs+TlPpxekwUOCyVu5sHgcCKUKyJTE1q/bUhtAILpgf3kIj6IjguQrTJG0jN0nRnuNV7ckPUE8Vdf12Jg==}
     peerDependencies:
       jest: ^27.0.6
       react: ^17.0.2
     dependencies:
-      jest: 27.5.1_ts-node@10.7.0
+      jest: 27.5.1
+      react: 17.0.2
     dev: true
 
   /jest-util/27.5.1: