Feat: Allow to set gradient to icons

src/components/common/Icon/cmp.tsx

@@ -14,21 +14,52 @@ import { StyledCustomIconCss, StyledIcon } from './styles'
 
 import * as customIcons from './custom/index'
 import styled, { useTheme } from 'styled-components'
+import { Gradient } from '../../../themes/types'
 
 // @todo: Think about it as we are including all the icons on the final bundle
 library.add(far, fab, fass)
 
 const iconPrefixes: IconPrefix[] = ['fass', 'fab', 'far', 'custom']
 
+const GradientDefinition = ({
+  gradient,
+  id,
+}: {
+  gradient?: Gradient
+  id?: string
+}) => {
+  if (!gradient) return null
+
+  return (
+    <svg width="0" height="0" tw="absolute">
+      <defs>
+        <linearGradient id={id}>
+          {gradient.colors.map((color, index) => (
+            <stop
+              key={index}
+              offset={gradient.stops[index] + '%'}
+              stopColor={color}
+            />
+          ))}
+        </linearGradient>
+      </defs>
+    </svg>
+  )
+}
+GradientDefinition.displayName = 'GradientDefinition'
+
 export const Icon = ({
   name,
   prefix = 'fass',
   size: $iconSize = 'md',
   color,
+  gradient,
   ...rest
 }: IconProps) => {
   const theme = useTheme()
   const $color = color ? theme.color[color] || color : color
+  const $gradient = gradient ? theme.gradient[gradient] : undefined
+  const $gradientId = $gradient ? `svg-gradient-${gradient}` : undefined
 
   for (const p of [prefix, ...iconPrefixes.filter((p) => p !== prefix)]) {
     if (p === 'custom') {
@@ -40,13 +71,17 @@ export const Icon = ({
       `
 
       return (
-        <StyledCustomIcon
-          {...{
-            $iconSize,
-            $color,
-            ...rest,
-          }}
-        />
+        <>
+          <GradientDefinitionMemo gradient={$gradient} id={$gradientId} />
+          <StyledCustomIcon
+            {...{
+              $iconSize,
+              $color,
+              $gradientId: $gradientId,
+              ...rest,
+            }}
+          />
+        </>
       )
     } else {
       const iconName = name as FAIconName
@@ -58,15 +93,19 @@ export const Icon = ({
       if (!icon) continue
 
       return (
-        <StyledIcon
-          {...{
-            icon,
-            size: '1x',
-            $iconSize,
-            color: $color,
-            ...rest,
-          }}
-        />
+        <>
+          <GradientDefinitionMemo gradient={$gradient} id={$gradientId} />
+          <StyledIcon
+            {...{
+              icon,
+              size: '1x',
+              $iconSize,
+              color: $color,
+              $gradientId: $gradientId,
+              ...rest,
+            }}
+          />
+        </>
       )
     }
   }
@@ -75,4 +114,7 @@ export const Icon = ({
 }
 Icon.displayName = 'Icon'
 
+export const GradientDefinitionMemo = memo(
+  GradientDefinition,
+) as typeof GradientDefinition
 export default memo(Icon) as typeof Icon

src/components/common/Icon/custom/computeSolutions.tsx

@@ -0,0 +1,16 @@
+import React, { SVGAttributes, memo } from 'react'
+
+const ComputeSolutions = (props: SVGAttributes<SVGElement>) => {
+  return (
+    <svg viewBox="0 0 48 49" xmlns="http://www.w3.org/2000/svg" {...props}>
+      <path d="M33.66 30.3292L39.21 28.7092L39.57 28.0792L43.71 20.8092L37.18 13.2692L22.51 10.4492L8.77998 14.4592L4.28998 22.3492L10.82 29.8892L11.99 30.1092L25.5 32.6992L33.67 30.3092L33.66 30.3292ZM24.65 29.2092L16.32 27.6092C16.1 27.5692 15.9 27.4492 15.75 27.2792L11.81 22.7292C11.53 22.4092 11.49 21.9492 11.7 21.5792L14.46 16.7392C14.59 16.5092 14.8 16.3492 15.05 16.2792L22.89 13.9892C23.04 13.9492 23.2 13.9392 23.36 13.9692L31.69 15.5692C31.91 15.6092 32.11 15.7292 32.26 15.8992L36.2 20.4492C36.48 20.7692 36.52 21.2292 36.31 21.5992L33.55 26.4392C33.42 26.6692 33.21 26.8292 32.96 26.8992L25.12 29.1892C25.03 29.2192 24.93 29.2292 24.84 29.2292C24.78 29.2292 24.71 29.2292 24.65 29.2092Z" />
+      <path d="M30.96 17.4592L23.21 15.9692L15.99 18.0792L13.78 21.9492L17.04 25.7092L24.79 27.1992L32.01 25.0892L34.22 21.2192L30.96 17.4592Z" />
+      <path d="M40.89 32.1392L43.93 26.7992V24.4692L40.89 29.8192V32.1392Z" />
+      <path d="M4.07001 28.4692L9.29001 34.4992V31.1892L4.07001 25.1592V28.4692Z" />
+      <path d="M26.54 38.7792L38.89 35.1692V30.8892L26.54 34.4892V38.7792Z" />
+      <path d="M11.29 36.3493L24.54 38.8993V34.5693L11.29 32.0193V36.3493Z" />
+    </svg>
+  )
+}
+
+export default memo(ComputeSolutions) as typeof ComputeSolutions

src/components/common/Icon/custom/confidential.tsx

@@ -0,0 +1,16 @@
+import React, { SVGAttributes, memo } from 'react'
+
+const ComputeSolutions = (props: SVGAttributes<SVGElement>) => {
+  return (
+    <svg viewBox="0 0 48 49" xmlns="http://www.w3.org/2000/svg" {...props}>
+      <path d="M25 43.1492L45.33 31.3692V26.6992L25 38.4792V43.1492Z" />
+      <path d="M2.66 31.3494L23 43.1494V38.4794L2.66 26.6694V31.3494Z" />
+      <path d="M24 5.81934L3.64001 17.9193L9.58001 21.3693L24 29.7493L38.42 21.3693L44.36 17.9193L24 5.81934ZM36.08 19.3293L26.68 24.7893C26.12 25.1193 25.36 25.1193 24.8 24.7893L17.28 20.4193C16.72 20.0893 16.72 19.6593 17.28 19.3293L18.41 18.6793L15.59 17.0393C13.62 15.8893 13.62 14.0393 15.59 12.8893C17.56 11.7393 20.76 11.7393 22.73 12.8893L25.55 14.5293L26.68 13.8693C27.24 13.5393 28 13.5393 28.56 13.8693L36.08 18.2393C36.64 18.5693 36.64 18.9993 36.08 19.3293Z" />
+      <path d="M17.1 13.7592C15.97 14.4192 15.97 15.5092 17.1 16.1592L19.92 17.7992L24.05 15.3992L21.23 13.7592C20.1 13.1092 18.22 13.1092 17.1 13.7592Z" />
+      <path d="M40.39 22.5494L25 31.4894V36.1594L45.33 24.3794V19.6694L40.39 22.5494Z" />
+      <path d="M2.66 19.6694V24.3594L23 36.1594V31.4894L7.61 22.5494L2.66 19.6694Z" />
+    </svg>
+  )
+}
+
+export default memo(ComputeSolutions) as typeof ComputeSolutions

src/components/common/Icon/custom/dashboard.tsx

@@ -0,0 +1,12 @@
+import React, { SVGAttributes, memo } from 'react'
+
+const Dashboard = (props: SVGAttributes<SVGElement>) => {
+  return (
+    <svg viewBox="0 0 48 49" xmlns="http://www.w3.org/2000/svg" {...props}>
+      <path d="M25.84 9.55927C30.1 7.08927 34.22 6.22927 37.53 7.05927C37.37 6.79927 37.2 6.54927 37 6.31927C36.98 6.29927 36.97 6.28927 36.95 6.26927C34.24 3.12927 29.05 3.20927 23.4 6.48927C14.25 11.7993 6.79999 23.5393 6.79999 32.6593C6.79999 33.5893 6.87999 34.4793 7.03999 35.2893C7.25999 36.3993 7.62999 37.3893 8.13999 38.2393C8.13999 38.2393 8.14999 38.2593 8.15999 38.2693C8.19999 38.3293 8.24999 38.3893 8.28999 38.4493C8.26999 38.1293 8.23999 37.8093 8.23999 37.4693C8.23999 27.7193 16.14 15.1993 25.84 9.56927V9.55927Z" />
+      <path d="M41.88 13.7292C41.76 13.3792 41.63 13.0292 41.48 12.7092C41.14 11.9892 40.71 11.3592 40.2 10.8192C39.78 10.3792 39.31 9.98925 38.78 9.67925C37.67 9.03925 36.37 8.72925 34.92 8.72925C32.52 8.72925 29.74 9.58925 26.84 11.2692C17.68 16.5892 10.23 28.3293 10.23 37.4492C10.23 39.1592 10.51 40.6493 11.03 41.9193C11.17 42.2493 11.32 42.5692 11.49 42.8692C11.66 43.1692 11.85 43.4492 12.05 43.7192C12.56 44.3792 13.17 44.9393 13.88 45.3493C16.82 47.0392 21.17 46.4593 25.82 43.7593C34.98 38.4393 42.43 26.6992 42.43 17.5892C42.43 16.1592 42.23 14.8592 41.86 13.7292H41.88ZM33.3 14.3392C33.89 13.9992 34.51 13.9592 35.01 14.2492C35.47 14.5192 35.74 15.0092 35.74 15.5892C35.74 16.4592 35.14 17.4492 34.31 17.9292C33.99 18.1192 33.65 18.2092 33.34 18.2092C33.08 18.2092 32.83 18.1492 32.61 18.0192C32.15 17.7492 31.88 17.2592 31.88 16.6792C31.88 15.8092 32.48 14.8192 33.31 14.3392H33.3ZM18.38 23.0092C18.97 22.6692 19.59 22.6292 20.08 22.9192C20.54 23.1892 20.81 23.6792 20.81 24.2592C20.81 25.1292 20.21 26.1092 19.38 26.5992C19.06 26.7892 18.72 26.8792 18.41 26.8792C18.15 26.8792 17.9 26.8192 17.68 26.6892C17.22 26.4192 16.95 25.9292 16.95 25.3492C16.95 24.4792 17.55 23.4892 18.38 23.0092ZM13.98 33.6092C14.57 33.2692 15.19 33.2392 15.69 33.5192C16.15 33.7892 16.42 34.2792 16.42 34.8592C16.42 35.7292 15.82 36.7192 14.99 37.1992C14.67 37.3892 14.34 37.4792 14.02 37.4792C13.76 37.4792 13.51 37.4192 13.29 37.2892C12.83 37.0192 12.56 36.5292 12.56 35.9492C12.56 35.0792 13.16 34.0992 13.99 33.6192L13.98 33.6092ZM26.84 40.3192C26.05 40.7792 25.26 41.0093 24.54 41.0093C24.1 41.0093 23.7 40.9092 23.33 40.7292C23.27 40.6992 23.2 40.6893 23.14 40.6493C22.87 40.4993 22.66 40.2892 22.46 40.0592C22.25 39.8092 22.1 39.5092 21.98 39.1792C21.85 38.8092 21.76 38.4092 21.76 37.9492C21.76 35.7992 23.29 33.2092 25.33 31.7792V15.2692C25.33 14.7192 25.78 14.2692 26.33 14.2692C26.88 14.2692 27.33 14.7192 27.33 15.2692V30.8492C28.14 30.6692 28.9 30.7592 29.53 31.1192C29.94 31.3592 30.26 31.6992 30.49 32.1092C30.67 32.4392 30.79 32.8192 30.84 33.2492C30.87 33.4392 30.9 33.6192 30.9 33.8192C30.9 34.1292 30.86 34.4492 30.8 34.7692C30.41 36.8792 28.81 39.1792 26.83 40.3192H26.84ZM38.7 23.4292C38.61 23.4792 38.52 23.5092 38.43 23.5492C38.2 23.6492 37.96 23.7092 37.73 23.7092C37.57 23.7092 37.42 23.6792 37.27 23.6292C37.18 23.5992 37.08 23.5692 37 23.5192C36.77 23.3892 36.6 23.2092 36.47 22.9792C36.34 22.7492 36.27 22.4692 36.27 22.1692C36.27 21.2992 36.87 20.3192 37.7 19.8292C37.7 19.8292 37.72 19.8292 37.72 19.8192C38.11 19.5992 38.5 19.5292 38.87 19.5792C39.06 19.5992 39.24 19.6492 39.41 19.7492C39.55 19.8292 39.67 19.9392 39.78 20.0692C40.01 20.3392 40.14 20.6892 40.14 21.0992C40.14 21.9692 39.54 22.9592 38.71 23.4392L38.7 23.4292Z" />
+    </svg>
+  )
+}
+
+export default memo(Dashboard) as typeof Dashboard

src/components/common/Icon/custom/functions.tsx

@@ -0,0 +1,15 @@
+import React, { SVGAttributes, memo } from 'react'
+
+const Dashboard = (props: SVGAttributes<SVGElement>) => {
+  return (
+    <svg viewBox="0 0 48 49" xmlns="http://www.w3.org/2000/svg" {...props}>
+      <path d="M41.67 26.0193L42.35 25.2093L43.03 24.3893L44.18 23.0193L39.35 14.9693L25.2 10.9893L10.29 14.0093L3.82001 21.7693L5.24001 24.1293L5.78001 25.0393L6.33001 25.9493L8.65001 29.8193L22.8 33.7893L24.19 33.5093L37.71 30.7793L40.57 27.3393L41.67 26.0193Z" />
+      <path d="M4.43001 26.6693L3.88001 25.7593L3.60001 25.2893V26.0893V27.6593V28.5793L7.00001 34.2393V30.9493L4.97001 27.5693L4.43001 26.6693Z" />
+      <path d="M23.77 35.6392V40.7792L26.28 40.2692L37.26 38.0492V32.9092L25.79 35.2292L23.77 35.6392Z" />
+      <path d="M44.12 26.2092L43.44 27.0292L42.76 27.8391L42.32 28.3792L39.26 32.0492V36.1091L40.81 34.2392L44.4 29.9291V28.6192V26.6791V25.8792L44.12 26.2092Z" />
+      <path d="M9 31.9893V37.0993L21.77 40.6793V35.5793L9 31.9893Z" />
+    </svg>
+  )
+}
+
+export default memo(Dashboard) as typeof Dashboard

src/components/common/Icon/custom/index.ts

@@ -16,3 +16,11 @@ export { default as solana } from './solana'
 export { default as swap } from './swap'
 export { default as tezos } from './tezos'
 export { default as walletConnect } from './walletConnect'
+export { default as storageSolutions } from './storageSolutions'
+export { default as computeSolutions } from './computeSolutions'
+export { default as web3HostingBox } from './web3HostingBox'
+export { default as dashboard } from './dashboard'
+export { default as functions } from './functions'
+export { default as instance } from './instance'
+export { default as confidential } from './confidential'
+export { default as manageWebsite } from './manageWebsite'

src/components/common/Icon/custom/instance.tsx

@@ -0,0 +1,18 @@
+import React, { SVGAttributes, memo } from 'react'
+
+const Instance = (props: SVGAttributes<SVGElement>) => {
+  return (
+    <svg viewBox="0 0 48 49" xmlns="http://www.w3.org/2000/svg" {...props}>
+      <path d="M24 4.87936C14.43 4.87936 6.64999 9.30936 6.64999 14.7594C6.64999 15.7694 6.91999 16.7394 7.40999 17.6494C7.42999 17.6694 7.44999 17.6894 7.46999 17.7094C9.12999 20.6494 13.05 22.9494 18 24.0094C18.14 24.0394 18.28 24.0694 18.43 24.0994C18.69 24.1494 18.96 24.1994 19.22 24.2394C19.5 24.2894 19.78 24.3294 20.07 24.3594C20.22 24.3794 20.37 24.4094 20.53 24.4194C21.21 24.4994 21.91 24.5494 22.6 24.5794C22.77 24.5794 22.94 24.5794 23.1 24.5894C23.63 24.6094 24.16 24.6094 24.69 24.5894C24.9 24.5894 25.1 24.5894 25.31 24.5694C25.74 24.5494 26.16 24.5194 26.58 24.4894C26.78 24.4694 26.98 24.4594 27.18 24.4394C27.49 24.4094 27.8 24.3694 28.11 24.3194C28.29 24.2994 28.46 24.2694 28.63 24.2394C29.01 24.1794 29.39 24.1094 29.77 24.0394C29.83 24.0294 29.89 24.0194 29.95 23.9994C30.46 23.8894 30.97 23.7694 31.45 23.6394C33.69 23.0194 35.73 22.1094 37.33 21.0094C38.77 20.0194 39.85 18.8994 40.54 17.6894C40.55 17.6594 40.58 17.6494 40.6 17.6194C41.09 16.6994 41.36 15.7294 41.36 14.7194C41.36 9.26935 33.57 4.83936 24.01 4.83936L24 4.87936Z" />
+      <path d="M20.41 43.1594C20.65 43.7794 21.75 44.4794 23.39 44.6294C23.86 44.6694 24.38 44.6694 24.91 44.5894C25.41 44.5194 25.86 44.3994 26.26 44.2394C26.38 44.1894 26.5 44.1294 26.61 44.0694C26.71 44.0194 26.81 43.9594 26.9 43.8994C27.26 43.6594 27.51 43.3894 27.6 43.1294C27.62 43.0894 27.63 43.0494 27.65 42.9994L37.74 23.1894C35.34 24.6594 32.29 25.7194 28.86 26.2494C28.78 26.2594 28.69 26.2794 28.61 26.2894C28.22 26.3494 27.82 26.3994 27.42 26.4394C27.33 26.4394 27.25 26.4594 27.16 26.4694C27.05 26.4794 26.92 26.4794 26.8 26.4894C26.35 26.5294 25.89 26.5594 25.42 26.5794C25.3 26.5794 25.2 26.5994 25.08 26.5994C24.96 26.5994 24.84 26.5994 24.72 26.5994C24.48 26.5994 24.24 26.6194 24 26.6194C23.7 26.6194 23.41 26.5994 23.12 26.5894C22.89 26.5894 22.67 26.5894 22.44 26.5694C21.25 26.5094 20.1 26.3894 18.98 26.2094C18.92 26.2094 18.87 26.1894 18.81 26.1794C15.51 25.6394 12.57 24.5894 10.25 23.1694L20.32 42.9694C20.35 43.0194 20.38 43.0794 20.4 43.1394L20.41 43.1594Z" />
+      <path d="M37.78 23.1294C36.11 24.1594 34.16 24.9894 31.98 25.5894C31.42 25.7394 30.85 25.8794 30.27 25.9994C29.81 26.0894 29.34 26.1794 28.87 26.2494C32.3 25.7194 35.35 24.6594 37.75 23.1894L37.78 23.1294Z" />
+      <path d="M20.29 26.4192C19.85 26.3692 19.41 26.2992 18.98 26.2292C20.09 26.4092 21.25 26.5292 22.44 26.5892C21.72 26.5592 21 26.4992 20.29 26.4192Z" />
+      <path d="M10.21 23.1194L10.25 23.1994C12.57 24.6294 15.51 25.6694 18.81 26.2094C15.52 25.6494 12.56 24.5794 10.21 23.1194Z" />
+      <path d="M24.72 26.6194C24.19 26.6294 23.66 26.6194 23.12 26.6194C23.41 26.6194 23.7 26.6494 24 26.6494C24.24 26.6494 24.48 26.6294 24.72 26.6294V26.6194Z" />
+      <path d="M27.42 26.4493C27.82 26.4093 28.21 26.3593 28.61 26.2993C28.22 26.3593 27.82 26.4093 27.42 26.4493Z" />
+      <path d="M25.42 26.5893C25.88 26.5693 26.34 26.5393 26.8 26.4993C26.35 26.5393 25.89 26.5693 25.42 26.5893Z" />
+    </svg>
+  )
+}
+
+export default memo(Instance) as typeof Instance

src/components/common/Icon/custom/manageWebsite.tsx

@@ -0,0 +1,12 @@
+import React, { SVGAttributes, memo } from 'react'
+
+const ManageWebsite = (props: SVGAttributes<SVGElement>) => {
+  return (
+    <svg viewBox="0 0 48 49" xmlns="http://www.w3.org/2000/svg" {...props}>
+      <path d="M14.67 29.4792C14.81 29.3992 14.95 29.3192 15.09 29.2492C15.73 23.9292 19.75 17.9292 24.66 15.0792C27.98 13.1492 31.15 13.0492 33.19 14.7392C33.92 14.1392 34.68 13.6092 35.45 13.1592C37.13 12.1792 38.78 11.6692 40.29 11.5892L37.86 9.14918C37.73 8.99918 37.63 8.89918 37.52 8.80918C37.5 8.79918 37.48 8.77918 37.47 8.76918C36.01 7.55918 33.54 7.75918 30.87 9.30918C29.96 9.83918 29.07 10.4992 28.22 11.2592C28.02 11.4392 27.75 11.5392 27.47 11.5092C27.2 11.4892 26.94 11.3592 26.77 11.1392C25.48 9.54918 22.91 9.56918 20.08 11.2192C15.59 13.8292 11.8 19.6092 11.45 24.3792C11.42 24.7392 11.2 25.0592 10.87 25.2092C10.61 25.3292 10.36 25.4592 10.09 25.6092C6.23003 27.8492 3.09003 32.8592 3.09003 36.7792C3.09003 37.6592 3.25003 38.3992 3.58003 38.9792C3.66003 39.1192 3.75003 39.2492 3.88003 39.3992C3.89003 39.4192 3.91003 39.4292 3.92003 39.4492C3.97003 39.5092 4.01003 39.5392 4.05003 39.5792L6.68003 42.2192C6.75003 37.6192 10.23 32.0392 14.67 29.4592V29.4792Z" />
+      <path d="M44.26 16.3392C44.14 15.8992 43.97 15.4992 43.75 15.1592C43.54 14.8192 43.28 14.5392 42.99 14.2992C42.87 14.1992 42.74 14.1092 42.6 14.0292C41.1 13.1692 38.86 13.4792 36.44 14.8792C35.53 15.4092 34.64 16.0692 33.79 16.8292C33.59 17.0092 33.31 17.1092 33.04 17.0892C32.77 17.0692 32.51 16.9392 32.34 16.7192C31.7 15.9292 30.76 15.5392 29.63 15.5392C28.5 15.5392 27.09 15.9592 25.65 16.7992C21.16 19.4092 17.37 25.1892 17.02 29.9592C16.99 30.3192 16.77 30.6392 16.44 30.7892C16.19 30.9092 15.93 31.0392 15.67 31.1892C11.81 33.4292 8.67004 38.4392 8.67004 42.3592C8.67004 43.1492 8.81004 43.8292 9.07004 44.3692C9.22004 44.6992 9.43004 44.9592 9.67004 45.1792C9.79004 45.2892 9.91004 45.4092 10.05 45.4992C10.21 45.5892 10.38 45.6592 10.56 45.7092C11.64 46.0392 13.1 45.7392 14.66 44.8292L35.44 32.7592C40.44 29.8492 44.51 23.3492 44.51 18.2492C44.51 17.5392 44.42 16.8892 44.26 16.3192V16.3392Z" />
+    </svg>
+  )
+}
+
+export default memo(ManageWebsite) as typeof ManageWebsite

src/components/common/Icon/custom/storageSolutions.tsx

@@ -0,0 +1,14 @@
+import React, { SVGAttributes, memo } from 'react'
+
+const StorageSolutions = (props: SVGAttributes<SVGElement>) => {
+  return (
+    <svg viewBox="0 0 48 49" xmlns="http://www.w3.org/2000/svg" {...props}>
+      <path d="M29.14 4.09937L3.85001 18.7894V38.9294L6.85001 37.1894V20.3894C6.85001 20.0294 7.04001 19.6994 7.35001 19.5294L29.14 6.85937V4.09937Z" />
+      <path d="M30.14 11.3593L31.14 10.7793L34.14 9.0393V6.2793L31.14 8.0193L30.14 8.5993L29.14 9.1793L8.85001 20.9693V41.1093L11.85 39.3693V22.5693C11.85 22.2093 12.04 21.8793 12.35 21.7093L29.14 11.9593L30.14 11.3793V11.3593Z" />
+      <path d="M30.14 16.4295L31.14 15.8495L34.14 14.1095L35.14 13.5295L36.14 12.9495L39.14 11.2095V8.44946L36.14 10.1895L35.14 10.7695L34.14 11.3495L31.14 13.0895L30.14 13.6695L29.14 14.2495L13.85 23.1295V43.2695L16.85 41.5295V24.7295C16.85 24.3695 17.04 24.0395 17.35 23.8695L29.14 17.0195L30.14 16.4395V16.4295Z" />
+      <path d="M41.15 12.3594L40.15 12.9394L39.15 13.5194L36.15 15.2594L35.15 15.8394L34.15 16.4194L31.15 18.1594L30.15 18.7394L29.15 19.3194L18.86 25.2994V45.4394L44.16 30.7494V10.6094L41.16 12.3494L41.15 12.3594ZM27.56 27.4594C27.22 27.4594 26.88 27.2794 26.69 26.9594C26.67 26.9194 26.67 26.8794 26.65 26.8394C26.46 26.3794 26.61 25.8494 27.05 25.5894L30.14 23.7994L31.14 23.2194L34.14 21.4794L34.94 21.0194C35 20.9794 35.07 20.9694 35.14 20.9494C35.5 20.8294 35.88 20.9294 36.14 21.1994C36.2 21.2594 36.26 21.3094 36.3 21.3894C36.53 21.7894 36.44 22.2694 36.14 22.5794C36.08 22.6394 36.02 22.7094 35.94 22.7594L35.14 23.2294L34.14 23.8094L28.06 27.3394C27.91 27.4294 27.75 27.4694 27.59 27.4694C27.58 27.4694 27.57 27.4694 27.56 27.4694V27.4594Z" />
+    </svg>
+  )
+}
+
+export default memo(StorageSolutions) as typeof StorageSolutions

src/components/common/Icon/custom/web3HostingBox.tsx

@@ -0,0 +1,54 @@
+import React, { SVGAttributes, memo } from 'react'
+
+const Web3HostingBox = (props: SVGAttributes<SVGElement>) => {
+  return (
+    <svg viewBox="0 0 48 53" xmlns="http://www.w3.org/2000/svg" {...props}>
+      <g filter="url(#filter0_d_6205_45819)">
+        <path d="M6.73999 14.8193L24 24.8493L41.26 14.8193L24 4.55933L6.73999 14.8193Z" />
+        <path d="M25 44.4193L42.23 34.5193V16.5693L26.81 25.5293L25 26.5793V44.4193Z" />
+        <path d="M26.81 25.5293L25 26.5793L26.81 25.5293Z" />
+        <path d="M5.77002 16.5693V34.1393L23 44.3893V26.5793L21.45 25.6793L5.77002 16.5693Z" />
+        <path d="M21.4501 25.6794L23.0001 26.5794L21.4501 25.6794Z" />
+      </g>
+      <defs>
+        <filter
+          id="filter0_d_6205_45819"
+          x="-4"
+          y="0.769287"
+          width="56"
+          height="56"
+          filterUnits="userSpaceOnUse"
+          colorInterpolationFilters="sRGB"
+        >
+          <feFlood floodOpacity="0" result="BackgroundImageFix" />
+          <feColorMatrix
+            in="SourceAlpha"
+            type="matrix"
+            values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+            result="hardAlpha"
+          />
+          <feOffset dy="4" />
+          <feGaussianBlur stdDeviation="2" />
+          <feComposite in2="hardAlpha" operator="out" />
+          <feColorMatrix
+            type="matrix"
+            values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"
+          />
+          <feBlend
+            mode="normal"
+            in2="BackgroundImageFix"
+            result="effect1_dropShadow_6205_45819"
+          />
+          <feBlend
+            mode="normal"
+            in="SourceGraphic"
+            in2="effect1_dropShadow_6205_45819"
+            result="shape"
+          />
+        </filter>
+      </defs>
+    </svg>
+  )
+}
+
+export default memo(Web3HostingBox) as typeof Web3HostingBox