refactor(ui): add svg transformer (#849)

* refactor(ui): introduce svgr transformer use svgr transformer to translate svg files into react component direactly * fix(ui): fix stroke color fix stroke color * fix(ui): remove unused classname remove unused classname
2025-03-31 22:51:25 -05:00 · 2022-05-17 10:26:55 +08:00 · 2022-05-17 10:26:55 +08:00 · 58e07fbd79
commit 58e07fbd79
parent 88600c012c
57 changed files with 209 additions and 499 deletions
--- a/packages/jest-config/jest.config.ts
+++ b/packages/jest-config/jest.config.ts
@ -6,7 +6,7 @@ const baseConfig: Config.InitialOptions = Object.freeze({
  transform: {
    // Enable JS/JSX transformation
    '\\.(t|j)sx?$': 'ts-jest',
-    '\\.(svg)$': 'jest-transform-stub',
+    '\\.(svg)$': 'jest-transformer-svg',
  },
  transformIgnorePatterns: [
    '[/\\\\]node_modules[/\\\\]((?!ky[/\\\\]).)+\\.(js|jsx|mjs|cjs|ts|tsx)$',
--- a/packages/jest-config/package.json
+++ b/packages/jest-config/package.json
@ -27,6 +27,7 @@
    "@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",
--- a/packages/ui/.parcelrc
+++ b/packages/ui/.parcelrc
@ -0,0 +1,8 @@
+{
+  "extends": "@parcel/config-default",
+  "transformers": {
+    "*.svg": [
+      "@parcel/transformer-svg-react"
+    ]
+  }
+}
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@ -21,6 +21,7 @@
    "@logto/schemas": "^0.1.0",
    "@parcel/core": "^2.5.0",
    "@parcel/transformer-sass": "^2.5.0",
+    "@parcel/transformer-svg-react": "^2.5.0",
    "@peculiar/webcrypto": "^1.3.3",
    "@silverhand/eslint-config": "^0.12.0",
    "@silverhand/eslint-config-react": "^0.11.0",
@ -56,7 +57,9 @@
    "react-string-replace": "^1.0.0",
    "react-timer-hook": "^3.0.5",
    "stylelint": "^13.13.1",
-    "typescript": "^4.6.2"
+    "typescript": "^4.6.2",
+    "react-device-detect": "^2.2.2",
+    "use-debounced-loader": "^0.1.1"
  },
  "alias": {
    "@/*": "./src/$1"
@ -80,9 +83,5 @@
      ]
    }
  },
-  "prettier": "@silverhand/eslint-config/.prettierrc",
-  "dependencies": {
-    "react-device-detect": "^2.2.2",
-    "use-debounced-loader": "^0.1.1"
-  }
+  "prettier": "@silverhand/eslint-config/.prettierrc"
 }
