Sync icons (#567)

* a * Create perfect-queens-kneel.md
status-im · May 24, 2024 · e50e48f · e50e48f
1 parent f399c23
commit e50e48f
Show file tree

Hide file tree

Showing 15 changed files with 578 additions and 51 deletions.
diff --git a/.changeset/perfect-queens-kneel.md b/.changeset/perfect-queens-kneel.md
@@ -0,0 +1,5 @@
+---
+"@status-im/icons": patch
+---
+
+Sync icons
diff --git a/packages/icons/src/bridge-blur-icon.tsx b/packages/icons/src/bridge-blur-icon.tsx
@@ -0,0 +1,77 @@
+import { createIcon } from '../lib/create-icon'
+
+const SvgBridgeBlurIcon = createIcon(props => {
+  return (
+    <svg
+      {...props}
+      xmlns="http://www.w3.org/2000/svg"
+      width={props.width}
+      height={props.height}
+      fill="none"
+      viewBox="0 0 20 20"
+      focusable={false}
+      aria-hidden={true}
+    >
+      <g clipPath="url(#bridge-blur-icon_svg__a)">
+        <mask
+          id="bridge-blur-icon_svg__c"
+          width={20}
+          height={20}
+          x={0}
+          y={0}
+          maskUnits="userSpaceOnUse"
+          style={{
+            maskType: 'alpha',
+          }}
+        >
+          <path
+            fill="url(#bridge-blur-icon_svg__b)"
+            stroke={props.color}
+            d="M-.5-.5h19v19h-19z"
+            transform="matrix(0 -1 -1 0 19 19)"
+          />
+        </mask>
+        <g mask="url(#bridge-blur-icon_svg__c)">
+          <path
+            fill={props.color}
+            fillRule="evenodd"
+            d="M4.99 10.098 4.5 10l-.49-.099v-.002l.001-.004.003-.014a3.446 3.446 0 0 1 .054-.224 8.6 8.6 0 0 1 1.075-2.43C6.015 5.887 7.528 4.5 10 4.5c2.473 0 3.986 1.387 4.857 2.728a8.602 8.602 0 0 1 1.129 2.653l.003.014v.004l.001.002-.49.099-.49.098-.002-.008-.008-.034a7.103 7.103 0 0 0-.199-.672 7.598 7.598 0 0 0-.783-1.612C13.265 6.612 12.028 5.5 10 5.5c-2.027 0-3.264 1.113-4.018 2.273a7.6 7.6 0 0 0-.99 2.318l-.002.007Z"
+            clipRule="evenodd"
+          />
+        </g>
+        <circle
+          cx={4.5}
+          cy={12.5}
+          r={2.5}
+          stroke={props.color}
+          strokeWidth={1.2}
+        />
+        <circle
+          cx={15.5}
+          cy={12.5}
+          r={2.5}
+          stroke={props.color}
+          strokeWidth={1.2}
+        />
+      </g>
+      <defs>
+        <linearGradient
+          id="bridge-blur-icon_svg__b"
+          x1={13}
+          x2={15.5}
+          y1={4.5}
+          y2={8}
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stopColor={props.color} stopOpacity={0} />
+          <stop offset={1} stopColor={props.color} />
+        </linearGradient>
+        <clipPath id="bridge-blur-icon_svg__a">
+          <path fill="#fff" d="M0 0h20v20H0z" />
+        </clipPath>
+      </defs>
+    </svg>
+  )
+})
+
+export default SvgBridgeBlurIcon
diff --git a/packages/icons/src/index.ts b/packages/icons/src/index.ts
@@ -33,6 +33,7 @@ export { default as BanUserIcon } from './ban-user-icon'
 export { default as BlockIcon } from './block-icon'
 export { default as BoldIcon } from './bold-icon'
 export { default as BrazilIcon } from './brazil-icon'
+export { default as BridgeBlurIcon } from './bridge-blur-icon'
 export { default as BridgeIcon } from './bridge-icon'
 export { default as BrowserIcon } from './browser-icon'
 export { default as BulletIcon } from './bullet-icon'
@@ -268,6 +269,7 @@ export { default as QrCodeIcon } from './qr-code-icon'
 export { default as QuillPenIcon } from './quill-pen-icon'
 export { default as RaribleIcon } from './rarible-icon'
 export { default as ReactionIcon } from './reaction-icon'
+export { default as ReceiveBlurIcon } from './receive-blur-icon'
 export { default as ReceiveIcon } from './receive-icon'
 export { default as RecentIcon } from './recent-icon'
 export { default as RedditIcon } from './reddit-icon'
@@ -277,6 +279,7 @@ export { default as RemoveIcon } from './remove-icon'
 export { default as RemoveUserIcon } from './remove-user-icon'
 export { default as ReorderIcon } from './reorder-icon'
 export { default as ReplyIcon } from './reply-icon'
+export { default as ReportingIcon } from './reporting-icon'
 export { default as RevealIcon } from './reveal-icon'
 export { default as RevealWhitelistIcon } from './reveal-whitelist-icon'
 export { default as RevereIcon } from './revere-icon'
@@ -293,6 +296,7 @@ export { default as ScanIcon } from './scan-icon'
 export { default as SearchIcon } from './search-icon'
 export { default as SeedIcon } from './seed-icon'
 export { default as SendAudioIcon } from './send-audio-icon'
+export { default as SendBlurIcon } from './send-blur-icon'
 export { default as SendIcon } from './send-icon'
 export { default as SettingsIcon } from './settings-icon'
 export { default as ShareIcon } from './share-icon'
@@ -315,6 +319,7 @@ export { default as StrikethroughIcon } from './strikethrough-icon'
 export { default as SubscriptIcon } from './subscript-icon'
 export { default as SuperareIcon } from './superare-icon'
 export { default as SuperscriptIcon } from './superscript-icon'
+export { default as SwapBlurIcon } from './swap-blur-icon'
 export { default as SwapIcon } from './swap-icon'
 export { default as SwitchIcon } from './switch-icon'
 export { default as SymbolsIcon } from './symbols-icon'

diff --git a/packages/icons/src/receive-blur-icon.tsx b/packages/icons/src/receive-blur-icon.tsx
@@ -0,0 +1,57 @@
+import { createIcon } from '../lib/create-icon'
+
+const SvgReceiveBlurIcon = createIcon(props => {
+  return (
+    <svg
+      {...props}
+      xmlns="http://www.w3.org/2000/svg"
+      width={props.width}
+      height={props.height}
+      fill="none"
+      viewBox="0 0 20 20"
+      focusable={false}
+      aria-hidden={true}
+    >
+      <mask
+        id="receive-blur-icon_svg__b"
+        width={14}
+        height={17}
+        x={3}
+        y={2}
+        maskUnits="userSpaceOnUse"
+        style={{
+          maskType: 'alpha',
+        }}
+      >
+        <path
+          fill="url(#receive-blur-icon_svg__a)"
+          d="M0 0h13v17H0z"
+          transform="matrix(-1 0 0 1 16.5 2)"
+        />
+      </mask>
+      <g mask="url(#receive-blur-icon_svg__b)">
+        <path
+          fill={props.color}
+          fillRule="evenodd"
+          d="M9.4 13.147 4.904 9.06l-.807.888 5.5 5 .404.367.403-.367 5.5-5-.807-.888-4.497 4.088V2.5H9.4v10.647Z"
+          clipRule="evenodd"
+        />
+      </g>
+      <defs>
+        <linearGradient
+          id="receive-blur-icon_svg__a"
+          x1={6.5}
+          x2={6.5}
+          y1={0.708}
+          y2={8.5}
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stopColor={props.color} stopOpacity={0} />
+          <stop offset={1} stopColor={props.color} />
+        </linearGradient>
+      </defs>
+    </svg>
+  )
+})
+
+export default SvgReceiveBlurIcon
diff --git a/packages/icons/src/reporting-icon.tsx b/packages/icons/src/reporting-icon.tsx
@@ -0,0 +1,25 @@
+import { createIcon } from '../lib/create-icon'
+
+const SvgReportingIcon = createIcon(props => {
+  return (
+    <svg
+      {...props}
+      xmlns="http://www.w3.org/2000/svg"
+      width={props.width}
+      height={props.height}
+      fill="none"
+      viewBox="0 0 20 20"
+      focusable={false}
+      aria-hidden={true}
+    >
+      <path
+        fill={props.color}
+        fillRule="evenodd"
+        d="M2.6 8c0-.755.628-1.6 2.012-2.292C5.96 5.034 7.864 4.6 10 4.6c.579 0 1.14.032 1.679.092L6.624 11.01a9.685 9.685 0 0 1-2.012-.718C3.228 9.6 2.6 8.755 2.6 8ZM1.4 8c0-1.454 1.164-2.61 2.675-3.365C5.623 3.86 7.718 3.4 10 3.4c2.283 0 4.378.461 5.926 1.235C17.437 5.39 18.6 6.545 18.6 8v4.078c0 .44 0 .765-.201 1.247a2.549 2.549 0 0 1-.27.509c-.096.135-.198.234-.282.318l-.011.01C16.807 15.175 14.54 16.6 10 16.6c-4.54 0-6.807-1.425-7.835-2.438l-.011-.01c-.085-.084-.186-.183-.282-.318a2.55 2.55 0 0 1-.27-.509c-.202-.482-.202-.807-.202-1.247V8Zm16 2.384a6.668 6.668 0 0 1-1.474.981C14.378 12.14 12.283 12.6 10 12.6c-.83 0-1.636-.061-2.4-.176v2.817c.705.1 1.501.159 2.4.159 4.268 0 6.218-1.329 6.994-2.093.097-.095.128-.128.158-.17.03-.04.07-.11.14-.275.105-.251.108-.368.108-.806v-1.672Zm-11 4.628c-1.86-.452-2.882-1.201-3.393-1.705a1.318 1.318 0 0 1-.158-.17c-.03-.04-.071-.11-.14-.275-.105-.251-.109-.368-.109-.806v-1.672c.42.377.924.706 1.475.981.68.34 1.465.62 2.325.826v2.821Zm1.558-3.749 2.13-2.663h7.184c-.247.582-.857 1.179-1.883 1.692C14.04 10.966 12.137 11.4 10 11.4c-.71 0-1.395-.048-2.042-.137ZM17.272 7.4H11.05l1.99-2.488c.892.192 1.688.465 2.35.796 1.026.513 1.636 1.11 1.883 1.692Z"
+        clipRule="evenodd"
+      />
+    </svg>
+  )
+})
+
+export default SvgReportingIcon
diff --git a/packages/icons/src/send-blur-icon.tsx b/packages/icons/src/send-blur-icon.tsx
@@ -0,0 +1,57 @@
+import { createIcon } from '../lib/create-icon'
+
+const SvgSendBlurIcon = createIcon(props => {
+  return (
+    <svg
+      {...props}
+      xmlns="http://www.w3.org/2000/svg"
+      width={props.width}
+      height={props.height}
+      fill="none"
+      viewBox="0 0 20 20"
+      focusable={false}
+      aria-hidden={true}
+    >
+      <mask
+        id="send-blur-icon_svg__b"
+        width={14}
+        height={17}
+        x={3}
+        y={1}
+        maskUnits="userSpaceOnUse"
+        style={{
+          maskType: 'alpha',
+        }}
+      >
+        <path
+          fill="url(#send-blur-icon_svg__a)"
+          d="M16.5 18h13v17h-13z"
+          transform="rotate(-180 16.5 18)"
+        />
+      </mask>
+      <g mask="url(#send-blur-icon_svg__b)">
+        <path
+          fill={props.color}
+          fillRule="evenodd"
+          d="m9.4 6.857-4.496 4.087-.807-.888 5.5-5 .404-.367.403.367 5.5 5-.807.888L10.6 6.856V17.5H9.4V6.857Z"
+          clipRule="evenodd"
+        />
+      </g>
+      <defs>
+        <linearGradient
+          id="send-blur-icon_svg__a"
+          x1={23}
+          x2={23}
+          y1={18.708}
+          y2={26.5}
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stopColor={props.color} stopOpacity={0} />
+          <stop offset={1} stopColor={props.color} />
+        </linearGradient>
+      </defs>
+    </svg>
+  )
+})
+
+export default SvgSendBlurIcon
diff --git a/packages/icons/src/swap-blur-icon.tsx b/packages/icons/src/swap-blur-icon.tsx
@@ -0,0 +1,85 @@
+import { createIcon } from '../lib/create-icon'
+
+const SvgSwapBlurIcon = createIcon(props => {
+  return (
+    <svg
+      {...props}
+      xmlns="http://www.w3.org/2000/svg"
+      width={props.width}
+      height={props.height}
+      fill="none"
+      viewBox="0 0 20 20"
+      focusable={false}
+      aria-hidden={true}
+    >
+      <mask
+        id="swap-blur-icon_svg__b"
+        width={9}
+        height={16}
+        x={9}
+        y={3}
+        maskUnits="userSpaceOnUse"
+        style={{
+          maskType: 'alpha',
+        }}
+      >
+        <path fill="url(#swap-blur-icon_svg__a)" d="M9 3h9v16H9V3Z" />
+      </mask>
+      <g mask="url(#swap-blur-icon_svg__b)">
+        <path
+          fill={props.color}
+          fillRule="evenodd"
+          d="m14.1 14.178 3.005-2.63.79.904-4 3.5-.395.346-.395-.346-4-3.5.79-.903 3.005 2.63V3.5h1.2v10.678Z"
+          clipRule="evenodd"
+        />
+      </g>
+      <mask
+        id="swap-blur-icon_svg__d"
+        width={9}
+        height={16}
+        x={2}
+        y={1}
+        maskUnits="userSpaceOnUse"
+        style={{
+          maskType: 'alpha',
+        }}
+      >
+        <path fill="url(#swap-blur-icon_svg__c)" d="M11 17H2V1h9v16Z" />
+      </mask>
+      <g mask="url(#swap-blur-icon_svg__d)">
+        <path
+          fill={props.color}
+          fillRule="evenodd"
+          d="m5.9 5.822-3.005 2.63-.79-.903 4-3.5.395-.346.395.345 4 3.5-.79.904L7.1 5.822V16.5H5.9V5.822Z"
+          clipRule="evenodd"
+        />
+      </g>
+      <defs>
+        <linearGradient
+          id="swap-blur-icon_svg__a"
+          x1={13.5}
+          x2={13.5}
+          y1={3.645}
+          y2={10.742}
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stopColor={props.color} stopOpacity={0} />
+          <stop offset={1} stopColor={props.color} />
+        </linearGradient>
+        <linearGradient
+          id="swap-blur-icon_svg__c"
+          x1={6.5}
+          x2={6.5}
+          y1={16.355}
+          y2={9.258}
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stopColor={props.color} stopOpacity={0} />
+          <stop offset={1} stopColor={props.color} />
+        </linearGradient>
+      </defs>
+    </svg>
+  )
+})
+
+export default SvgSwapBlurIcon