Upgrade to yarn 4

Add new chain icons

Author: jmrossy

.vscode/settings.json

@@ -16,14 +16,14 @@
   "[typescript]": {
     "editor.formatOnSave": true,
     "editor.codeActionsOnSave": {
-      "source.organizeImports": true
+      "source.organizeImports": "explicit"
     },
     "editor.defaultFormatter": "esbenp.prettier-vscode"
   },
   "[typescriptreact]": {
     "editor.formatOnSave": true,
     "editor.codeActionsOnSave": {
-      "source.organizeImports": true
+      "source.organizeImports": "explicit"
     },
     "editor.defaultFormatter": "esbenp.prettier-vscode"
   },

.yarn/plugins/@yarnpkg/plugin-version.cjs

@@ -1,7 +1,9 @@
-nodeLinker: node-modules
+compressionLevel: mixed
+
+enableGlobalCache: false
 
-plugins:
-  - path: .yarn/plugins/@yarnpkg/plugin-version.cjs
-    spec: "@yarnpkg/plugin-version"
+enableScripts: false
+
+nodeLinker: node-modules
 
-yarnPath: .yarn/releases/yarn-3.2.0.cjs
+yarnPath: .yarn/releases/yarn-4.0.2.cjs

.yarn/releases/yarn-3.2.0.cjs