--- a/packages/ui/src/mocks/react-i18next.jsx
+++ b/packages/ui/src/mocks/react-i18next.jsx
@ -1,59 +0,0 @@
-// Copied from https://github.com/i18next/react-i18next/blob/c533ffe092470b58769586681abfc2cf4ecf0b56/example/test-jest/src/__mocks__/react-i18next.js
-/* eslint-disable unicorn/prefer-module */
-const React = require('react');
-const reactI18next = require('react-i18next');
-
-const hasChildren = (node) => node && (node.children || (node.props && node.props.children));
-
-const getChildren = (node) =>
-  node && node.children ? node.children : node.props && node.props.children;
-
-const renderNodes = (reactNodes) => {
-  if (typeof reactNodes === 'string') {
-    return reactNodes;
-  }
-
-  return Object.keys(reactNodes).map((key, i) => {
-    const child = reactNodes[key];
-    const isElement = React.isValidElement(child);
-
-    if (typeof child === 'string') {
-      return child;
-    }
-
-    if (hasChildren(child)) {
-      const inner = renderNodes(getChildren(child));
-      // eslint-disable-next-line react/no-array-index-key
-      return React.cloneElement(child, { ...child.props, key: i }, inner);
-    }
-
-    if (typeof child === 'object' && !isElement) {
-      return Object.keys(child).reduce((string, childKey) => `${string}${child[childKey]}`, '');
-    }
-
-    return child;
-  });
-};
-
-const useMock = [(k) => k, {}];
-useMock.t = (k) => k;
-useMock.i18n = {};
-
-const withTranslation = (Component) => (props) => <Component t={(k) => k} {...props} />;
-
-module.exports = {
-  // This mock makes sure any components using the translate HoC receive the t function as a prop
-  withTranslation: () => withTranslation,
-  Trans: ({ children }) =>
-    Array.isArray(children) ? renderNodes(children) : renderNodes([children]),
-  Translation: ({ children }) => children((k) => k, { i18n: {} }),
-  useTranslation: () => useMock,
-
-  // Mock if needed
-  I18nextProvider: reactI18next.I18nextProvider,
-  initReactI18next: reactI18next.initReactI18next,
-  setDefaults: reactI18next.setDefaults,
-  getDefaults: reactI18next.getDefaults,
-  setI18n: reactI18next.setI18n,
-  getI18n: reactI18next.getI18n,
-};
--- a/packages/ui/src/assets/icons/arrow-down.svg
+++ b/packages/ui/src/assets/icons/arrow-down.svg
@ -0,0 +1,3 @@
+<svg viewBox="0 0 20 20"  xmlns="http://www.w3.org/2000/svg">
+  <path d="M10.5916 12.9499L15.2999 8.23328C15.378 8.15581 15.44 8.06364 15.4823 7.96209C15.5246 7.86054 15.5464 7.75162 15.5464 7.64161C15.5464 7.5316 15.5246 7.42268 15.4823 7.32113C15.44 7.21958 15.378 7.12741 15.2999 7.04994C15.1438 6.89474 14.9325 6.80762 14.7124 6.80762C14.4922 6.80762 14.281 6.89474 14.1249 7.04994L9.95822 11.1749L5.83322 7.04994C5.67709 6.89474 5.46588 6.80762 5.24572 6.80762C5.02557 6.80762 4.81436 6.89474 4.65822 7.04994C4.57948 7.12712 4.51684 7.21916 4.47393 7.32072C4.43101 7.42229 4.40868 7.53136 4.40822 7.64161C4.40868 7.75187 4.43101 7.86094 4.47393 7.9625C4.51684 8.06406 4.57948 8.1561 4.65822 8.23328L9.36655 12.9499C9.44459 13.0345 9.5393 13.102 9.64472 13.1482C9.75013 13.1944 9.86397 13.2182 9.97905 13.2182C10.0941 13.2182 10.208 13.1944 10.3134 13.1482C10.4188 13.102 10.5135 13.0345 10.5916 12.9499Z" fill="currentcolor"/>
+</svg>
--- a/packages/ui/src/assets/icons/arrow-prev.svg
+++ b/packages/ui/src/assets/icons/arrow-prev.svg
@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+  <path d="M8.49054 12.7642L14.1505 18.4142C14.2435 18.5079 14.3541 18.5823 14.476 18.6331C14.5978 18.6838 14.7285 18.71 14.8605 18.71C14.9925 18.71 15.1233 18.6838 15.2451 18.6331C15.367 18.5823 15.4776 18.5079 15.5705 18.4142C15.7568 18.2268 15.8613 17.9733 15.8613 17.7092C15.8613 17.445 15.7568 17.1915 15.5705 17.0042L10.6205 12.0042L15.5705 7.05416C15.7568 6.8668 15.8613 6.61335 15.8613 6.34916C15.8613 6.08498 15.7568 5.83153 15.5705 5.64416C15.4779 5.54967 15.3675 5.4745 15.2456 5.42301C15.1237 5.37151 14.9928 5.34471 14.8605 5.34416C14.7282 5.34471 14.5973 5.37151 14.4755 5.42301C14.3536 5.4745 14.2432 5.54967 14.1505 5.64416L8.49054 11.2942C8.38903 11.3878 8.30802 11.5015 8.25261 11.628C8.19721 11.7545 8.1686 11.8911 8.1686 12.0292C8.1686 12.1673 8.19721 12.3039 8.25261 12.4304C8.30802 12.5569 8.38903 12.6705 8.49054 12.7642Z" fill="currentcolor"/>
+</svg>
--- a/packages/ui/src/assets/icons/arrow.svg
+++ b/packages/ui/src/assets/icons/arrow.svg
@ -1,11 +0,0 @@
-<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-  <symbol width="24" height="24" viewBox="0 0 24 24" id="down">
-    <path d="M14.2941 9.29409L12.0041 11.5941L9.71409 9.29409C9.62085 9.20085 9.51016 9.12689 9.38834 9.07643C9.26652 9.02597 9.13595 9 9.00409 9C8.87223 9 8.74166 9.02597 8.61984 9.07643C8.49802 9.12689 8.38733 9.20085 8.29409 9.29409C8.20085 9.38733 8.12689 9.49802 8.07643 9.61984C8.02597 9.74166 8 9.87223 8 10.0041C8 10.136 8.02597 10.2665 8.07643 10.3883C8.12689 10.5102 8.20085 10.6209 8.29409 10.7141L11.2941 13.7141C11.3871 13.8078 11.4977 13.8822 11.6195 13.933C11.7414 13.9838 11.8721 14.0099 12.0041 14.0099C12.1361 14.0099 12.2668 13.9838 12.3887 13.933C12.5105 13.8822 12.6211 13.8078 12.7141 13.7141L15.7141 10.7141C15.9024 10.5258 16.0082 10.2704 16.0082 10.0041C16.0082 9.73779 15.9024 9.48239 15.7141 9.29409C15.5258 9.10579 15.2704 9 15.0041 9C14.7378 9 14.4824 9.10579 14.2941 9.29409Z" />
-  </symbol>
-  <symbol width="24" height="24" viewBox="0 0 24 24" id="prev">
-    <path d="M8.49054 12.7642L14.1505 18.4142C14.2435 18.5079 14.3541 18.5823 14.476 18.6331C14.5978 18.6838 14.7285 18.71 14.8605 18.71C14.9925 18.71 15.1233 18.6838 15.2451 18.6331C15.367 18.5823 15.4776 18.5079 15.5705 18.4142C15.7568 18.2268 15.8613 17.9733 15.8613 17.7092C15.8613 17.445 15.7568 17.1915 15.5705 17.0042L10.6205 12.0042L15.5705 7.05416C15.7568 6.8668 15.8613 6.61335 15.8613 6.34916C15.8613 6.08498 15.7568 5.83153 15.5705 5.64416C15.4779 5.54967 15.3675 5.4745 15.2456 5.42301C15.1237 5.37151 14.9928 5.34471 14.8605 5.34416C14.7282 5.34471 14.5973 5.37151 14.4755 5.42301C14.3536 5.4745 14.2432 5.54967 14.1505 5.64416L8.49054 11.2942C8.38903 11.3878 8.30802 11.5015 8.25261 11.628C8.19721 11.7545 8.1686 11.8911 8.1686 12.0292C8.1686 12.1673 8.19721 12.3039 8.25261 12.4304C8.30802 12.5569 8.38903 12.6705 8.49054 12.7642Z" />
-  </symbol>
-  <symbol width="24" height="24" viewBox="0 0 24 24" id="next">
-    <path d="M15.5397 11.29L9.87974 5.64004C9.78677 5.54631 9.67617 5.47191 9.55431 5.42115C9.43246 5.37038 9.30175 5.34424 9.16974 5.34424C9.03773 5.34424 8.90702 5.37038 8.78516 5.42115C8.6633 5.47191 8.5527 5.54631 8.45974 5.64004C8.27349 5.8274 8.16895 6.08085 8.16895 6.34504C8.16895 6.60922 8.27349 6.86267 8.45974 7.05004L13.4097 12.05L8.45974 17C8.27349 17.1874 8.16895 17.4409 8.16895 17.705C8.16895 17.9692 8.27349 18.2227 8.45974 18.41C8.55235 18.5045 8.6628 18.5797 8.78467 18.6312C8.90655 18.6827 9.03743 18.7095 9.16974 18.71C9.30204 18.7095 9.43293 18.6827 9.5548 18.6312C9.67668 18.5797 9.78712 18.5045 9.87974 18.41L15.5397 12.76C15.6412 12.6664 15.7223 12.5527 15.7777 12.4262C15.8331 12.2997 15.8617 12.1631 15.8617 12.025C15.8617 11.8869 15.8331 11.7503 15.7777 11.6238C15.7223 11.4973 15.6412 11.3837 15.5397 11.29Z" />
-  </symbol>
-</svg>
--- a/packages/ui/src/assets/icons/check-box.svg
+++ b/packages/ui/src/assets/icons/check-box.svg
@ -1,20 +0,0 @@
-<svg
-  width="20"
-  height="20"
-  viewBox="0 0 20 20"
-  fill="none"
-  xmlns="http://www.w3.org/2000/svg"
->
-  <symbol width="20" height="20" viewBox="0 0 20 20" id="checked">
-    <rect x="1" y="1" width="18" height="18" rx="4" fill="currentColor" />
-    <path
-      fillRule="evenodd"
-      clipRule="evenodd"
-      d="M8.31476 13.858L5.13295 10.441C4.95568 10.253 4.95568 9.947 5.13295 9.757L5.77568 9.074C5.95295 8.886 6.24113 8.886 6.4184 9.074L8.63657 11.466L13.5811 6.141C13.7584 5.953 14.0465 5.953 14.2238 6.141L14.8665 6.825C15.0438 7.013 15.0438 7.32 14.8665 7.507L8.95748 13.858C8.78021 14.046 8.49203 14.046 8.31476 13.858Z"
-      fill="white"
-    />
-  </symbol>
-  <symbol width="20" height="20" viewBox="0 0 20 20" fill="none" id="unchecked">
-    <rect x="2" y="2" width="16" height="16" rx="3" stroke="currentColor" strokeWidth="2" />
-  </symbol>
-</svg>
--- a/packages/ui/src/assets/icons/checkbox-icon.svg
+++ b/packages/ui/src/assets/icons/checkbox-icon.svg
@ -0,0 +1,5 @@
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <rect x="1" y="1" width="16" height="16" rx="3" stroke="currentcolor" stroke-width="2"/>
+  <rect width="18" height="18" rx="4" fill="currentcolor"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M7.31476 12.858L4.13295 9.441C3.95568 9.253 3.95568 8.947 4.13295 8.757L4.77568 8.074C4.95295 7.886 5.24113 7.886 5.4184 8.074L7.63657 10.466L12.5811 5.141C12.7584 4.953 13.0465 4.953 13.2238 5.141L13.8665 5.825C14.0438 6.013 14.0438 6.32 13.8665 6.507L7.95748 12.858C7.78021 13.046 7.49203 13.046 7.31476 12.858Z" fill="white"/>
+</svg>
--- a/packages/ui/src/assets/icons/clear-icon.svg
+++ b/packages/ui/src/assets/icons/clear-icon.svg
@ -1,3 +1,4 @@
-<svg width="18" height="18" id="clear" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <path fill-rule="evenodd" clip-rule="evenodd" d="M9 18C13.9706 18 18 13.9706 18 9C18 4.02944 13.9706 0 9 0C4.02944 0 0 4.02944 0 9C0 13.9706 4.02944 18 9 18ZM5.46447 6.87868C5.07394 6.48816 5.07394 5.85499 5.46447 5.46447C5.85499 5.07394 6.48816 5.07394 6.87868 5.46447L9 7.58579L11.1213 5.46447C11.5118 5.07394 12.145 5.07394 12.5355 5.46447C12.9261 5.85499 12.9261 6.48815 12.5355 6.87868L10.4142 9L12.5355 11.1213C12.9261 11.5118 12.9261 12.145 12.5355 12.5355C12.145 12.9261 11.5118 12.9261 11.1213 12.5355L9 10.4142L6.87868 12.5355C6.48816 12.9261 5.85499 12.9261 5.46447 12.5355C5.07394 12.145 5.07394 11.5118 5.46447 11.1213L7.58579 9L5.46447 6.87868Z" fill="#747778"/>
+<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21ZM8.46447 9.87868C8.07394 9.48816 8.07394 8.85499 8.46447 8.46447C8.85499 8.07394 9.48816 8.07394 9.87868 8.46447L12 10.5858L14.1213 8.46447C14.5118 8.07394 15.145 8.07394 15.5355 8.46447C15.9261 8.85499 15.9261 9.48815 15.5355 9.87868L13.4142 12L15.5355 14.1213C15.9261 14.5118 15.9261 15.145 15.5355 15.5355C15.145 15.9261 14.5118 15.9261 14.1213 15.5355L12 13.4142L9.87868 15.5355C9.48816 15.9261 8.85499 15.9261 8.46447 15.5355C8.07394 15.145 8.07394 14.5118 8.46447 14.1213L10.5858 12L8.46447 9.87868Z" fill="currentcolor"/>
 </svg>
