Update icons (#563)

* f:update

* f: changeset

.changeset/tender-dryers-play.md

@@ -0,0 +1,5 @@
+---
+'@status-im/icons': minor
+---
+
+Sync icons

packages/icons/src/add-sm-icon.tsx

@@ -0,0 +1,25 @@
+import { createIcon } from '../lib/create-icon'
+
+const SvgAddSmIcon = 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="M9.4 10.6V15h1.2v-4.4H15V9.4h-4.4V5H9.4v4.4H5v1.2h4.4Z"
+        clipRule="evenodd"
+      />
+    </svg>
+  )
+})
+
+export default SvgAddSmIcon

packages/icons/src/index.ts

@@ -5,6 +5,7 @@ export { default as ActivityCenterIcon } from './activity-center-icon'
 export { default as ActivityIcon } from './activity-icon'
 export { default as AddIcon } from './add-icon'
 export { default as AddReactionIcon } from './add-reaction-icon'
+export { default as AddSmIcon } from './add-sm-icon'
 export { default as AddSmallIcon } from './add-small-icon'
 export { default as AddTimeOffIcon } from './add-time-off-icon'
 export { default as AddTokenIcon } from './add-token-icon'
@@ -244,15 +245,18 @@ export { default as OrgIcon } from './org-icon'
 export { default as PalleteIcon } from './pallete-icon'
 export { default as PasswordIcon } from './password-icon'
 export { default as PauseIcon } from './pause-icon'
+export { default as PauseMediaIcon } from './pause-media-icon'
 export { default as PendingIcon } from './pending-icon'
 export { default as PendingStateIcon } from './pending-state-icon'
 export { default as PendingUserIcon } from './pending-user-icon'
 export { default as PeopleIcon } from './people-icon'
+export { default as PercentageIcon } from './percentage-icon'
 export { default as PiggyBankIcon } from './piggy-bank-icon'
 export { default as PinIcon } from './pin-icon'
 export { default as PinterestIcon } from './pinterest-icon'
 export { default as PlaceholderIcon } from './placeholder-icon'
 export { default as PlayIcon } from './play-icon'
+export { default as PlayMediaIcon } from './play-media-icon'
 export { default as PlugIcon } from './plug-icon'
 export { default as PopupIcon } from './popup-icon'
 export { default as PortugalIcon } from './portugal-icon'
@@ -306,6 +310,7 @@ export { default as StatusIconIcon } from './status-icon-icon'
 export { default as StatusLogoIcon } from './status-logo-icon'
 export { default as StickersIcon } from './stickers-icon'
 export { default as StopIcon } from './stop-icon'
+export { default as StopMediaIcon } from './stop-media-icon'
 export { default as StrikethroughIcon } from './strikethrough-icon'
 export { default as SubscriptIcon } from './subscript-icon'
 export { default as SuperareIcon } from './superare-icon'

packages/icons/src/pause-icon.tsx

@@ -15,7 +15,7 @@ const SvgPauseIcon = createIcon(props => {
       <path
         fill={props.color}
         fillRule="evenodd"
-        d="M15.839 4.276c.661.493.661 1.873.661 5.724 0 6 0 6-2.5 6s-2.5 0-2.5-6c0-3.851 0-5.23.661-5.724C12.531 4 13.105 4 14 4s1.47 0 1.839.276Zm-8 0C8.5 4.769 8.5 6.149 8.5 10c0 6 0 6-2.5 6s-2.5 0-2.5-6c0-3.851 0-5.23.661-5.724C4.531 4 5.105 4 6 4s1.47 0 1.839.276Z"
+        d="M10 3.6a6.4 6.4 0 1 0 0 12.8 6.4 6.4 0 0 0 0-12.8ZM2.4 10a7.6 7.6 0 1 1 15.2 0 7.6 7.6 0 0 1-15.2 0Zm5 3V7h1.2v6H7.4Zm4-6v6h1.2V7h-1.2Z"
         clipRule="evenodd"
       />
     </svg>

packages/icons/src/pause-media-icon.tsx

@@ -0,0 +1,25 @@
+import { createIcon } from '../lib/create-icon'
+
+const SvgPauseMediaIcon = 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="M15.839 4.276c.661.493.661 1.873.661 5.724 0 6 0 6-2.5 6s-2.5 0-2.5-6c0-3.851 0-5.23.661-5.724C12.531 4 13.105 4 14 4s1.47 0 1.839.276Zm-8 0C8.5 4.769 8.5 6.149 8.5 10c0 6 0 6-2.5 6s-2.5 0-2.5-6c0-3.851 0-5.23.661-5.724C4.531 4 5.105 4 6 4s1.47 0 1.839.276Z"
+        clipRule="evenodd"
+      />
+    </svg>
+  )
+})
+
+export default SvgPauseMediaIcon