@@ -1,7 +1,7 @@
 {
   "name": "@hyperlane-xyz/widgets",
   "description": "Common react components for Hyperlane projects",
-  "version": "3.1.4",
+  "version": "3.7.0",
   "author": "J M Rossy",
   "peerDependencies": {
     "@hyperlane-xyz/sdk": "^3.1",
@@ -10,7 +10,7 @@
   },
   "devDependencies": {
     "@babel/core": "^7.20.12",
-    "@hyperlane-xyz/sdk": "3.1.4",
+    "@hyperlane-xyz/sdk": "3.7.0",
     "@mdx-js/react": "^1.6.22",
     "@storybook/addon-actions": "^6.5.15",
     "@storybook/addon-docs": "^6.5.15",
@@ -69,7 +69,7 @@
     "Typescript"
   ],
   "license": "Apache-2.0",
-  "packageManager": "yarn@3.2.0",
+  "packageManager": "yarn@4.0.2",
   "repository": {
     "type": "git",
     "url": "https://github.com/hyperlane-xyz/hyperlane-widgets"

.yarn/releases/yarn-4.0.2.cjs

@@ -9,29 +9,37 @@ import BscBlack from '../logos/black/Bsc';
 import CeloBlack from '../logos/black/Celo';
 import EthereumBlack from '../logos/black/Ethereum';
 import GnosisBlack from '../logos/black/Gnosis';
+import InevmBlack from '../logos/black/Inevm';
+import InjectiveBlack from '../logos/black/Injective';
 import MantaBlack from '../logos/black/Manta';
 import MoonbeamBlack from '../logos/black/Moonbeam';
+import NautilusBlack from '../logos/black/Nautilus';
 import NeutronBlack from '../logos/black/Neutron';
 import OptimismBlack from '../logos/black/Optimism';
 import PolygonBlack from '../logos/black/Polygon';
 import PolygonzkevmBlack from '../logos/black/Polygonzkevm';
 import ScrollBlack from '../logos/black/Scroll';
 import SolanaBlack from '../logos/black/Solana';
+import VictionBlack from '../logos/black/Viction';
 import ArbitrumColor from '../logos/color/Arbitrum';
 import AvalancheColor from '../logos/color/Avalanche';
 import BaseColor from '../logos/color/Base';
 import BscColor from '../logos/color/Bsc';
 import CeloColor from '../logos/color/Celo';
 import EthereumColor from '../logos/color/Ethereum';
 import GnosisColor from '../logos/color/Gnosis';
+import InevmColor from '../logos/color/Inevm';
+import InjectiveColor from '../logos/color/Injective';
 import MantaColor from '../logos/color/Manta';
 import MoonbeamColor from '../logos/color/Moonbeam';
+import NautilusColor from '../logos/color/Nautilus';
 import NeutronColor from '../logos/color/Neutron';
 import OptimismColor from '../logos/color/Optimism';
 import PolygonColor from '../logos/color/Polygon';
 import PolygonzkevmColor from '../logos/color/Polygonzkevm';
 import ScrollColor from '../logos/color/Scroll';
 import SolanaColor from '../logos/color/Solana';
+import VictionColor from '../logos/color/Viction';
 
 import { Circle } from './Circle';
 import { QuestionMarkIcon } from './QuestionMark';
@@ -40,7 +48,7 @@ type SvgIcon = (props: { width: number; height: number; title?: string }) => Rea
 
 // Keep up to date as new chains are added or
 // icon will fallback to default (question mark)
-const CHAIN_TO_LOGO: Record<number, { black: SvgIcon; color: SvgIcon }> = {
+const CHAIN_TO_LOGO: Record<string | number, { black: SvgIcon; color: SvgIcon }> = {
   [chainMetadata.alfajores.chainId]: { black: CeloBlack, color: CeloColor },
   [chainMetadata.arbitrum.chainId]: { black: ArbitrumBlack, color: ArbitrumColor },
   [chainMetadata.arbitrumgoerli.chainId]: { black: ArbitrumBlack, color: ArbitrumColor },
@@ -55,10 +63,13 @@ const CHAIN_TO_LOGO: Record<number, { black: SvgIcon; color: SvgIcon }> = {
   [chainMetadata.fuji.chainId]: { black: AvalancheBlack, color: AvalancheColor },
   [chainMetadata.gnosis.chainId]: { black: GnosisBlack, color: GnosisColor },
   [chainMetadata.goerli.chainId]: { black: EthereumBlack, color: EthereumColor },
+  [chainMetadata.inevm.chainId]: { black: InevmBlack, color: InevmColor },
+  [chainMetadata.injective.chainId]: { black: InjectiveBlack, color: InjectiveColor },
   [chainMetadata.mantapacific.chainId]: { black: MantaBlack, color: MantaColor },
   [chainMetadata.moonbasealpha.chainId]: { black: MoonbeamBlack, color: MoonbeamColor },
   [chainMetadata.moonbeam.chainId]: { black: MoonbeamBlack, color: MoonbeamColor },
   [chainMetadata.mumbai.chainId]: { black: PolygonBlack, color: PolygonColor },
+  [chainMetadata.nautilus.chainId]: { black: NautilusBlack, color: NautilusColor },
   [chainMetadata.neutron.chainId]: { black: NeutronBlack, color: NeutronColor },
   [chainMetadata.optimism.chainId]: { black: OptimismBlack, color: OptimismColor },
   [chainMetadata.optimismgoerli.chainId]: { black: OptimismBlack, color: OptimismColor },
@@ -73,6 +84,7 @@ const CHAIN_TO_LOGO: Record<number, { black: SvgIcon; color: SvgIcon }> = {
   [chainMetadata.sepolia.chainId]: { black: EthereumBlack, color: EthereumColor },
   [chainMetadata.solana.chainId]: { black: SolanaBlack, color: SolanaColor },
   [chainMetadata.solanadevnet.chainId]: { black: SolanaBlack, color: SolanaColor },
+  [chainMetadata.viction.chainId]: { black: VictionBlack, color: VictionColor },
 };
 
 export interface ChainLogoProps {

.yarnrc.yml

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import { SVGProps } from 'react';
+
+const SvgInevm = (props: SVGProps<SVGSVGElement>) => (
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="184.82 186.46 121.25 133.56" {...props}>
+    <path d="m198.76 224 2.27-2.62.14-.1.28-.21.07-.1c.51-.5 1.07-1 1.72-1.46a23.23 23.23 0 0 1 31.2 1.63c9.8 9.18 8.94 23.98 1.1 33.82-9.86 14.67-26.91 35.13-3.34 53.5 4.24 3.27 7.35 6 20.7 9.86-8.72 1.6-16.8 1.1-25.8-1.2-6.36-3.6-16.37-11.29-19.78-21.68-5.18-15.77 9.07-39.3 15.9-48.39 9.46-12.56-5.83-26.12-17.04-10.97-5.87 7.94-16.16 30.3-12.57 46.9 2.07 9.42 4.83 16.26 15.88 25.68a50.8 50.8 0 0 1-5.94-4.1 58.19 58.19 0 0 1-4.8-80.56Z" />
+    <path d="m286 299.38-2.24 2.62-.14.07-.24.24-.07.07a25.91 25.91 0 0 1-8.94 5.42 23.22 23.22 0 0 1-24.02-5.53c-9.8-9.21-8.94-24.02-1.1-33.85 9.9-14.67 26.92-35.14 3.35-53.5-4.25-3.28-7.39-6-20.71-9.87 8.73-1.59 16.8-1.1 25.81 1.21 6.36 3.59 16.36 11.29 19.78 21.67 5.18 15.74-9.08 39.31-15.91 48.4-9.46 12.52 5.8 26.12 17.05 10.93 5.87-7.9 16.12-30.27 12.56-46.87-2.07-9.42-4.83-16.29-15.87-25.7 2.03 1.2 4 2.58 5.93 4.13a58.19 58.19 0 0 1 4.76 80.56Z" />
+    <path fill="#343434" d="m282.57 186.74-.45 1.55v44.92l.45.46 20.86-12.33z" />
+    <path fill="#8C8C8C" d="m282.57 186.74-20.85 34.6 20.85 12.33v-21.8z" />
+    <path fill="#3C3C3B" d="m282.57 237.62-.26.31v16l.26.76 20.87-29.4z" />
+    <path fill="#8C8C8C" d="M282.57 254.69v-17.07l-20.85-12.32z" />
+    <path fill="#141414" d="m282.57 233.67 20.86-12.33-20.86-9.48z" />
+    <path fill="#393939" d="m261.72 221.34 20.85 12.33v-21.8z" />
+  </svg>
+);
+export default SvgInevm;

package.json

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { SVGProps } from 'react';
+
+const SvgInjective = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    aria-hidden="true"
+    className="injective_svg__w-32"
+    data-icon="logo"
+    data-prefix="fab"
+    viewBox="0 0 33.36 33.36"
+    {...props}
+  >
+    <path d="M4.04 5.76 4.7 5l.04-.03.08-.06.02-.03c.15-.14.31-.29.5-.42a6.73 6.73 0 0 1 9.04.47c2.84 2.66 2.59 6.95.32 9.8-2.86 4.25-7.8 10.18-.97 15.5 1.23.95 2.13 1.74 6 2.86-2.53.46-4.87.32-7.48-.35-1.84-1.04-4.74-3.27-5.73-6.28-1.5-4.57 2.63-11.39 4.61-14.02 2.74-3.64-1.69-7.57-4.94-3.18-1.7 2.3-4.68 8.78-3.64 13.59.6 2.73 1.4 4.71 4.6 7.44a14.7 14.7 0 0 1-1.72-1.19A16.86 16.86 0 0 1 4.04 5.76Z" />
+    <path d="m29.32 27.6-.65.76-.04.02-.07.07-.02.02a7.52 7.52 0 0 1-2.59 1.57 6.73 6.73 0 0 1-6.96-1.6c-2.84-2.67-2.59-6.96-.32-9.81 2.87-4.25 7.8-10.18.97-15.5-1.23-.95-2.14-1.74-6-2.86 2.53-.46 4.87-.32 7.48.35 1.84 1.04 4.74 3.27 5.73 6.28 1.5 4.56-2.63 11.39-4.61 14.02-2.74 3.63 1.68 7.57 4.94 3.17 1.7-2.29 4.67-8.77 3.64-13.58-.6-2.73-1.4-4.72-4.6-7.45.59.35 1.16.75 1.72 1.2a16.86 16.86 0 0 1 1.38 23.34Z" />
+  </svg>
+);
+export default SvgInjective;

src/icons/ChainLogo.tsx

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import { SVGProps } from 'react';
+
+const SvgNautilus = (props: SVGProps<SVGSVGElement>) => (
+  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 40 40" {...props}>
+    <path
+      fill="#000"
+      d="M40 13.33A26.67 26.67 0 0 1 13.33 40V26.67a13.33 13.33 0 0 0 13.34-13.34H40ZM13.33 13.33H0v13.33h13.33zM26.67 0H13.34v13.33h13.33z"
+    />
+  </svg>
+);
+export default SvgNautilus;

src/logos/black/Inevm.tsx

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import { SVGProps } from 'react';
+
+const SvgViction = (props: SVGProps<SVGSVGElement>) => (
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="81.1 83.2 397.7 401.7" {...props}>
+    <defs>
+      <style>{'.viction_svg__cls-1{fill:#231f20}'}</style>
+    </defs>
+    <path
+      d="M478.8 83.2v157.5C417.9 267.3 350.6 282 279.9 282s-138-14.7-198.8-41.3V83.2c60.9 26.6 128.1 41.3 198.8 41.3s138-14.7 198.9-41.3ZM478.8 484.9V327.4C417.9 300.8 350.6 286 279.9 286s-138 14.8-198.8 41.4v157.5c60.9-26.6 128.1-41.4 198.8-41.4s138 14.8 198.9 41.4Z"
+      className="viction_svg__cls-1"
+    />
+  </svg>
+);
+export default SvgViction;

src/logos/black/Injective.tsx

@@ -9,12 +9,16 @@ export { default as Eclipse } from './Eclipse';
 export { default as Ethereum } from './Ethereum';
 export { default as Gnosis } from './Gnosis';
 export { default as Hyperlane } from './Hyperlane';
+export { default as Inevm } from './Inevm';
+export { default as Injective } from './Injective';
 export { default as Manta } from './Manta';
 export { default as Moonbeam } from './Moonbeam';
+export { default as Nautilus } from './Nautilus';
 export { default as Near } from './Near';
 export { default as Neutron } from './Neutron';
 export { default as Optimism } from './Optimism';
 export { default as Polygon } from './Polygon';
 export { default as Polygonzkevm } from './Polygonzkevm';
 export { default as Scroll } from './Scroll';
 export { default as Solana } from './Solana';
+export { default as Viction } from './Viction';

src/logos/black/Nautilus.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { SVGProps } from 'react';
 
 const SvgCosmos = (props: SVGProps<SVGSVGElement>) => (
-  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2500 2500" {...props}>
+  <svg xmlns="http://www.w3.org/2000/svg" data-name="Layer 1" viewBox="0 0 2500 2500" {...props}>
     <circle
       cx={1250}
       cy={1250}
@@ -14,25 +14,25 @@ const SvgCosmos = (props: SVGProps<SVGSVGElement>) => (
     <circle
       cx={1250}
       cy={1250}
-      r={725.3}
+      r={725.31}
       style={{
         fill: '#1b1e36',
       }}
     />
     <path
-      d="M1252.6 159.5c-135 0-244.4 489.4-244.4 1093s109.4 1093.2 244.4 1093.2 244.3-489.4 244.3-1093.1-109.4-1093.1-244.3-1093.1Zm16.8 2124.5c-15.4 20.6-30.8 5.1-30.8 5.1-62.2-72-93.2-205.7-93.2-205.7-108.7-349.8-82.8-1100.8-82.8-1100.8 51-596.3 144-737.1 175.6-768.4a19.3 19.3 0 0 1 24.7-2c45.9 32.5 84.4 168.5 84.4 168.5 113.6 421.8 103.3 817.9 103.3 817.9 10.3 344.6-57 730.4-57 730.4-51.7 293.2-124.2 355-124.2 355Z"
+      d="M1252.57 159.47c-134.93 0-244.34 489.4-244.34 1093.11s109.41 1093.11 244.34 1093.11 244.34-489.4 244.34-1093.11S1387.5 159.47 1252.57 159.47ZM1269.44 2284c-15.43 20.58-30.86 5.14-30.86 5.14-62.14-72-93.21-205.76-93.21-205.76-108.69-349.79-82.82-1100.82-82.82-1100.82 51.08-596.24 144-737.09 175.62-768.36a19.29 19.29 0 0 1 24.74-2c45.88 32.51 84.36 168.47 84.36 168.47 113.63 421.81 103.34 817.9 103.34 817.9 10.29 344.65-56.94 730.45-56.94 730.45-51.75 293.2-124.23 354.98-124.23 354.98Z"
       style={{
         fill: '#6f7390',
       }}
     />
     <path
-      d="M2200.7 708.6c-67.2-117-546 31.6-1070 332s-893.5 638.9-826.3 756 546-31.7 1070-332 893.4-639 826.3-756ZM366.4 1780.5c-25.8-3.3-20-24.4-20-24.4 31.6-89.7 132-183.3 132-183.3 249.4-268.3 913.8-619.6 913.8-619.6 542.5-252.4 711-241.8 753.8-230a19.3 19.3 0 0 1 14 20.6c-5.1 56-104.2 157-104.2 157-309 308.6-657.8 496.8-657.8 496.8-293.8 180.5-662 314-662 314-280 101-369.6 68.8-369.6 68.8Z"
+      d="M2200.72 708.59c-67.18-117.08-546.09 31.58-1070 332s-893.47 638.89-826.34 755.92 546.09-31.58 1070-332 893.47-638.89 826.34-755.92ZM366.36 1780.45c-25.72-3.24-19.91-24.38-19.91-24.38 31.55-89.71 131.95-183.23 131.95-183.23 249.43-268.36 913.79-619.65 913.79-619.65 542.54-252.42 711.06-241.77 753.81-230a19.29 19.29 0 0 1 14 20.58c-5.14 56-104.17 157-104.17 157-309.12 308.59-657.83 496.81-657.83 496.81-293.83 180.5-661.93 314.09-661.93 314.09-280.09 100.93-369.7 68.78-369.7 68.78Z"
       style={{
         fill: '#6f7390',
       }}
     />
     <path
-      d="M2198.3 1800.4c67.7-116.8-300.9-456.8-823-759.5S374.4 587.8 306.8 704.7s301 456.8 823.3 759.5 1000.6 453.2 1068.3 336.2ZM351.6 750c-10-23.8 11.2-29.5 11.2-29.5 93.4-17.6 224.7 22.6 224.7 22.6 357.1 81.3 994 480.3 994 480.3 490.3 343 565.5 494.2 576.8 537a19.3 19.3 0 0 1-10.7 22.5c-51.1 23.4-188-11.5-188-11.5-422.1-113.1-759.7-320.5-759.7-320.5-303.3-163.6-603.2-415.3-603.2-415.3-227.9-191.8-245-285.4-245-285.4Z"
+      d="M2198.35 1800.41c67.7-116.77-300.93-456.79-823-759.47S374.43 587.76 306.79 704.73s300.93 456.79 823.3 759.47 1000.62 453.19 1068.26 336.21ZM351.65 749.85c-10-23.71 11.11-29.42 11.11-29.42C456.22 702.78 587.5 743 587.5 743c357.15 81.33 994 480.25 994 480.25 490.33 343.11 565.53 494.24 576.8 537.14a19.29 19.29 0 0 1-10.7 22.43c-51.13 23.41-188.07-11.47-188.07-11.47-422.07-113.17-759.62-320.52-759.62-320.52-303.29-163.58-603.19-415.28-603.19-415.28-227.88-191.87-245-285.44-245-285.44Z"
       style={{
         fill: '#6f7390',
       }}
@@ -46,28 +46,28 @@ const SvgCosmos = (props: SVGProps<SVGSVGElement>) => (
       }}
     />
     <ellipse
-      cx={1777.3}
-      cy={756.2}
-      rx={74.6}
-      ry={77.2}
+      cx={1777.26}
+      cy={756.17}
+      rx={74.59}
+      ry={77.16}
       style={{
         fill: '#b7b9c8',
       }}
     />
     <ellipse
-      cx={553}
-      cy={1018.5}
-      rx={74.6}
-      ry={77.2}
+      cx={552.98}
+      cy={1018.52}
+      rx={74.59}
+      ry={77.16}
       style={{
         fill: '#b7b9c8',
       }}
     />
     <ellipse
-      cx={1098.3}
-      cy={1965}
-      rx={74.6}
-      ry={77.2}
+      cx={1098.25}
+      cy={1965.02}
+      rx={74.59}
+      ry={77.16}
       style={{
         fill: '#b7b9c8',
       }}

src/logos/black/Viction.tsx

@@ -0,0 +1,48 @@
+import * as React from 'react';
+import { SVGProps } from 'react';
+
+const SvgInevm = (props: SVGProps<SVGSVGElement>) => (
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="184.82 186.46 121.25 133.56" {...props}>
+    <defs>
+      <linearGradient
+        id="inevm_svg__a"
+        x1={0}
+        x2={33.36}
+        y1={18.15}
+        y2={18.15}
+        gradientTransform="matrix(3.45 0 0 3.45 184.81 204.12)"
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop stopColor="#0082FA" />
+        <stop offset={1} stopColor="#00F2FE" />
+      </linearGradient>
+      <linearGradient
+        id="inevm_svg__b"
+        x1={0}
+        x2={33.36}
+        y1={15.21}
+        y2={15.21}
+        gradientTransform="matrix(3.45 0 0 3.45 184.81 204.12)"
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop stopColor="#0082FA" />
+        <stop offset={1} stopColor="#00F2FE" />
+      </linearGradient>
+    </defs>
+    <path
+      fill="url(#inevm_svg__a)"
+      d="m198.76 224 2.27-2.62.14-.1.28-.21.07-.1c.51-.5 1.07-1 1.72-1.46a23.23 23.23 0 0 1 31.2 1.63c9.8 9.18 8.94 23.98 1.1 33.82-9.86 14.67-26.91 35.13-3.34 53.5 4.24 3.27 7.35 6 20.7 9.86-8.72 1.6-16.8 1.1-25.8-1.2-6.36-3.6-16.37-11.29-19.78-21.68-5.18-15.77 9.07-39.3 15.9-48.39 9.46-12.56-5.83-26.12-17.04-10.97-5.87 7.94-16.16 30.3-12.57 46.9 2.07 9.42 4.83 16.26 15.88 25.68a50.8 50.8 0 0 1-5.94-4.1 58.19 58.19 0 0 1-4.8-80.56Z"
+    />
+    <path
+      fill="url(#inevm_svg__b)"
+      d="m286 299.38-2.24 2.62-.14.07-.24.24-.07.07a25.91 25.91 0 0 1-8.94 5.42 23.22 23.22 0 0 1-24.02-5.53c-9.8-9.21-8.94-24.02-1.1-33.85 9.9-14.67 26.92-35.14 3.35-53.5-4.25-3.28-7.39-6-20.71-9.87 8.73-1.59 16.8-1.1 25.81 1.21 6.36 3.59 16.36 11.29 19.78 21.67 5.18 15.74-9.08 39.31-15.91 48.4-9.46 12.52 5.8 26.12 17.05 10.93 5.87-7.9 16.12-30.27 12.56-46.87-2.07-9.42-4.83-16.29-15.87-25.7 2.03 1.2 4 2.58 5.93 4.13a58.19 58.19 0 0 1 4.76 80.56Z"
+    />
+    <path fill="#343434" d="m282.57 186.74-.45 1.55v44.92l.45.46 20.86-12.33z" />
+    <path fill="#8C8C8C" d="m282.57 186.74-20.85 34.6 20.85 12.33v-21.8z" />
+    <path fill="#3C3C3B" d="m282.57 237.62-.26.31v16l.26.76 20.87-29.4z" />
+    <path fill="#8C8C8C" d="M282.57 254.69v-17.07l-20.85-12.32z" />
+    <path fill="#141414" d="m282.57 233.67 20.86-12.33-20.86-9.48z" />
+    <path fill="#393939" d="m261.72 221.34 20.85 12.33v-21.8z" />
+  </svg>
+);
+export default SvgInevm;

src/logos/black/index.ts

@@ -0,0 +1,48 @@
+import * as React from 'react';
+import { SVGProps } from 'react';
+
+const SvgInjective = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    aria-hidden="true"
+    className="injective_svg__w-32"
+    data-icon="logo"
+    data-prefix="fab"
+    viewBox="0 0 33.36 33.36"
+    {...props}
+  >
+    <path
+      fill="url(#injective_svg__a)"
+      d="M4.04 5.76 4.7 5l.04-.03.08-.06.02-.03c.15-.14.31-.29.5-.42a6.73 6.73 0 0 1 9.04.47c2.84 2.66 2.59 6.95.32 9.8-2.86 4.25-7.8 10.18-.97 15.5 1.23.95 2.13 1.74 6 2.86-2.53.46-4.87.32-7.48-.35-1.84-1.04-4.74-3.27-5.73-6.28-1.5-4.57 2.63-11.39 4.61-14.02 2.74-3.64-1.69-7.57-4.94-3.18-1.7 2.3-4.68 8.78-3.64 13.59.6 2.73 1.4 4.71 4.6 7.44a14.7 14.7 0 0 1-1.72-1.19A16.86 16.86 0 0 1 4.04 5.76Z"
+    />
+    <path
+      fill="url(#injective_svg__b)"
+      d="m29.32 27.6-.65.76-.04.02-.07.07-.02.02a7.52 7.52 0 0 1-2.59 1.57 6.73 6.73 0 0 1-6.96-1.6c-2.84-2.67-2.59-6.96-.32-9.81 2.87-4.25 7.8-10.18.97-15.5-1.23-.95-2.14-1.74-6-2.86 2.53-.46 4.87-.32 7.48.35 1.84 1.04 4.74 3.27 5.73 6.28 1.5 4.56-2.63 11.39-4.61 14.02-2.74 3.63 1.68 7.57 4.94 3.17 1.7-2.29 4.67-8.77 3.64-13.58-.6-2.73-1.4-4.72-4.6-7.45.59.35 1.16.75 1.72 1.2a16.86 16.86 0 0 1 1.38 23.34Z"
+    />
+    <defs>
+      <linearGradient
+        id="injective_svg__a"
+        x1={0}
+        x2={33.36}
+        y1={18.15}
+        y2={18.15}
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop stopColor="#0082FA" />
+        <stop offset={1} stopColor="#00F2FE" />
+      </linearGradient>
+      <linearGradient
+        id="injective_svg__b"
+        x1={0}
+        x2={33.36}
+        y1={15.21}
+        y2={15.21}
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop stopColor="#0082FA" />
+        <stop offset={1} stopColor="#00F2FE" />
+      </linearGradient>
+    </defs>
+  </svg>
+);
+export default SvgInjective;