+
--- a/packages/ui/src/assets/icons/close-icon.svg
+++ b/packages/ui/src/assets/icons/close-icon.svg
@ -1,3 +1,4 @@
-<svg id="close-icon" width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-  <path d="M13.4099 11.9999L17.7099 7.70994C17.8982 7.52164 18.004 7.26624 18.004 6.99994C18.004 6.73364 17.8982 6.47825 17.7099 6.28994C17.5216 6.10164 17.2662 5.99585 16.9999 5.99585C16.7336 5.99585 16.4782 6.10164 16.2899 6.28994L11.9999 10.5899L7.70994 6.28994C7.52164 6.10164 7.26624 5.99585 6.99994 5.99585C6.73364 5.99585 6.47824 6.10164 6.28994 6.28994C6.10164 6.47825 5.99585 6.73364 5.99585 6.99994C5.99585 7.26624 6.10164 7.52164 6.28994 7.70994L10.5899 11.9999L6.28994 16.2899C6.19621 16.3829 6.12182 16.4935 6.07105 16.6154C6.02028 16.7372 5.99414 16.8679 5.99414 16.9999C5.99414 17.132 6.02028 17.2627 6.07105 17.3845C6.12182 17.5064 6.19621 17.617 6.28994 17.7099C6.3829 17.8037 6.4935 17.8781 6.61536 17.9288C6.73722 17.9796 6.86793 18.0057 6.99994 18.0057C7.13195 18.0057 7.26266 17.9796 7.38452 17.9288C7.50638 17.8781 7.61698 17.8037 7.70994 17.7099L11.9999 13.4099L16.2899 17.7099C16.3829 17.8037 16.4935 17.8781 16.6154 17.9288C16.7372 17.9796 16.8679 18.0057 16.9999 18.0057C17.132 18.0057 17.2627 17.9796 17.3845 17.9288C17.5064 17.8781 17.617 17.8037 17.7099 17.7099C17.8037 17.617 17.8781 17.5064 17.9288 17.3845C17.9796 17.2627 18.0057 17.132 18.0057 16.9999C18.0057 16.8679 17.9796 16.7372 17.9288 16.6154C17.8781 16.4935 17.8037 16.3829 17.7099 16.2899L13.4099 11.9999Z" fill="#AEAEAE"/>
+<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M13.4099 12.0002L19.7099 5.71019C19.8982 5.52188 20.004 5.26649 20.004 5.00019C20.004 4.73388 19.8982 4.47849 19.7099 4.29019C19.5216 4.10188 19.2662 3.99609 18.9999 3.99609C18.7336 3.99609 18.4782 4.10188 18.2899 4.29019L11.9999 10.5902L5.70994 4.29019C5.52164 4.10188 5.26624 3.99609 4.99994 3.99609C4.73364 3.99609 4.47824 4.10188 4.28994 4.29019C4.10164 4.47849 3.99585 4.73388 3.99585 5.00019C3.99585 5.26649 4.10164 5.52188 4.28994 5.71019L10.5899 12.0002L4.28994 18.2902C4.19621 18.3831 4.12182 18.4937 4.07105 18.6156C4.02028 18.7375 3.99414 18.8682 3.99414 19.0002C3.99414 19.1322 4.02028 19.2629 4.07105 19.3848C4.12182 19.5066 4.19621 19.6172 4.28994 19.7102C4.3829 19.8039 4.4935 19.8783 4.61536 19.9291C4.73722 19.9798 4.86793 20.006 4.99994 20.006C5.13195 20.006 5.26266 19.9798 5.38452 19.9291C5.50638 19.8783 5.61698 19.8039 5.70994 19.7102L11.9999 13.4102L18.2899 19.7102C18.3829 19.8039 18.4935 19.8783 18.6154 19.9291C18.7372 19.9798 18.8679 20.006 18.9999 20.006C19.132 20.006 19.2627 19.9798 19.3845 19.9291C19.5064 19.8783 19.617 19.8039 19.7099 19.7102C19.8037 19.6172 19.8781 19.5066 19.9288 19.3848C19.9796 19.2629 20.0057 19.1322 20.0057 19.0002C20.0057 18.8682 19.9796 18.7375 19.9288 18.6156C19.8781 18.4937 19.8037 18.3831 19.7099 18.2902L13.4099 12.0002Z" fill="currentcolor"/>
 </svg>
+
--- a/packages/ui/src/assets/icons/error-icon.svg
+++ b/packages/ui/src/assets/icons/error-icon.svg
--- a/packages/ui/src/assets/icons/expand-icon.svg
+++ b/packages/ui/src/assets/icons/expand-icon.svg
@ -1,4 +1,4 @@
-<svg id="more" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <path fill-rule="evenodd" clip-rule="evenodd" d="M16.9507 10.293C16.5602 9.90248 15.927 9.90248 15.5365 10.293L12.001 13.8285L8.46544 10.293C8.07492 9.90248 7.44175 9.90248 7.05123 10.293C6.6607 10.6835 6.6607 11.3167 7.05123 11.7072L11.2939 15.9499C11.6844 16.3404 12.3176 16.3404 12.7081 15.9499L16.9507 11.7072C17.3412 11.3167 17.3412 10.6835 16.9507 10.293Z" fill="#AEAEAE"/>
-  <circle cx="12" cy="12" r="11" stroke="#AEAEAE" stroke-width="2"/>
+<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M16.9507 10.293C16.5602 9.90248 15.927 9.90248 15.5365 10.293L12.001 13.8285L8.46544 10.293C8.07492 9.90248 7.44175 9.90248 7.05123 10.293C6.6607 10.6835 6.6607 11.3167 7.05123 11.7072L11.2939 15.9499C11.6844 16.3404 12.3176 16.3404 12.7081 15.9499L16.9507 11.7072C17.3412 11.3167 17.3412 10.6835 16.9507 10.293Z" fill="currentcolor"/>
+  <circle cx="12" cy="12" r="11" stroke="currentcolor" stroke-width="2"/>
 </svg>
--- a/packages/ui/src/assets/icons/loading-icon.svg
+++ b/packages/ui/src/assets/icons/loading-icon.svg
@ -0,0 +1,14 @@
+<svg id="loading" width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <rect x="15" width="2" height="8" rx="1" fill="white" fill-opacity="0.44"/>
+  <rect x="15" y="24" width="2" height="8" rx="1" fill="white"/>
+  <rect y="17" width="2" height="8" rx="1" transform="rotate(-90 0 17)" fill="white" fill-opacity="0.76"/>
+  <rect x="24" y="17" width="2" height="8" rx="1" transform="rotate(-90 24 17)" fill="white" fill-opacity="0.2"/>
+  <rect x="29.3564" y="7.13403" width="2" height="8" rx="1" transform="rotate(60 29.3564 7.13403)" fill="white" fill-opacity="0.28"/>
+  <rect x="8.57227" y="19.134" width="2" height="8" rx="1" transform="rotate(60 8.57227 19.134)" fill="white" fill-opacity="0.84"/>
+  <rect x="1.64355" y="8.86597" width="2" height="8" rx="1" transform="rotate(-60 1.64355 8.86597)" fill="white" fill-opacity="0.64"/>
+  <rect x="22.4277" y="20.866" width="2" height="8" rx="1" transform="rotate(-60 22.4277 20.866)" fill="white" fill-opacity="0.16"/>
+  <rect x="23.1338" y="1.64355" width="2" height="8" rx="1" transform="rotate(30 23.1338 1.64355)" fill="white" fill-opacity="0.36"/>
+  <rect x="11.1338" y="22.4282" width="2" height="8" rx="1" transform="rotate(30 11.1338 22.4282)" fill="white" fill-opacity="0.96"/>
+  <rect x="7.13379" y="2.64355" width="2" height="8" rx="1" transform="rotate(-30 7.13379 2.64355)" fill="white" fill-opacity="0.52"/>
+  <rect x="19.1338" y="23.4282" width="2" height="8" rx="1" transform="rotate(-30 19.1338 23.4282)" fill="white" fill-opacity="0.04"/>
+</svg>
--- a/packages/ui/src/assets/icons/loading.svg
+++ b/packages/ui/src/assets/icons/loading.svg
@ -1,14 +0,0 @@
-<svg id="loading" width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect x="15" width="2" height="8" rx="1" fill="white" fill-opacity="0.44"/>
-<rect x="15" y="24" width="2" height="8" rx="1" fill="white"/>
-<rect y="17" width="2" height="8" rx="1" transform="rotate(-90 0 17)" fill="white" fill-opacity="0.76"/>
-<rect x="24" y="17" width="2" height="8" rx="1" transform="rotate(-90 24 17)" fill="white" fill-opacity="0.2"/>
-<rect x="29.3564" y="7.13403" width="2" height="8" rx="1" transform="rotate(60 29.3564 7.13403)" fill="white" fill-opacity="0.28"/>
-<rect x="8.57227" y="19.134" width="2" height="8" rx="1" transform="rotate(60 8.57227 19.134)" fill="white" fill-opacity="0.84"/>
-<rect x="1.64355" y="8.86597" width="2" height="8" rx="1" transform="rotate(-60 1.64355 8.86597)" fill="white" fill-opacity="0.64"/>
-<rect x="22.4277" y="20.866" width="2" height="8" rx="1" transform="rotate(-60 22.4277 20.866)" fill="white" fill-opacity="0.16"/>
-<rect x="23.1338" y="1.64355" width="2" height="8" rx="1" transform="rotate(30 23.1338 1.64355)" fill="white" fill-opacity="0.36"/>
-<rect x="11.1338" y="22.4282" width="2" height="8" rx="1" transform="rotate(30 11.1338 22.4282)" fill="white" fill-opacity="0.96"/>
-<rect x="7.13379" y="2.64355" width="2" height="8" rx="1" transform="rotate(-30 7.13379 2.64355)" fill="white" fill-opacity="0.52"/>
-<rect x="19.1338" y="23.4282" width="2" height="8" rx="1" transform="rotate(-30 19.1338 23.4282)" fill="white" fill-opacity="0.04"/>
-</svg>
--- a/packages/ui/src/assets/icons/more-social-icon.svg
+++ b/packages/ui/src/assets/icons/more-social-icon.svg
@ -1,4 +1,4 @@
-<svg id="more" width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <circle cx="24" cy="24" r="19" stroke="#AEAEAE" stroke-width="2"/>
-  <path fill-rule="evenodd" clip-rule="evenodd" d="M17 24C17 25.1046 16.1046 26 15 26C13.8954 26 13 25.1046 13 24C13 22.8954 13.8954 22 15 22C16.1046 22 17 22.8954 17 24ZM26 24C26 25.1046 25.1046 26 24 26C22.8954 26 22 25.1046 22 24C22 22.8954 22.8954 22 24 22C25.1046 22 26 22.8954 26 24ZM33 26C34.1046 26 35 25.1046 35 24C35 22.8954 34.1046 22 33 22C31.8954 22 31 22.8954 31 24C31 25.1046 31.8954 26 33 26Z" fill="#AEAEAE"/>
+<svg viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <circle cx="24" cy="24" r="19" stroke="currentcolor" stroke-width="2"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M17 24C17 25.1046 16.1046 26 15 26C13.8954 26 13 25.1046 13 24C13 22.8954 13.8954 22 15 22C16.1046 22 17 22.8954 17 24ZM26 24C26 25.1046 25.1046 26 24 26C22.8954 26 22 25.1046 22 24C22 22.8954 22.8954 22 24 22C25.1046 22 26 22.8954 26 24ZM33 26C34.1046 26 35 25.1046 35 24C35 22.8954 34.1046 22 33 22C31.8954 22 31 22.8954 31 24C31 25.1046 31.8954 26 33 26Z" fill="currentcolor"/>
 </svg>