packages/icons/src/percentage-icon.tsx

@@ -0,0 +1,25 @@
+import { createIcon } from '../lib/create-icon'
+
+const SvgPercentageIcon = 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="M5.22 4.026C5.741 3.547 6.41 3.4 7 3.4c.59 0 1.257.147 1.78.626.534.49.82 1.234.82 2.224 0 .99-.286 1.735-.82 2.224-.523.479-1.19.626-1.78.626-.59 0-1.258-.147-1.78-.626-.534-.49-.82-1.234-.82-2.224 0-.99.286-1.735.82-2.224Zm.81.885c-.216.199-.43.58-.43 1.339 0 .76.214 1.14.43 1.339.227.208.56.311.97.311.41 0 .742-.103.97-.311.216-.199.43-.579.43-1.339s-.214-1.14-.43-1.339C7.741 4.703 7.41 4.6 7 4.6c-.41 0-.743.103-.97.311ZM5.116 16l8.308-12h1.46L6.575 16h-1.46ZM13 10.9c-.59 0-1.258.147-1.78.627-.534.488-.82 1.233-.82 2.223 0 .99.286 1.735.82 2.224.522.479 1.19.626 1.78.626.59 0 1.257-.147 1.78-.626.534-.49.82-1.234.82-2.224 0-.99-.286-1.735-.82-2.223-.523-.48-1.19-.627-1.78-.627Zm-1.4 2.85c0-.76.214-1.14.43-1.339.227-.208.56-.311.97-.311.41 0 .742.103.97.311.216.199.43.58.43 1.339 0 .76-.214 1.14-.43 1.339-.228.208-.56.311-.97.311-.41 0-.743-.103-.97-.311-.216-.199-.43-.579-.43-1.339Z"
+        clipRule="evenodd"
+      />
+    </svg>
+  )
+})
+
+export default SvgPercentageIcon

packages/icons/src/play-media-icon.tsx

@@ -0,0 +1,23 @@
+import { createIcon } from '../lib/create-icon'
+
+const SvgPlayMediaIcon = 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}
+        d="M7.193 16c-1.807 0-1.808-12 0-12C9 4 16.5 8.5 16.5 10S9 16 7.193 16Z"
+      />
+    </svg>
+  )
+})
+
+export default SvgPlayMediaIcon

packages/icons/src/stop-media-icon.tsx

@@ -0,0 +1,23 @@
+import { createIcon } from '../lib/create-icon'
+
+const SvgStopMediaIcon = 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}
+        d="M10 4c5.5 0 6 .5 6 6s-.5 6-6 6-6-.5-6-6 .5-6 6-6Z"
+      />
+    </svg>
+  )
+})
+
+export default SvgStopMediaIcon

packages/icons/svg/add-sm-icon.svg

@@ -0,0 +1,14 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="20"
+  height="20"
+  fill="none"
+  viewBox="0 0 20 20"
+>
+  <path
+    fill="#09101C"
+    fill-rule="evenodd"
+    d="M9.4 10.6V15h1.2v-4.4H15V9.4h-4.4V5H9.4v4.4H5v1.2h4.4Z"
+    clip-rule="evenodd"
+  />
+</svg>

packages/icons/svg/pause-icon.svg

@@ -8,7 +8,7 @@
   <path
     fill="#09101C"
     fill-rule="evenodd"