--- a/packages/ui/src/assets/icons/password-hide-icon.svg
+++ b/packages/ui/src/assets/icons/password-hide-icon.svg
@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M4.92879 3.92888C4.53826 4.3194 4.53826 4.95257 4.92879 5.34309L6.50507 6.91938C3.79112 8.79701 2 11.4523 2 12C2 12.866 6.47715 19 12 19C13.8197 19 15.5259 18.3341 16.9958 17.4101L17.6567 18.071C18.0472 18.4615 18.6804 18.4615 19.0709 18.071C19.4614 17.6805 19.4614 17.0473 19.0709 16.6568L6.343 3.92888C5.95248 3.53836 5.31931 3.53836 4.92879 3.92888ZM14.6137 15.028L8.97197 9.38628C8.36632 10.0873 8 11.0009 8 12C8 14.2091 9.79086 16 12 16C12.9991 16 13.9127 15.6337 14.6137 15.028ZM13.5568 8.31427C14.5141 8.7191 15.2809 9.48594 15.6857 10.4432L20.0754 14.8329C21.2856 13.5325 22 12.3459 22 12C22 11.134 17.5228 5 12 5C11.4584 5 10.9269 5.05898 10.4087 5.16619L13.5568 8.31427Z" fill="currentcolor"/>
+</svg>
--- a/packages/ui/src/assets/icons/password-show-icon.svg
+++ b/packages/ui/src/assets/icons/password-show-icon.svg
@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M22 12C22 12.866 17.5228 19 12 19C6.47715 19 2 12.866 2 12C2 11.134 6.47715 5 12 5C17.5228 5 22 11.134 22 12ZM16 12C16 14.2091 14.2091 16 12 16C9.79086 16 8 14.2091 8 12C8 9.79086 9.79086 8 12 8C14.2091 8 16 9.79086 16 12ZM11 14C12.1046 14 13 13.1046 13 12C13 10.8954 12.1046 10 11 10C9.89543 10 9 10.8954 9 12C9 13.1046 9.89543 14 11 14Z" fill="currentcolor"/>
+</svg>
--- a/packages/ui/src/assets/icons/privacy-icon.svg
+++ b/packages/ui/src/assets/icons/privacy-icon.svg
@ -1,8 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" >
-  <symbol id="hide" width="24" height="24" viewBox="0 0 24 24">
-    <path fill-rule="evenodd" clip-rule="evenodd" d="M4.92879 3.92888C4.53826 4.3194 4.53826 4.95257 4.92879 5.34309L6.50507 6.91938C3.79112 8.79701 2 11.4523 2 12C2 12.866 6.47715 19 12 19C13.8197 19 15.5259 18.3341 16.9958 17.4101L17.6567 18.071C18.0472 18.4615 18.6804 18.4615 19.0709 18.071C19.4614 17.6805 19.4614 17.0473 19.0709 16.6568L6.343 3.92888C5.95248 3.53836 5.31931 3.53836 4.92879 3.92888ZM14.6137 15.028L8.97197 9.38628C8.36632 10.0873 8 11.0009 8 12C8 14.2091 9.79086 16 12 16C12.9991 16 13.9127 15.6337 14.6137 15.028ZM13.5568 8.31427C14.5141 8.7191 15.2809 9.48594 15.6857 10.4432L20.0754 14.8329C21.2856 13.5325 22 12.3459 22 12C22 11.134 17.5228 5 12 5C11.4584 5 10.9269 5.05898 10.4087 5.16619L13.5568 8.31427Z" />
-  </symbol>
-  <symbol id="show" width="24" height="24" viewBox="0 0 24 24" >
-    <path fill-rule="evenodd" clip-rule="evenodd" d="M22 12C22 12.866 17.5228 19 12 19C6.47715 19 2 12.866 2 12C2 11.134 6.47715 5 12 5C17.5228 5 22 11.134 22 12ZM16 12C16 14.2091 14.2091 16 12 16C9.79086 16 8 14.2091 8 12C8 9.79086 9.79086 8 12 8C14.2091 8 16 9.79086 16 12ZM11 14C12.1046 14 13 13.1046 13 12C13 10.8954 12.1046 10 11 10C9.89543 10 9 10.8954 9 12C9 13.1046 9.89543 14 11 14Z" />
-  </symbol>
-</svg>
--- a/packages/ui/src/assets/icons/radio-button-icon.svg
+++ b/packages/ui/src/assets/icons/radio-button-icon.svg
@ -0,0 +1,6 @@
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <circle cx="9" cy="9" r="8" stroke="currentcolor" stroke-width="2"/>
+  <circle cx="9" cy="9" r="9" fill="currentcolor"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M4.75691 7.99955C4.36639 8.39008 4.36639 9.02324 4.75691 9.41377L7.58534 12.2422C7.97586 12.6327 8.60903 12.6327 8.99955 12.2422L13.2422 7.99955C13.6327 7.60903 13.6327 6.97586 13.2422 6.58534C12.8517 6.19481 12.2185 6.19481 11.828 6.58534L8.29245 10.1209L6.17112 7.99955C5.7806 7.60903 5.14744 7.60903 4.75691 7.99955Z" fill="white"/>
+</svg>
+
--- a/packages/ui/src/assets/icons/radio-button.svg
+++ b/packages/ui/src/assets/icons/radio-button.svg
@ -1,9 +1,4 @@
 <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <symbol width="18" height="18" viewBox="0 0 18 18" id="unchecked">
-      <circle cx="9" cy="9" r="8" stroke="#D8D8D8" stroke-width="2" fill="transparent" />
-  </symbol>
-  <symbol width="18" height="18" viewBox="0 0 18 18" id="checked">
-    <circle cx="9" cy="9" r="9" fill="currentColor"/>
+  <circle cx="9" cy="9" r="9" fill="currentColor"/>
    <path fill-rule="evenodd" clip-rule="evenodd" d="M4.75691 7.99955C4.36639 8.39008 4.36639 9.02324 4.75691 9.41377L7.58534 12.2422C7.97586 12.6327 8.60903 12.6327 8.99955 12.2422L13.2422 7.99955C13.6327 7.60903 13.6327 6.97586 13.2422 6.58534C12.8517 6.19481 12.2185 6.19481 11.828 6.58534L8.29245 10.1209L6.17112 7.99955C5.7806 7.60903 5.14744 7.60903 4.75691 7.99955Z" fill="white"/>
-  </symbol>
 </svg>