-    d="M15.839 4.276c.661.493.661 1.873.661 5.724 0 6 0 6-2.5 6s-2.5 0-2.5-6c0-3.851 0-5.23.661-5.724C12.531 4 13.105 4 14 4s1.47 0 1.839.276Zm-8 0C8.5 4.769 8.5 6.149 8.5 10c0 6 0 6-2.5 6s-2.5 0-2.5-6c0-3.851 0-5.23.661-5.724C4.531 4 5.105 4 6 4s1.47 0 1.839.276Z"
+    d="M10 3.6a6.4 6.4 0 1 0 0 12.8 6.4 6.4 0 0 0 0-12.8ZM2.4 10a7.6 7.6 0 1 1 15.2 0 7.6 7.6 0 0 1-15.2 0Zm5 3V7h1.2v6H7.4Zm4-6v6h1.2V7h-1.2Z"
     clip-rule="evenodd"
   />
 </svg>

packages/icons/svg/pause-media-icon.svg

@@ -0,0 +1,14 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="20"
+  height="20"
+  fill="none"
+  viewBox="0 0 20 20"
+>
+  <path
+    fill="#09101C"
+    fill-rule="evenodd"
+    d="M15.839 4.276c.661.493.661 1.873.661 5.724 0 6 0 6-2.5 6s-2.5 0-2.5-6c0-3.851 0-5.23.661-5.724C12.531 4 13.105 4 14 4s1.47 0 1.839.276Zm-8 0C8.5 4.769 8.5 6.149 8.5 10c0 6 0 6-2.5 6s-2.5 0-2.5-6c0-3.851 0-5.23.661-5.724C4.531 4 5.105 4 6 4s1.47 0 1.839.276Z"
+    clip-rule="evenodd"
+  />
+</svg>

packages/icons/svg/percentage-icon.svg

@@ -0,0 +1,14 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="20"
+  height="20"
+  fill="none"
+  viewBox="0 0 20 20"
+>
+  <path
+    fill="#09101C"
+    fill-rule="evenodd"
+    d="M5.22 4.026C5.741 3.547 6.41 3.4 7 3.4c.59 0 1.257.147 1.78.626.534.49.82 1.234.82 2.224 0 .99-.286 1.735-.82 2.224-.523.479-1.19.626-1.78.626-.59 0-1.258-.147-1.78-.626-.534-.49-.82-1.234-.82-2.224 0-.99.286-1.735.82-2.224Zm.81.885c-.216.199-.43.58-.43 1.339 0 .76.214 1.14.43 1.339.227.208.56.311.97.311.41 0 .742-.103.97-.311.216-.199.43-.579.43-1.339s-.214-1.14-.43-1.339C7.741 4.703 7.41 4.6 7 4.6c-.41 0-.743.103-.97.311ZM5.116 16l8.308-12h1.46L6.575 16h-1.46ZM13 10.9c-.59 0-1.258.147-1.78.627-.534.488-.82 1.233-.82 2.223 0 .99.286 1.735.82 2.224.522.479 1.19.626 1.78.626.59 0 1.257-.147 1.78-.626.534-.49.82-1.234.82-2.224 0-.99-.286-1.735-.82-2.223-.523-.48-1.19-.627-1.78-.627Zm-1.4 2.85c0-.76.214-1.14.43-1.339.227-.208.56-.311.97-.311.41 0 .742.103.97.311.216.199.43.58.43 1.339 0 .76-.214 1.14-.43 1.339-.228.208-.56.311-.97.311-.41 0-.743-.103-.97-.311-.216-.199-.43-.579-.43-1.339Z"
+    clip-rule="evenodd"
+  />
+</svg>

packages/icons/svg/play-media-icon.svg

@@ -0,0 +1,12 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="20"
+  height="20"
+  fill="none"
+  viewBox="0 0 20 20"
+>
+  <path
+    fill="#09101C"
+    d="M7.193 16c-1.807 0-1.808-12 0-12C9 4 16.5 8.5 16.5 10S9 16 7.193 16Z"
+  />
+</svg>

packages/icons/svg/stop-media-icon.svg

@@ -0,0 +1,9 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="20"
+  height="20"
+  fill="none"
+  viewBox="0 0 20 20"
+>
+  <path fill="#09101C" d="M10 4c5.5 0 6 .5 6 6s-.5 6-6 6-6-.5-6-6 .5-6 6-6Z" />
+</svg>