--- a/packages/ui/src/assets/index.d.ts
+++ b/packages/ui/src/assets/index.d.ts
@ -0,0 +1,6 @@
+interface SvgComponent extends React.StatelessComponent<React.SVGAttributes<SVGElement>> {}
+
+declare module '*.svg' {
+  const value: SvgComponent;
+  export default value;
+}
--- a/packages/ui/src/components/Checkbox/index.module.scss
+++ b/packages/ui/src/components/Checkbox/index.module.scss
@ -6,15 +6,16 @@
  align-items: center;

  .icon {
-    width: 20px;
-    height: 20px;
    margin-right: _.unit(2);

-    > svg {
+    > * {
      display: none;
-      color: var(--color-text-disabled);

-      &:first-child {
+      &:nth-child(1) {
+        color: var(--color-icon);
+      }
+
+      &:nth-child(2) {
        color: var(--color-primary);
      }
    }
@ -22,30 +23,17 @@

  input {
    position: absolute;
-    width: 20px;
-    height: 20px;
+    width: 18px;
+    height: 18px;
    left: 0;
    top: 0;
    margin: 0;
    opacity: 0%;
  }

-  input:checked:not(:disabled) ~ .icon > svg:nth-child(1),
-  input:not(:checked):not(:disabled) ~ .icon > svg:nth-child(2) {
+  input:not(:checked):not(:disabled) ~ .icon > *:nth-child(1),
+  input:checked:not(:disabled) ~ .icon > *:nth-child(2),
+  input:checked:not(:disabled) ~ .icon > *:nth-child(3) {
    display: block;
  }
 }
-
-:global(body.desktop) {
-  .checkbox {
-    .icon {
-      width: 18px;
-      height: 18px;
-    }
-
-    input {
-      width: 18px;
-      height: 18px;
-    }
-  }
-}
--- a/packages/ui/src/components/Checkbox/index.tsx
+++ b/packages/ui/src/components/Checkbox/index.tsx
@ -1,15 +1,20 @@
 import React, { forwardRef, InputHTMLAttributes, Ref } from 'react';
+import { isMobile } from 'react-device-detect';
+
+import CheckBox from '@/assets/icons/checkbox-icon.svg';
+import RadioButton from '@/assets/icons/radio-button-icon.svg';

-import { CheckBoxIcon } from '../Icons';
 import * as styles from './index.module.scss';

 type Props = Omit<InputHTMLAttributes<HTMLInputElement>, 'type'>;

 const Checkbox = ({ disabled, ...rest }: Props, ref: Ref<HTMLInputElement>) => {
+  const Icon = isMobile ? RadioButton : CheckBox;
+
  return (
    <div className={styles.checkbox}>
      <input type="checkbox" disabled={disabled} {...rest} ref={ref} readOnly />
-      <CheckBoxIcon className={styles.icon} />
+      <Icon className={styles.icon} />
    </div>
  );
 };
--- a/packages/ui/src/components/ConfirmModal/AcModal.tsx
+++ b/packages/ui/src/components/ConfirmModal/AcModal.tsx
@ -4,10 +4,10 @@ import { isMobile } from 'react-device-detect';
 import { useTranslation } from 'react-i18next';
 import ReactModal from 'react-modal';

+import CloseIcon from '@/assets/icons/close-icon.svg';
 import Button from '@/components/Button';

 import * as modalStyles from '../../scss/modal.module.scss';
-import { CloseIcon } from '../Icons';
 import * as styles from './Acmodal.module.scss';
 import { ModalProps } from './type';

--- a/packages/ui/src/components/ConfirmModal/Acmodal.module.scss
+++ b/packages/ui/src/components/ConfirmModal/Acmodal.module.scss
@ -25,6 +25,12 @@
  @include _.flex-row;
  justify-content: space-between;
  margin-bottom: _.unit(4);
+
+  > svg {
+    color: var(--color-icon);
+    width: 24px;
+    height: 24px;
+  }
 }

 .content {
--- a/packages/ui/src/components/Drawer/index.module.scss
+++ b/packages/ui/src/components/Drawer/index.module.scss
@ -12,10 +12,12 @@
  justify-content: flex-end;
  align-items: center;
  margin-bottom: _.unit(4);
-}

-.closeIcon {
-  fill: var(--color-icon);
+  > svg {
+    color: var(--color-icon);
+    width: 20px;
+    height: 20px;
+  }
 }

 .drawer {
--- a/packages/ui/src/components/Drawer/index.tsx
+++ b/packages/ui/src/components/Drawer/index.tsx
@ -2,7 +2,7 @@ import classNames from 'classnames';
 import React, { ReactNode } from 'react';
 import ReactModal from 'react-modal';

-import { CloseIcon } from '@/components/Icons';
+import CloseIcon from '@/assets/icons/close-icon.svg';

 import * as modalStyles from '../../scss/modal.module.scss';
 import * as styles from './index.module.scss';
@ -34,7 +34,7 @@ const Drawer = ({ className, isOpen = false, children, onClose }: Props) => {
    >
      <div className={styles.container}>
        <div className={styles.header}>
-          <CloseIcon className={styles.closeIcon} onClick={onClose} />
+          <CloseIcon onClick={onClose} />
        </div>
        {children}
      </div>
--- a/packages/ui/src/components/Icons/CheckBoxIcon.tsx
+++ b/packages/ui/src/components/Icons/CheckBoxIcon.tsx
@ -1,36 +0,0 @@
-import React from 'react';
-import { isMobile } from 'react-device-detect';
-
-import _CheckBoxIcon from '@/assets/icons/check-box.svg';
-import RadioButtonIcon from '@/assets/icons/radio-button.svg';
-
-type Props = {
-  className?: string;
-};
-
-const CheckBoxIcon = ({ className }: Props) => (
-  <span className={className}>
-    <svg
-      width="20"
-      height="20"
-      viewBox="0 0 20 20"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-      className={className}
-    >
-      <use href={`${isMobile ? RadioButtonIcon : _CheckBoxIcon}#checked`} />
-    </svg>
-    <svg
-      width="20"
-      height="20"
-      viewBox="0 0 20 20"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-      className={className}
-    >
-      <use href={`${isMobile ? RadioButtonIcon : _CheckBoxIcon}#unchecked`} />
-    </svg>
-  </span>
-);
-
-export default CheckBoxIcon;
--- a/packages/ui/src/components/Icons/ClearIcon.tsx
+++ b/packages/ui/src/components/Icons/ClearIcon.tsx
@ -1,11 +0,0 @@
-import React, { SVGProps } from 'react';
-
-import IconClear from '@/assets/icons/clear-icon.svg';
-
-const ClearIcon = (props: SVGProps<SVGSVGElement>) => (
-  <svg width="18" height="18" viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg" {...props}>
-    <use href={`${IconClear}#clear`} />
-  </svg>
-);
-
-export default ClearIcon;
--- a/packages/ui/src/components/Icons/CloseIcon.tsx
+++ b/packages/ui/src/components/Icons/CloseIcon.tsx
@ -1,11 +0,0 @@
-import React, { SVGProps } from 'react';
-
-import IconClose from '@/assets/icons/close-icon.svg';
-
-const CloseIcon = (props: SVGProps<SVGSVGElement>) => (
-  <svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" {...props}>
-    <use href={`${IconClose}#close-icon`} />
-  </svg>
-);
-
-export default CloseIcon;
--- a/packages/ui/src/components/Icons/DownArrowIcon.tsx
+++ b/packages/ui/src/components/Icons/DownArrowIcon.tsx
@ -1,13 +0,0 @@
-import React, { SVGProps } from 'react';
-
-import Arrow from '@/assets/icons/arrow.svg';
-
-const DownArrowIcon = (props: SVGProps<SVGSVGElement>) => {
-  return (
-    <svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" {...props}>
-      <use href={`${Arrow}#down`} transform="translate(0, 1)" />
-    </svg>
-  );
-};
-
-export default DownArrowIcon;
--- a/packages/ui/src/components/Icons/ErrorIcon.tsx
+++ b/packages/ui/src/components/Icons/ErrorIcon.tsx
@ -1,19 +0,0 @@
-import React, { SVGProps } from 'react';
-
-import Error from '@/assets/icons/error.svg';
-
-const ErrorIcon = (props: SVGProps<SVGSVGElement>) => {
-  return (
-    <svg
-      width="230"
-      height="230"
-      viewBox="0 0 230 230"
-      xmlns="http://www.w3.org/2000/svg"
-      {...props}
-    >
-      <use href={`${Error}#error`} />
-    </svg>
-  );
-};
-
-export default ErrorIcon;
--- a/packages/ui/src/components/Icons/ExpandMoreIcon.tsx
+++ b/packages/ui/src/components/Icons/ExpandMoreIcon.tsx
@ -1,11 +0,0 @@
-import React, { SVGProps } from 'react';
-
-import ExpandMore from '@/assets/icons/expand-icon.svg';
-
-const ExpandMoreIcon = (props: SVGProps<SVGSVGElement>) => (
-  <svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" {...props}>
-    <use href={`${ExpandMore}#more`} />
-  </svg>
-);
-
-export default ExpandMoreIcon;
--- a/packages/ui/src/components/Icons/LoadingIcon.tsx
+++ b/packages/ui/src/components/Icons/LoadingIcon.tsx
@ -1,13 +0,0 @@
-import React, { SVGProps } from 'react';
-
-import Loading from '@/assets/icons/loading.svg';
-
-const LoadingIcon = (props: SVGProps<SVGSVGElement>) => {
-  return (
-    <svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" {...props}>
-      <use href={`${Loading}#loading`} />
-    </svg>
-  );
-};
-
-export default LoadingIcon;
--- a/packages/ui/src/components/Icons/MoreSocialIcon.tsx
+++ b/packages/ui/src/components/Icons/MoreSocialIcon.tsx
@ -1,18 +0,0 @@
-import React, { SVGProps, forwardRef, Ref } from 'react';
-
-import More from '@/assets/icons/more-social-icon.svg';
-
-const MoreSocialIcon = (props: SVGProps<SVGSVGElement>, reference?: Ref<SVGSVGElement>) => (
-  <svg
-    width="48"
-    height="48"
-    viewBox="0 0 48 48"
-    xmlns="http://www.w3.org/2000/svg"
-    {...props}
-    ref={reference}
-  >
-    <use href={`${More}#more`} />
-  </svg>
-);
-
-export default forwardRef(MoreSocialIcon);
--- a/packages/ui/src/components/Icons/NavArrowIcon.tsx
+++ b/packages/ui/src/components/Icons/NavArrowIcon.tsx
@ -1,17 +0,0 @@
-import React, { SVGProps } from 'react';
-
-import Arrow from '@/assets/icons/arrow.svg';
-
-type Props = {
-  type?: 'prev' | 'next';
-} & SVGProps<SVGSVGElement>;
-
-const NavArrowIcon = ({ type = 'prev', ...rest }: Props) => {
-  return (
-    <svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" {...rest}>
-      <use href={`${Arrow}#${type}`} />
-    </svg>
-  );
-};
-
-export default NavArrowIcon;
--- a/packages/ui/src/components/Icons/PrivacyIcon.tsx
+++ b/packages/ui/src/components/Icons/PrivacyIcon.tsx
@ -1,17 +0,0 @@
-import React, { SVGProps } from 'react';
-
-import Icon from '@/assets/icons/privacy-icon.svg';
-
-type Props = {
-  type?: 'show' | 'hide';
-} & SVGProps<SVGSVGElement>;
-
-const PrivacyIcon = ({ type = 'show', ...rest }: Props) => {
-  return (
-    <svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" {...rest}>
-      <use href={`${Icon}#${type}`} />
-    </svg>
-  );
-};
-
-export default PrivacyIcon;
--- a/packages/ui/src/components/Icons/index.ts
+++ b/packages/ui/src/components/Icons/index.ts
@ -1,9 +0,0 @@
-export { default as CloseIcon } from './CloseIcon';
-export { default as ClearIcon } from './ClearIcon';
-export { default as PrivacyIcon } from './PrivacyIcon';
-export { default as DownArrowIcon } from './DownArrowIcon';
-export { default as LoadingIcon } from './LoadingIcon';
-export { default as NavArrowIcon } from './NavArrowIcon';
-export { default as ExpandMoreIcon } from './ExpandMoreIcon';
-export { default as ErrorIcon } from './ErrorIcon';
-export { default as CheckBoxIcon } from './CheckBoxIcon';
--- a/packages/ui/src/components/Input/PasswordInput.tsx
+++ b/packages/ui/src/components/Input/PasswordInput.tsx
@ -1,8 +1,9 @@
 import classNames from 'classnames';
 import React, { useState, useRef, HTMLProps } from 'react';

+import PasswordHideIcon from '@/assets/icons/password-hide-icon.svg';
+import PasswordShowIcon from '@/assets/icons/password-show-icon.svg';
 import ErrorMessage, { ErrorType } from '@/components/ErrorMessage';
-import { PrivacyIcon } from '@/components/Icons';

 import * as styles from './index.module.scss';

@ -16,7 +17,7 @@ const PasswordInput = ({ className, value, error, onFocus, onBlur, ...rest }: Pr
  const [type, setType] = useState('password');
  const [onInputFocus, setOnInputFocus] = useState(false);
  const inputElement = useRef<HTMLInputElement>(null);
-  const iconType = type === 'password' ? 'hide' : 'show';
+  const Icon = type === 'password' ? PasswordHideIcon : PasswordShowIcon;

  return (
    <div className={className}>
@ -36,9 +37,8 @@ const PasswordInput = ({ className, value, error, onFocus, onBlur, ...rest }: Pr
          {...rest}
        />
        {value && onInputFocus && (
-          <PrivacyIcon
+          <Icon
            className={styles.actionButton}
-            type={iconType}
            onMouseDown={(event) => {
              event.preventDefault();
              setType(type === 'password' ? 'text' : 'password');
--- a/packages/ui/src/components/Input/PhoneInput.tsx
+++ b/packages/ui/src/components/Input/PhoneInput.tsx
@ -1,8 +1,9 @@
 import classNames from 'classnames';
 import React, { useState, useMemo, useRef } from 'react';

+import DownArrowIcon from '@/assets/icons/arrow-down.svg';
+import ClearIcon from '@/assets/icons/clear-icon.svg';
 import ErrorMessage, { ErrorType } from '@/components/ErrorMessage';
-import { ClearIcon, DownArrowIcon } from '@/components/Icons';
 import { CountryCallingCode, CountryMetaData } from '@/hooks/use-phone-number';

 import * as styles from './index.module.scss';
--- a/packages/ui/src/components/Input/index.module.scss
+++ b/packages/ui/src/components/Input/index.module.scss
@ -12,12 +12,21 @@
  transition-timing-function: ease-in-out;
  transition-duration: 0.2s;

+  .actionButton {
+    display: none;
+    color: var(--color-icon);
+  }
+
  > *:not(:first-child) {
    margin-left: _.unit(1);
  }

  &:focus-within {
    border: _.border(var(--color-primary));
+
+    .actionButton {
+      display: block;
+    }
  }

  &.error {
@ -49,15 +58,17 @@
  margin-top: _.unit(2);
 }

-.actionButton {
-  fill: var(--color-icon);
-}

 :global(body.mobile) {
  .wrapper {
    padding: 0 _.unit(4);
    background: var(--color-layer);
    color: var(--color-text);
+
+    .actionButton {
+      width: 24px;
+      height: 24px;
+    }
  }
 }

@ -69,6 +80,11 @@
    border-radius: 6px;
    outline: 3px solid transparent;

+    .actionButton {
+      width: 22px;
+      height: 22px;
+    }
+
    &:focus-within {
      border-color: var(--color-primary);
      outline-color: var(--color-focused-variant);
--- a/packages/ui/src/components/Input/index.test.tsx
+++ b/packages/ui/src/components/Input/index.test.tsx
@ -42,8 +42,6 @@ describe('Input Field UI Component', () => {
    );
    const inputField = container.querySelector('input');

-    expect(container.querySelector('svg')).toBeNull();
-
    if (inputField) {
      fireEvent.focus(inputField);
    }
--- a/packages/ui/src/components/Input/index.tsx
+++ b/packages/ui/src/components/Input/index.tsx
@ -1,8 +1,8 @@
 import classNames from 'classnames';
-import React, { useState, HTMLProps } from 'react';
+import React, { HTMLProps } from 'react';

+import ClearIcon from '@/assets/icons/clear-icon.svg';
 import ErrorMessage, { ErrorType } from '@/components/ErrorMessage';
-import { ClearIcon } from '@/components/Icons';

 import * as styles from './index.module.scss';

@ -19,30 +19,14 @@ const Input = ({
  value,
  error,
  errorStyling = true,
-  onFocus,
-  onBlur,
  onClear,
  ...rest
 }: Props) => {
-  const [onInputFocus, setOnInputFocus] = useState(false);
-
  return (
    <div className={className}>
      <div className={classNames(styles.wrapper, error && errorStyling && styles.error)}>
-        <input
-          type={type}
-          value={value}
-          onFocus={(event) => {
-            setOnInputFocus(true);
-            onFocus?.(event);
-          }}
-          onBlur={(event) => {
-            setOnInputFocus(false);
-            onBlur?.(event);
-          }}
-          {...rest}
-        />
-        {value && onInputFocus && onClear && (
+        <input type={type} value={value} {...rest} />
+        {value && onClear && (
          <ClearIcon
            className={styles.actionButton}
            onMouseDown={(event) => {
--- a/packages/ui/src/components/Input/phoneInput.module.scss
+++ b/packages/ui/src/components/Input/phoneInput.module.scss
@ -25,7 +25,10 @@
 :global(body.mobile) {
  .countryCodeSelector {
    > svg {
-      fill: var(--color-primary);
+      color: var(--color-primary);
+      margin-left: _.unit(1);
+      width: 16px;
+      height: 16px;
    }
  }
 }
@ -34,7 +37,10 @@
 :global(body.desktop) {
  .countryCodeSelector {
    > svg {
-      fill: var(--color-icon);
+      color: var(--color-icon);
+      margin-left: _.unit(2);
+      width: 20px;
+      height: 20px;
    }
  }
 }
--- a/packages/ui/src/components/LoadingLayer/index.module.scss
+++ b/packages/ui/src/components/LoadingLayer/index.module.scss
@ -19,7 +19,7 @@
 }

 .loadingIcon {
-  animation: rotating 1.5s ease-in-out infinite;
+  animation: rotating 1s linear infinite;
 }

@keyframes rotating {
--- a/packages/ui/src/components/LoadingLayer/index.tsx
+++ b/packages/ui/src/components/LoadingLayer/index.tsx
@ -1,6 +1,6 @@
 import React from 'react';

-import { LoadingIcon } from '@/components/Icons';
+import LoadingIcon from '@/assets/icons/loading-icon.svg';

 import * as styles from './index.module.scss';

--- a/packages/ui/src/components/NavBar/index.module.scss
+++ b/packages/ui/src/components/NavBar/index.module.scss
@ -19,9 +19,8 @@
    cursor: pointer;
  }

-  svg {
+  > svg {
    fill: currentColor;
-    margin-right: _.unit(2);
  }

  .title {
--- a/packages/ui/src/components/NavBar/index.tsx
+++ b/packages/ui/src/components/NavBar/index.tsx
@ -3,7 +3,7 @@ import { isMobile } from 'react-device-detect';
 import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';

-import { NavArrowIcon } from '@/components/Icons';
+import ArrowPrev from '@/assets/icons/arrow-prev.svg';

 import * as styles from './index.module.scss';

@ -23,7 +23,7 @@ const NavBar = ({ title }: Props) => {
          navigate(-1);
        }}
      >
-        <NavArrowIcon />
+        <ArrowPrev />
        {!isMobile && <span>{t('action.nav_back')}</span>}
      </div>

--- a/packages/ui/src/containers/SocialSignIn/PrimarySocialSignIn.module.scss
+++ b/packages/ui/src/containers/SocialSignIn/PrimarySocialSignIn.module.scss
@ -9,6 +9,7 @@
 }

 .expandIcon {
+  color: var(--color-icon);
  width: 20px;
  height: 20px;

--- a/packages/ui/src/containers/SocialSignIn/PrimarySocialSignIn.tsx
+++ b/packages/ui/src/containers/SocialSignIn/PrimarySocialSignIn.tsx
@ -1,8 +1,8 @@
 import classNames from 'classnames';
 import React, { useState, useMemo } from 'react';

+import ExpandIcon from '@/assets/icons/expand-icon.svg';
 import SocialLinkButton from '@/components/Button/SocialLinkButton';
-import { ExpandMoreIcon } from '@/components/Icons';
 import useSocial from '@/hooks/use-social';

 import * as styles from './PrimarySocialSignIn.module.scss';
@ -42,7 +42,7 @@ const PrimarySocialSignIn = ({ className, isPopup = false, onSocialSignInCallbac
        />
      ))}
      {!fullDisplay && (
-        <ExpandMoreIcon
+        <ExpandIcon
          className={classNames(styles.expandIcon, showAll && styles.expanded)}
          onClick={() => {
            setShowAll(!showAll);
--- a/packages/ui/src/containers/SocialSignIn/SecondarySocialSignIn.module.scss
+++ b/packages/ui/src/containers/SocialSignIn/SecondarySocialSignIn.module.scss
@ -15,19 +15,28 @@

 .moreButton {
  border-radius: 50%;
+  @include _.flex-column;
+
+  > svg {
+    color: var(--color-icon);
+  }
 }

 :global(body.mobile) {
  .moreButton {
-    width: 48px;
-    height: 48px;
+    > svg {
+      width: 48px;
+      height: 48px;
+    }
  }
 }


 :global(body.desktop) {
  .moreButton {
-    width: 28px;
-    height: 28px;
+    > svg {
+      width: 28px;
+      height: 28px;
+    }
  }
 }
--- a/packages/ui/src/containers/SocialSignIn/SecondarySocialSignIn.tsx
+++ b/packages/ui/src/containers/SocialSignIn/SecondarySocialSignIn.tsx
@ -2,8 +2,8 @@ import classNames from 'classnames';
 import React, { useMemo, useState, useRef } from 'react';
 import { isMobile } from 'react-device-detect';

+import MoreSocialIcon from '@/assets/icons/more-social-icon.svg';
 import SocialIconButton from '@/components/Button/SocialIconButton';
-import MoreSocialIcon from '@/components/Icons/MoreSocialIcon';
 import useSocial from '@/hooks/use-social';

 import * as styles from './SecondarySocialSignIn.module.scss';
@ -20,7 +20,7 @@ const SecondarySocialSignIn = ({ className }: Props) => {
  const { socialConnectors, invokeSocialSignIn } = useSocial();
  const isOverSize = socialConnectors.length > defaultSize;
  const [showModal, setShowModal] = useState(false);
-  const moreButtonRef = useRef<SVGSVGElement>(null);
+  const moreButtonRef = useRef<HTMLElement>(null);

  const displayConnectors = useMemo(() => {
    if (isOverSize) {
@ -44,13 +44,15 @@ const SecondarySocialSignIn = ({ className }: Props) => {
          />
        ))}
        {isOverSize && (
-          <MoreSocialIcon
+          <span
            ref={moreButtonRef}
            className={styles.moreButton}
            onClick={() => {
              setShowModal(true);
            }}
-          />
+          >
+            <MoreSocialIcon />
+          </span>
        )}
      </div>
      {isOverSize && isMobile && (
--- a/packages/ui/src/containers/SocialSignIn/SocialSignInDropdown.tsx
+++ b/packages/ui/src/containers/SocialSignIn/SocialSignInDropdown.tsx
@ -9,7 +9,7 @@ import { ConnectorData } from '@/types';
 import * as styles from './SocialSignInDropdown.module.scss';

 type Props = {
-  anchorRef?: React.RefObject<HTMLElement | SVGSVGElement>;
+  anchorRef?: React.RefObject<HTMLElement>;
  isOpen: boolean;
  onClose: () => void;
  connectors: ConnectorData[];
--- a/packages/ui/src/pages/ErrorPage/index.tsx
+++ b/packages/ui/src/pages/ErrorPage/index.tsx
@ -2,8 +2,8 @@ import React from 'react';
 import { TFuncKey, useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';

+import ErrorIcon from '@/assets/icons/error-icon.svg';
 import Button from '@/components/Button';
-import { ErrorIcon } from '@/components/Icons';
 import NavBar from '@/components/NavBar';

 import * as styles from './index.module.scss';
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@ -734,6 +734,7 @@ 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
@ -752,6 +753,7 @@ 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
@ -842,6 +844,7 @@ importers:
      '@logto/schemas': ^0.1.0
      '@parcel/core': ^2.5.0
      '@parcel/transformer-sass': ^2.5.0
+      '@parcel/transformer-svg-react': ^2.5.0
      '@peculiar/webcrypto': ^1.3.3
      '@silverhand/eslint-config': ^0.12.0
      '@silverhand/eslint-config-react': ^0.11.0
@ -880,15 +883,13 @@ importers:
      stylelint: ^13.13.1
      typescript: ^4.6.2
      use-debounced-loader: ^0.1.1
-    dependencies:
-      react-device-detect: 2.2.2_sfoxds7t5ydpegc3knd667wn6m
-      use-debounced-loader: 0.1.1_react@17.0.2
    devDependencies:
      '@logto/jest-config': link:../jest-config
      '@logto/phrases': link:../phrases
      '@logto/schemas': link:../schemas
      '@parcel/core': 2.5.0
      '@parcel/transformer-sass': 2.5.0_@parcel+core@2.5.0
+      '@parcel/transformer-svg-react': 2.5.0_@parcel+core@2.5.0
      '@peculiar/webcrypto': 1.3.3
      '@silverhand/eslint-config': 0.12.0_hjjt7jwmhwqm7bjf55k5ihcdqq
      '@silverhand/eslint-config-react': 0.11.0_oxzh5pb5bdzd47fiyp3dy75fai
@ -916,6 +917,7 @@ importers:
      postcss-modules: 4.3.0_postcss@8.4.6
      prettier: 2.5.1
      react: 17.0.2
+      react-device-detect: 2.2.2_sfoxds7t5ydpegc3knd667wn6m
      react-dom: 17.0.2_react@17.0.2
      react-i18next: 11.15.4_fq32mavcto3l2u7t3zyhvdh4yu
      react-modal: 3.14.4_sfoxds7t5ydpegc3knd667wn6m
@ -925,6 +927,7 @@ importers:
      react-timer-hook: 3.0.5_sfoxds7t5ydpegc3knd667wn6m
      stylelint: 13.13.1
      typescript: 4.6.2
+      use-debounced-loader: 0.1.1_react@17.0.2

 packages:

@ -5560,6 +5563,20 @@ packages:
      - '@parcel/core'
    dev: true

+  /@parcel/transformer-svg-react/2.5.0_@parcel+core@2.5.0:
+    resolution: {integrity: sha512-jy+fuZ8lbAwe9nvvBd5snd7OJXeR0h8o0seZqtGF5Q80SuMZ4zm1kfhCoDfhEkNQt0fHttlUlOIbGcyaTczXcA==}
+    engines: {node: '>= 12.0.0', parcel: ^2.5.0}
+    dependencies:
+      '@parcel/plugin': 2.5.0_@parcel+core@2.5.0
+      '@svgr/core': 6.2.1
+      '@svgr/plugin-jsx': 6.2.1_@svgr+core@6.2.1
+      '@svgr/plugin-svgo': 6.2.0_@svgr+core@6.2.1
+      camelcase: 6.3.0
+    transitivePeerDependencies:
+      - '@parcel/core'
+      - supports-color
+    dev: true
+
  /@parcel/transformer-svg/2.5.0_@parcel+core@2.5.0:
    resolution: {integrity: sha512-zCGJcrCpICFe0Q/dgjQZfW7sYFkbJEC7NGT4zEJnMo8Cm/kq8Qh6+2ApX6c+vv5Q0WZn5Ic+N0OvxIMkvgdC/w==}
    engines: {node: '>= 12.0.0', parcel: ^2.5.0}
@ -5712,7 +5729,6 @@ packages:
      stylelint-config-xo-scss: 0.14.0_stylelint@13.13.1
    transitivePeerDependencies:
      - eslint
-      - eslint-import-resolver-webpack
      - prettier
      - supports-color
      - typescript
@ -5736,7 +5752,7 @@ packages:
      eslint-import-resolver-typescript: 2.5.0_rnagsyfcubvpoxo2ynj23pim7u
      eslint-plugin-consistent-default-export-name: 0.0.7
      eslint-plugin-eslint-comments: 3.2.0_eslint@8.10.0
-      eslint-plugin-import: 2.25.4_sidoke6kqbkbdht6nlmwbfnany
+      eslint-plugin-import: 2.25.4_eslint@8.10.0
      eslint-plugin-no-use-extend-native: 0.5.0
      eslint-plugin-node: 11.1.0_eslint@8.10.0
      eslint-plugin-prettier: 3.4.1_6pitu4b2tqihty6rv5qeiyb35m
@ -5747,7 +5763,6 @@ packages:
      prettier: 2.5.1
      typescript: 4.6.2
    transitivePeerDependencies:
-      - eslint-import-resolver-webpack
      - supports-color
    dev: true

@ -5769,7 +5784,7 @@ packages:
      eslint-import-resolver-typescript: 2.5.0_rnagsyfcubvpoxo2ynj23pim7u
      eslint-plugin-consistent-default-export-name: 0.0.7
      eslint-plugin-eslint-comments: 3.2.0_eslint@8.10.0
-      eslint-plugin-import: 2.25.4_sidoke6kqbkbdht6nlmwbfnany
+      eslint-plugin-import: 2.25.4_eslint@8.10.0
      eslint-plugin-no-use-extend-native: 0.5.0
      eslint-plugin-node: 11.1.0_eslint@8.10.0
      eslint-plugin-prettier: 3.4.1_6pitu4b2tqihty6rv5qeiyb35m
@ -5780,7 +5795,6 @@ packages:
      prettier: 2.5.1
      typescript: 4.6.2
    transitivePeerDependencies:
-      - eslint-import-resolver-webpack
      - supports-color
    dev: true

@ -5919,7 +5933,7 @@ packages:
    dependencies:
      '@babel/core': 7.16.0
      postcss: 7.0.39
-      postcss-syntax: 0.36.2_kei4jy7wdgbhc236h4oijypxom
+      postcss-syntax: 0.36.2_postcss@7.0.39
    transitivePeerDependencies:
      - supports-color
    dev: true
@ -5932,7 +5946,7 @@ packages:
      postcss-syntax: '>=0.36.2'
    dependencies:
      postcss: 7.0.39
-      postcss-syntax: 0.36.2_kei4jy7wdgbhc236h4oijypxom
+      postcss-syntax: 0.36.2_postcss@7.0.39
      remark: 13.0.0
      unist-util-find-all-after: 3.0.2
    transitivePeerDependencies:
@ -9012,22 +9026,12 @@ packages:

  /debug/2.6.9:
    resolution: {integrity: sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==}
-    peerDependencies:
-      supports-color: '*'
-    peerDependenciesMeta:
-      supports-color:
-        optional: true
    dependencies:
      ms: 2.0.0
    dev: true

  /debug/3.2.7:
    resolution: {integrity: sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==}
-    peerDependencies:
-      supports-color: '*'
-    peerDependenciesMeta:
-      supports-color:
-        optional: true
    dependencies:
      ms: 2.1.3

@ -9724,8 +9728,6 @@ packages:
    dependencies:
      debug: 3.2.7
      resolve: 1.22.0
-    transitivePeerDependencies:
-      - supports-color
    dev: true

  /eslint-import-resolver-typescript/2.5.0_rnagsyfcubvpoxo2ynj23pim7u:
@ -9737,7 +9739,7 @@ packages:
    dependencies:
      debug: 4.3.3
      eslint: 8.10.0
-      eslint-plugin-import: 2.25.4_sidoke6kqbkbdht6nlmwbfnany
+      eslint-plugin-import: 2.25.4_eslint@8.10.0
      glob: 7.2.0
      is-glob: 4.0.3
      resolve: 1.22.0
@ -9754,33 +9756,6 @@ packages:
      find-up: 2.1.0
    dev: true

-  /eslint-module-utils/2.7.3_l62aq42yiamaj3cnpuf6avthf4:
-    resolution: {integrity: sha512-088JEC7O3lDZM9xGe0RerkOMd0EjFl+Yvd1jPWIkMT5u3H9+HC34mWWPnqPrN13gieT9pBOO+Qt07Nb/6TresQ==}
-    engines: {node: '>=4'}
-    peerDependencies:
-      '@typescript-eslint/parser': '*'
-      eslint-import-resolver-node: '*'
-      eslint-import-resolver-typescript: '*'
-      eslint-import-resolver-webpack: '*'
-    peerDependenciesMeta:
-      '@typescript-eslint/parser':
-        optional: true
-      eslint-import-resolver-node:
-        optional: true
-      eslint-import-resolver-typescript:
-        optional: true
-      eslint-import-resolver-webpack:
-        optional: true
-    dependencies:
-      '@typescript-eslint/parser': 5.14.0_pzezdwkd5bvjkx2hshexc25sxq
-      debug: 3.2.7
-      eslint-import-resolver-node: 0.3.6
-      eslint-import-resolver-typescript: 2.5.0_rnagsyfcubvpoxo2ynj23pim7u
-      find-up: 2.1.0
-    transitivePeerDependencies:
-      - supports-color
-    dev: true
-
  /eslint-plugin-consistent-default-export-name/0.0.7:
    resolution: {integrity: sha512-5gQqnXniMBCzB4TTai/XX28CLgfSk2/bb9GYD5DiuIKlEUSklLdB068nq9zwG3808pjPFlYTm0dLyRk/qDolaQ==}
    engines: {node: '>=0.10.0'}
@ -9835,37 +9810,6 @@ packages:
      tsconfig-paths: 3.13.0
    dev: true

-  /eslint-plugin-import/2.25.4_sidoke6kqbkbdht6nlmwbfnany:
-    resolution: {integrity: sha512-/KJBASVFxpu0xg1kIBn9AUa8hQVnszpwgE7Ld0lKAlx7Ie87yzEzCgSkekt+le/YVhiaosO4Y14GDAOc41nfxA==}
-    engines: {node: '>=4'}
-    peerDependencies:
-      '@typescript-eslint/parser': '*'
-      eslint: ^2 || ^3 || ^4 || ^5 || ^6 || ^7.2.0 || ^8
-    peerDependenciesMeta:
-      '@typescript-eslint/parser':
-        optional: true
-    dependencies:
-      '@typescript-eslint/parser': 5.14.0_pzezdwkd5bvjkx2hshexc25sxq
-      array-includes: 3.1.4
-      array.prototype.flat: 1.2.5
-      debug: 2.6.9
-      doctrine: 2.1.0
-      eslint: 8.10.0
-      eslint-import-resolver-node: 0.3.6
-      eslint-module-utils: 2.7.3_l62aq42yiamaj3cnpuf6avthf4
-      has: 1.0.3
-      is-core-module: 2.8.1
-      is-glob: 4.0.3
-      minimatch: 3.1.2
-      object.values: 1.1.5
-      resolve: 1.22.0
-      tsconfig-paths: 3.13.0
-    transitivePeerDependencies:
-      - eslint-import-resolver-typescript
-      - eslint-import-resolver-webpack
-      - supports-color
-    dev: true
-
  /eslint-plugin-no-use-extend-native/0.5.0:
    resolution: {integrity: sha512-dBNjs8hor8rJgeXLH4HTut5eD3RGWf9JUsadIfuL7UosVQ/dnvOKwxEcRrXrFxrMZ8llUVWT+hOimxJABsAUzQ==}
    engines: {node: '>=6.0.0'}
@ -12728,6 +12672,15 @@ packages:
    resolution: {integrity: sha512-lspHaCRx/mBbnm3h4uMMS3R5aZzMwyNpNIJLXj4cEsV0mIUtS4IjYJLSoyjRCtnxb6RIGJ4NL2quZzfIeNhbkg==}
    dev: false

+  /jest-transformer-svg/1.0.2_jest@27.5.1:
+    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
+    dev: true
+
  /jest-util/27.5.1:
    resolution: {integrity: sha512-Kv2o/8jNvX1MQ0KGtw480E/w4fBCDOnH6+6DmeKi6LZUIlKA5kwY0YNdlzaWTiVgxqAqik11QyxDOKk543aKXw==}
    engines: {node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0}
@ -15696,7 +15649,7 @@ packages:
    dependencies:
      htmlparser2: 3.10.1
      postcss: 7.0.39
-      postcss-syntax: 0.36.2_kei4jy7wdgbhc236h4oijypxom
+      postcss-syntax: 0.36.2_postcss@7.0.39
    dev: true

  /postcss-less/3.1.4:
@ -16096,31 +16049,12 @@ packages:
      svgo: 2.8.0
    dev: true

-  /postcss-syntax/0.36.2_kei4jy7wdgbhc236h4oijypxom:
+  /postcss-syntax/0.36.2_postcss@7.0.39:
    resolution: {integrity: sha512-nBRg/i7E3SOHWxF3PpF5WnJM/jQ1YpY9000OaVXlAQj6Zp/kIqJxEDWIZ67tAd7NLuk7zqN4yqe9nc0oNAOs1w==}
    peerDependencies:
      postcss: '>=5.0.0'
-      postcss-html: '*'
-      postcss-jsx: '*'
-      postcss-less: '*'
-      postcss-markdown: '*'
-      postcss-scss: '*'
-    peerDependenciesMeta:
-      postcss-html:
-        optional: true
-      postcss-jsx:
-        optional: true
-      postcss-less:
-        optional: true
-      postcss-markdown:
-        optional: true
-      postcss-scss:
-        optional: true
    dependencies:
      postcss: 7.0.39
-      postcss-html: 0.36.0_j55xdkkcxc32kvnyvx3y7casfm
-      postcss-less: 3.1.4
-      postcss-scss: 2.1.1
    dev: true

  /postcss-unique-selectors/5.1.1_postcss@8.4.12:
@ -16623,7 +16557,7 @@ packages:
      react: 17.0.2
      react-dom: 17.0.2_react@17.0.2
      ua-parser-js: 1.0.2
-    dev: false
+    dev: true

  /react-dnd-html5-backend/16.0.0:
    resolution: {integrity: sha512-be3lKEbbT8FQcoTjFlQ4ZXG/NVrFNJu9W0INc5rm/5EFQpHCkz+xpbB2U8j9uh5Bvk7AsJyQrZznEut0hrNPIA==}
@ -18606,7 +18540,7 @@ packages:
      postcss-sass: 0.4.4
      postcss-scss: 2.1.1
      postcss-selector-parser: 6.0.9
-      postcss-syntax: 0.36.2_kei4jy7wdgbhc236h4oijypxom
+      postcss-syntax: 0.36.2_postcss@7.0.39
      postcss-value-parser: 4.2.0
      resolve-from: 5.0.0
      slash: 3.0.0
@ -18620,8 +18554,6 @@ packages:
      v8-compile-cache: 2.3.0
      write-file-atomic: 3.0.3
    transitivePeerDependencies:
-      - postcss-jsx
-      - postcss-markdown
      - supports-color
    dev: true

@ -19370,7 +19302,7 @@ packages:

  /ua-parser-js/1.0.2:
    resolution: {integrity: sha512-00y/AXhx0/SsnI51fTc0rLRmafiGOM4/O+ny10Ps7f+j/b8p/ZY11ytMgznXkOVo4GQ+KwQG5UQLkLGirsACRg==}
-    dev: false
+    dev: true

  /uglify-js/3.15.3:
    resolution: {integrity: sha512-6iCVm2omGJbsu3JWac+p6kUiOpg3wFO2f8lIXjfEb8RrmLjzog1wTPMmwKB7swfzzqxj9YM+sGUM++u1qN4qJg==}
@ -19696,7 +19628,7 @@ packages:
      react: '>=16'
    dependencies:
      react: 17.0.2
-    dev: false
+    dev: true

  /use-isomorphic-layout-effect/1.1.2_z7w6vgz62d5pbxpnoxayoqdmly:
    resolution: {integrity: sha512-49L8yCO3iGT/ZF9QttjwLF/ZD9Iwto5LnH5LmEdk/6cFmXddqi2ulF0edxTwjj+7mqvpVVGQWvbXZdn32wRSHA==}