@100mslive/react-icons 0.3.1-alpha.7 → 0.4.0

package/src/PauseSolidIcon.tsx

@@ -1,14 +1,13 @@
 import * as React from 'react';
+import { SVGProps } from 'react';
 
-function SvgPauseSolidIcon(props: React.SVGProps<SVGSVGElement>) {
-  return (
-    <svg width="24px" height="24px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
-      <path
-        d="M11.875 4a7.875 7.875 0 100 15.75 7.875 7.875 0 000-15.75zM10.75 14.688a1.125 1.125 0 11-2.25 0V9.061a1.125 1.125 0 012.25 0v5.626zm4.5 0a1.125 1.125 0 11-2.25 0V9.061a1.125 1.125 0 112.25 0v5.626z"
-        fill="currentColor"
-      />
-    </svg>
-  );
-}
+const SvgPauseSolidIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg width="24px" height="24px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <path
+      d="M11.875 4a7.875 7.875 0 1 0 0 15.75 7.875 7.875 0 0 0 0-15.75ZM10.75 14.688a1.125 1.125 0 1 1-2.25 0V9.061a1.125 1.125 0 0 1 2.25 0v5.626Zm4.5 0a1.125 1.125 0 1 1-2.25 0V9.061a1.125 1.125 0 1 1 2.25 0v5.626Z"
+      fill="currentColor"
+    />
+  </svg>
+);
 
 export default SvgPauseSolidIcon;

package/src/PenIcon.tsx

@@ -1,16 +1,15 @@
 import * as React from 'react';
+import { SVGProps } from 'react';
 
-function SvgPenIcon(props: React.SVGProps<SVGSVGElement>) {
-  return (
-    <svg width="24px" height="24px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M3.24 3.24a.818.818 0 01.785-.213l11.849 2.86c.31.074.548.322.61.634l.944 4.718a.818.818 0 01.878.182l2.454 2.455c.32.32.32.838 0 1.157l-5.727 5.727a.818.818 0 01-1.157 0l-2.454-2.454a.818.818 0 01-.184-.878l-4.717-.944a.818.818 0 01-.635-.61l-2.86-11.85a.821.821 0 01.214-.784zm5.727 6.884L5.296 6.453l2.059 8.529 5.194 1.039 3.472-3.472-1.039-5.194-8.529-2.06 3.67 3.671a2.455 2.455 0 11-1.157 1.157zm1.626.49a.818.818 0 10.01-.01l-.01.01zm3.862 8.41l-1.298-1.297 4.57-4.57 1.298 1.298-4.57 4.57z"
-        fill="currentColor"
-      />
-    </svg>
-  );
-}
+const SvgPenIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg width="24px" height="24px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M3.24 3.24a.818.818 0 0 1 .785-.213l11.849 2.86c.31.074.548.322.61.634l.944 4.718a.818.818 0 0 1 .878.182l2.454 2.455c.32.32.32.838 0 1.157l-5.727 5.727a.818.818 0 0 1-1.157 0l-2.454-2.454a.818.818 0 0 1-.184-.878l-4.717-.944a.818.818 0 0 1-.635-.61l-2.86-11.85a.821.821 0 0 1 .214-.784Zm5.727 6.884L5.296 6.453l2.059 8.529 5.194 1.039 3.472-3.472-1.039-5.194-8.529-2.06 3.67 3.671a2.455 2.455 0 1 1-1.157 1.157Zm1.626.49a.818.818 0 1 0 .01-.01l-.01.01Zm3.862 8.41-1.298-1.297 4.57-4.57 1.298 1.298-4.57 4.57Z"
+      fill="currentColor"
+    />
+  </svg>
+);
 
 export default SvgPenIcon;

package/src/PencilDrawIcon.tsx

@@ -1,16 +1,15 @@
 import * as React from 'react';
+import { SVGProps } from 'react';
 
-function SvgPencilDrawIcon(props: React.SVGProps<SVGSVGElement>) {
-  return (
-    <svg width="24px" height="24px" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M23.435 3.25c-.808 0-1.583.321-2.155.892l-9.068 9.069-.002.002-.002.002-1.477 1.477a.93.93 0 00-.252.42l-1.3 4.271a.938.938 0 001.17 1.17l4.272-1.3a.933.933 0 00.42-.253l1.478-1.478 9.07-9.07a3.047 3.047 0 00-2.154-5.202zM12.21 15.864l.663-.663 1.657 1.658-.663.663-2.383.725.726-2.383zm1.989-1.988l1.657 1.657 8.407-8.407a1.172 1.172 0 10-1.657-1.658L14.2 13.876zm-7.636 6.249a3.047 3.047 0 100 6.094h14.765a.938.938 0 000-1.875H6.563a1.172 1.172 0 010-2.344h.7a.937.937 0 100-1.875h-.7z"
-        fill="currentColor"
-      />
-    </svg>
-  );
-}
+const SvgPencilDrawIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg width="24px" height="24px" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M23.435 3.25c-.808 0-1.583.321-2.155.892l-9.068 9.069-.002.002-.002.002-1.477 1.477a.93.93 0 0 0-.252.42l-1.3 4.271a.938.938 0 0 0 1.17 1.17l4.272-1.3a.933.933 0 0 0 .42-.253l1.478-1.478 9.07-9.07a3.047 3.047 0 0 0-2.154-5.202ZM12.21 15.864l.663-.663 1.657 1.658-.663.663-2.383.725.726-2.383Zm1.989-1.988 1.657 1.657 8.407-8.407a1.172 1.172 0 1 0-1.657-1.658L14.2 13.876Zm-7.636 6.249a3.047 3.047 0 1 0 0 6.094h14.765a.938.938 0 0 0 0-1.875H6.563a1.172 1.172 0 0 1 0-2.344h.7a.937.937 0 1 0 0-1.875h-.7Z"
+      fill="currentColor"
+    />
+  </svg>
+);
 
 export default SvgPencilDrawIcon;

package/src/PencilIcon.tsx

@@ -1,16 +1,15 @@
 import * as React from 'react';
+import { SVGProps } from 'react';
 
-function SvgPencilIcon(props: React.SVGProps<SVGSVGElement>) {
-  return (
-    <svg width="24px" height="24px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M17.488 3.24a.818.818 0 00-1.157 1.157l3.272 3.272a.818.818 0 101.157-1.157L17.488 3.24zm-2.455 2.454a.818.818 0 00-1.157 0l-9.41 9.41c-.1.1-.172.225-.21.363l-1.227 4.5a.818.818 0 001.004 1.004l4.5-1.227a.818.818 0 00.364-.21l9.409-9.41a.818.818 0 000-1.157l-3.273-3.273zM4.984 19.016l.794-2.91 8.677-8.676 2.115 2.115-8.677 8.677-2.909.794z"
-        fill="currentColor"
-      />
-    </svg>
-  );
-}
+const SvgPencilIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg width="24px" height="24px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M17.488 3.24a.818.818 0 0 0-1.157 1.157l3.272 3.272a.818.818 0 1 0 1.157-1.157L17.488 3.24Zm-2.455 2.454a.818.818 0 0 0-1.157 0l-9.41 9.41c-.1.1-.172.225-.21.363l-1.227 4.5a.818.818 0 0 0 1.004 1.004l4.5-1.227a.818.818 0 0 0 .364-.21l9.409-9.41a.818.818 0 0 0 0-1.157l-3.273-3.273ZM4.984 19.016l.794-2.91 8.677-8.676 2.115 2.115-8.677 8.677-2.909.794Z"
+      fill="currentColor"
+    />
+  </svg>
+);
 
 export default SvgPencilIcon;

package/src/PeopleAddIcon.tsx

@@ -1,16 +1,15 @@
 import * as React from 'react';
+import { SVGProps } from 'react';
 
-function SvgPeopleAddIcon(props: React.SVGProps<SVGSVGElement>) {
-  return (
-    <svg width="24px" height="24px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M6.4 8a2.4 2.4 0 114.8 0 2.4 2.4 0 01-4.8 0zm2.4-4a4 4 0 100 8 4 4 0 000-8zM6 13.6a4 4 0 00-4 4v1.6a.8.8 0 001.6 0v-1.6A2.4 2.4 0 016 15.2h5.6a2.4 2.4 0 012.4 2.4v1.6a.8.8 0 001.6 0v-1.6a4 4 0 00-4-4H6zM18 8a.8.8 0 01.8.8v1.6h1.6a.8.8 0 110 1.6h-1.6v1.6a.8.8 0 01-1.6 0V12h-1.6a.8.8 0 010-1.6h1.6V8.8A.8.8 0 0118 8z"
-        fill="currentColor"
-      />
-    </svg>
-  );
-}
+const SvgPeopleAddIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg width="24px" height="24px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M6.4 8a2.4 2.4 0 1 1 4.8 0 2.4 2.4 0 0 1-4.8 0Zm2.4-4a4 4 0 1 0 0 8 4 4 0 0 0 0-8ZM6 13.6a4 4 0 0 0-4 4v1.6a.8.8 0 0 0 1.6 0v-1.6A2.4 2.4 0 0 1 6 15.2h5.6a2.4 2.4 0 0 1 2.4 2.4v1.6a.8.8 0 0 0 1.6 0v-1.6a4 4 0 0 0-4-4H6ZM18 8a.8.8 0 0 1 .8.8v1.6h1.6a.8.8 0 1 1 0 1.6h-1.6v1.6a.8.8 0 0 1-1.6 0V12h-1.6a.8.8 0 0 1 0-1.6h1.6V8.8A.8.8 0 0 1 18 8Z"
+      fill="currentColor"
+    />
+  </svg>
+);
 
 export default SvgPeopleAddIcon;

package/src/PeopleIcon.tsx

@@ -1,16 +1,15 @@
 import * as React from 'react';
+import { SVGProps } from 'react';
 
-function SvgPeopleIcon(props: React.SVGProps<SVGSVGElement>) {
-  return (
-    <svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24" fill="none" {...props}>
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M8.625 4.54a3.844 3.844 0 100 7.687 3.844 3.844 0 000-7.688zM6.968 6.725a2.344 2.344 0 113.314 3.314 2.344 2.344 0 01-3.314-3.314zm-1.392 8.936a4.312 4.312 0 017.362 3.049.75.75 0 001.5 0 5.813 5.813 0 00-11.626 0 .75.75 0 001.5 0c0-1.144.455-2.24 1.264-3.05zm8.4-8.21a3.281 3.281 0 114.64 4.64 3.281 3.281 0 01-4.64-4.64zm2.32.539a1.781 1.781 0 100 3.563 1.781 1.781 0 000-3.563zm-1.177 7.537a3.395 3.395 0 014.569 3.183.75.75 0 001.5 0 4.896 4.896 0 00-6.588-4.59.75.75 0 10.52 1.407z"
-        fill="currentColor"
-      />
-    </svg>
-  );
-}
+const SvgPeopleIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24" fill="none" {...props}>
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M8.625 4.54a3.844 3.844 0 1 0 0 7.687 3.844 3.844 0 0 0 0-7.688ZM6.968 6.725a2.344 2.344 0 1 1 3.314 3.314 2.344 2.344 0 0 1-3.314-3.314Zm-1.392 8.936a4.312 4.312 0 0 1 7.362 3.049.75.75 0 0 0 1.5 0 5.813 5.813 0 0 0-11.626 0 .75.75 0 0 0 1.5 0c0-1.144.455-2.24 1.264-3.05Zm8.4-8.21a3.281 3.281 0 1 1 4.64 4.64 3.281 3.281 0 0 1-4.64-4.64Zm2.32.539a1.781 1.781 0 1 0 0 3.563 1.781 1.781 0 0 0 0-3.563Zm-1.177 7.537a3.395 3.395 0 0 1 4.569 3.183.75.75 0 0 0 1.5 0 4.896 4.896 0 0 0-6.588-4.59.75.75 0 1 0 .52 1.407Z"
+      fill="currentColor"
+    />
+  </svg>
+);
 
 export default SvgPeopleIcon;

package/src/PeopleRemoveIcon.tsx

@@ -1,16 +1,15 @@
 import * as React from 'react';
+import { SVGProps } from 'react';
 
-function SvgPeopleRemoveIcon(props: React.SVGProps<SVGSVGElement>) {
-  return (
-    <svg width="24px" height="24px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M8.8 5.6a2.4 2.4 0 100 4.8 2.4 2.4 0 000-4.8zM4.8 8a4 4 0 118 0 4 4 0 01-8 0zm-1.628 6.772A4 4 0 016 13.6h5.6a4 4 0 014 4v1.6a.8.8 0 01-1.6 0v-1.6a2.4 2.4 0 00-2.4-2.4H6a2.4 2.4 0 00-2.4 2.4v1.6a.8.8 0 01-1.6 0v-1.6a4 4 0 011.172-2.828zM15.6 10.4a.8.8 0 000 1.6h4.8a.8.8 0 100-1.6h-4.8z"
-        fill="currentColor"
-      />
-    </svg>
-  );
-}
+const SvgPeopleRemoveIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg width="24px" height="24px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M8.8 5.6a2.4 2.4 0 1 0 0 4.8 2.4 2.4 0 0 0 0-4.8ZM4.8 8a4 4 0 1 1 8 0 4 4 0 0 1-8 0Zm-1.628 6.772A4 4 0 0 1 6 13.6h5.6a4 4 0 0 1 4 4v1.6a.8.8 0 0 1-1.6 0v-1.6a2.4 2.4 0 0 0-2.4-2.4H6a2.4 2.4 0 0 0-2.4 2.4v1.6a.8.8 0 0 1-1.6 0v-1.6a4 4 0 0 1 1.172-2.828ZM15.6 10.4a.8.8 0 0 0 0 1.6h4.8a.8.8 0 1 0 0-1.6h-4.8Z"
+      fill="currentColor"
+    />
+  </svg>
+);
 
 export default SvgPeopleRemoveIcon;

package/src/PersonContactIcon.tsx

@@ -1,16 +1,15 @@
 import * as React from 'react';
+import { SVGProps } from 'react';
 
-function SvgPersonContactIcon(props: React.SVGProps<SVGSVGElement>) {
-  return (
-    <svg width="24px" height="24px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M15.454 3c.452 0 .819.366.819.818v.818h1.636a2.46 2.46 0 012.455 2.455v11.454A2.46 2.46 0 0117.909 21H6.455A2.46 2.46 0 014 18.546V7.09a2.46 2.46 0 012.455-2.455H8.09v-.818a.818.818 0 011.636 0v.818h4.91v-.818c0-.452.366-.818.817-.818zm-9 3.273a.823.823 0 00-.818.818v11.454c0 .449.37.819.819.819h11.454c.448 0 .818-.37.818-.819V7.091a.823.823 0 00-.818-.818H6.455zm5.728 3.273a1.636 1.636 0 100 3.272 1.636 1.636 0 000-3.272zm-3.273 1.636a3.273 3.273 0 116.546 0 3.273 3.273 0 01-6.546 0zm3.273 4.09c-1.732 0-3.274.548-4.534 1.358a.818.818 0 00.885 1.376c1.032-.663 2.271-1.097 3.649-1.097 1.407 0 2.627.369 3.615 1.075a.818.818 0 00.951-1.332c-1.302-.93-2.865-1.38-4.566-1.38z"
-        fill="currentColor"
-      />
-    </svg>
-  );
-}
+const SvgPersonContactIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg width="24px" height="24px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M15.454 3c.452 0 .819.366.819.818v.818h1.636a2.46 2.46 0 0 1 2.455 2.455v11.454A2.46 2.46 0 0 1 17.909 21H6.455A2.46 2.46 0 0 1 4 18.546V7.09a2.46 2.46 0 0 1 2.455-2.455H8.09v-.818a.818.818 0 0 1 1.636 0v.818h4.91v-.818c0-.452.366-.818.817-.818Zm-9 3.273a.823.823 0 0 0-.818.818v11.454c0 .449.37.819.819.819h11.454c.448 0 .818-.37.818-.819V7.091a.823.823 0 0 0-.818-.818H6.455Zm5.728 3.273a1.636 1.636 0 1 0 0 3.272 1.636 1.636 0 0 0 0-3.272Zm-3.273 1.636a3.273 3.273 0 1 1 6.546 0 3.273 3.273 0 0 1-6.546 0Zm3.273 4.09c-1.732 0-3.274.548-4.534 1.358a.818.818 0 0 0 .885 1.376c1.032-.663 2.271-1.097 3.649-1.097 1.407 0 2.627.369 3.615 1.075a.818.818 0 0 0 .951-1.332c-1.302-.93-2.865-1.38-4.566-1.38Z"
+      fill="currentColor"
+    />
+  </svg>
+);
 
 export default SvgPersonContactIcon;

package/src/PersonIcon.tsx

@@ -1,16 +1,15 @@
 import * as React from 'react';
+import { SVGProps } from 'react';
 
-function SvgPersonIcon(props: React.SVGProps<SVGSVGElement>) {
-  return (
-    <svg width="24px" height="24px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M12 2.813a4.687 4.687 0 100 9.374 4.687 4.687 0 000-9.374zM9.746 5.245a3.188 3.188 0 114.508 4.508 3.188 3.188 0 01-4.508-4.508zM8.012 16.45a5.64 5.64 0 019.628 3.988.75.75 0 001.5 0 7.14 7.14 0 00-14.28 0 .75.75 0 001.5 0 5.64 5.64 0 011.652-3.988z"
-        fill="currentColor"
-      />
-    </svg>
-  );
-}
+const SvgPersonIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg width="24px" height="24px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M12 2.813a4.687 4.687 0 1 0 0 9.374 4.687 4.687 0 0 0 0-9.374ZM9.746 5.245a3.188 3.188 0 1 1 4.508 4.508 3.188 3.188 0 0 1-4.508-4.508ZM8.012 16.45a5.64 5.64 0 0 1 9.628 3.988.75.75 0 0 0 1.5 0 7.14 7.14 0 0 0-14.28 0 .75.75 0 0 0 1.5 0 5.64 5.64 0 0 1 1.652-3.988Z"
+      fill="currentColor"
+    />
+  </svg>
+);
 
 export default SvgPersonIcon;

package/src/PhoneIcon.tsx

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import { SVGProps } from 'react';
+
+const SvgPhoneIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg width="24px" height="24px" viewBox="0 0 14 18" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M1.636 2.455c0-.452.367-.819.819-.819h8.181c.452 0 .819.367.819.819v13.09a.818.818 0 0 1-.819.819H2.455a.818.818 0 0 1-.819-.819V2.456ZM2.455 0A2.455 2.455 0 0 0 0 2.455v13.09A2.455 2.455 0 0 0 2.455 18h8.181a2.454 2.454 0 0 0 2.455-2.454V2.455A2.455 2.455 0 0 0 10.636 0H2.455Zm4.09 13.09a.818.818 0 1 0 0 1.637h.009a.818.818 0 1 0 0-1.636h-.009Z"
+      fill="currentColor"
+    />
+  </svg>
+);
+
+export default SvgPhoneIcon;

package/src/PhotoIcon.tsx

@@ -1,16 +1,15 @@
 import * as React from 'react';
+import { SVGProps } from 'react';
 
-function SvgPhotoIcon(props: React.SVGProps<SVGSVGElement>) {
-  return (
-    <svg width="24px" height="24px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M6.4 5.6a.8.8 0 00-.8.8v11.2a.8.8 0 00.52.75l8.514-8.516a.8.8 0 011.132 0L18.4 12.47V6.4a.8.8 0 00-.8-.8H6.4zm12 9.131l-3.2-3.2L8.331 18.4H17.6a.8.8 0 00.8-.8v-2.869zM4 6.4A2.4 2.4 0 016.4 4h11.2A2.4 2.4 0 0120 6.4v11.2a2.4 2.4 0 01-2.4 2.4H6.4A2.4 2.4 0 014 17.6V6.4zm5.2 2.4a.4.4 0 100 .8.4.4 0 000-.8zm-2 .4a2 2 0 114 0 2 2 0 01-4 0z"
-        fill="currentColor"
-      />
-    </svg>
-  );
-}
+const SvgPhotoIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg width="24px" height="24px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M6.4 5.6a.8.8 0 0 0-.8.8v11.2a.8.8 0 0 0 .52.75l8.514-8.516a.8.8 0 0 1 1.132 0L18.4 12.47V6.4a.8.8 0 0 0-.8-.8H6.4Zm12 9.131-3.2-3.2L8.331 18.4H17.6a.8.8 0 0 0 .8-.8v-2.869ZM4 6.4A2.4 2.4 0 0 1 6.4 4h11.2A2.4 2.4 0 0 1 20 6.4v11.2a2.4 2.4 0 0 1-2.4 2.4H6.4A2.4 2.4 0 0 1 4 17.6V6.4Zm5.2 2.4a.4.4 0 1 0 0 .8.4.4 0 0 0 0-.8Zm-2 .4a2 2 0 1 1 4 0 2 2 0 0 1-4 0Z"
+      fill="currentColor"
+    />
+  </svg>
+);
 
 export default SvgPhotoIcon;

package/src/PipIcon.tsx

@@ -1,18 +1,17 @@
 import * as React from 'react';
+import { SVGProps } from 'react';
 
-function SvgPipIcon(props: React.SVGProps<SVGSVGElement>) {
-  return (
-    <svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24" fill="none" {...props}>
-      <path
-        d="M18.268 15.929h-7.893a2.72 2.72 0 01-2.732-2.72V7.744A2.744 2.744 0 0110.375 5h7.893A2.744 2.744 0 0121 7.744v5.465a2.72 2.72 0 01-2.732 2.72zM10.375 6.82a.923.923 0 00-.91.923v5.465a.91.91 0 00.91.898h7.893a.91.91 0 00.91-.898V7.744a.923.923 0 00-.91-.923h-7.893z"
-        fill="currentColor"
-      />
-      <path
-        d="M16.75 18.673a.91.91 0 01-.91.898H6.124A2.125 2.125 0 014 17.46v-7.286a.923.923 0 01.91-.923.923.923 0 01.911.923v7.286a.303.303 0 00.304.291h9.714a.923.923 0 01.911.923z"
-        fill="currentColor"
-      />
-    </svg>
-  );
-}
+const SvgPipIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24" fill="none" {...props}>
+    <path
+      d="M18.268 15.929h-7.893a2.72 2.72 0 0 1-2.732-2.72V7.744A2.744 2.744 0 0 1 10.375 5h7.893A2.744 2.744 0 0 1 21 7.744v5.465a2.72 2.72 0 0 1-2.732 2.72ZM10.375 6.82a.923.923 0 0 0-.91.923v5.465a.91.91 0 0 0 .91.898h7.893a.91.91 0 0 0 .91-.898V7.744a.923.923 0 0 0-.91-.923h-7.893Z"
+      fill="currentColor"
+    />
+    <path
+      d="M16.75 18.673a.91.91 0 0 1-.91.898H6.124A2.125 2.125 0 0 1 4 17.46v-7.286a.923.923 0 0 1 .91-.923.923.923 0 0 1 .911.923v7.286a.303.303 0 0 0 .304.291h9.714a.923.923 0 0 1 .911.923Z"
+      fill="currentColor"
+    />
+  </svg>
+);
 
 export default SvgPipIcon;

package/src/PlayCircleIcon.tsx

@@ -1,16 +1,15 @@
 import * as React from 'react';
+import { SVGProps } from 'react';
 
-function SvgPlayCircleIcon(props: React.SVGProps<SVGSVGElement>) {
-  return (
-    <svg width="24px" height="24px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M4.636 12a7.364 7.364 0 1114.728 0 7.364 7.364 0 01-14.728 0zM12 3a9 9 0 100 18 9 9 0 000-18zm-1.182 5.047a.818.818 0 00-1.273.68v6.546a.818.818 0 001.273.68l4.909-3.272a.818.818 0 000-1.362l-4.91-3.272zM13.798 12l-2.616 1.744v-3.488L13.798 12z"
-        fill="currentColor"
-      />
-    </svg>
-  );
-}
+const SvgPlayCircleIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg width="24px" height="24px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M4.636 12a7.364 7.364 0 1 1 14.728 0 7.364 7.364 0 0 1-14.728 0ZM12 3a9 9 0 1 0 0 18 9 9 0 0 0 0-18Zm-1.182 5.047a.818.818 0 0 0-1.273.68v6.546a.818.818 0 0 0 1.273.68l4.909-3.272a.818.818 0 0 0 0-1.362l-4.91-3.272ZM13.798 12l-2.616 1.744v-3.488L13.798 12Z"
+      fill="currentColor"
+    />
+  </svg>
+);
 
 export default SvgPlayCircleIcon;

package/src/PlayIcon.tsx

@@ -1,14 +1,13 @@
 import * as React from 'react';
+import { SVGProps } from 'react';
 
-function SvgPlayIcon(props: React.SVGProps<SVGSVGElement>) {
-  return (
-    <svg width="24px" height="24px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
-      <path
-        d="M12 4.125a7.875 7.875 0 100 15.75 7.875 7.875 0 000-15.75zm3.572 8.57l-4.5 3.094a.84.84 0 01-.801.085.842.842 0 01-.521-.78V8.906a.844.844 0 011.322-.695l4.5 3.094a.845.845 0 010 1.39z"
-        fill="currentColor"
-      />
-    </svg>
-  );
-}
+const SvgPlayIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg width="24px" height="24px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <path
+      d="M12 4.125a7.875 7.875 0 1 0 0 15.75 7.875 7.875 0 0 0 0-15.75Zm3.572 8.57-4.5 3.094a.84.84 0 0 1-.801.085.842.842 0 0 1-.521-.78V8.906a.844.844 0 0 1 1.322-.695l4.5 3.094a.845.845 0 0 1 0 1.39Z"
+      fill="currentColor"
+    />
+  </svg>
+);
 
 export default SvgPlayIcon;

package/src/PlaySolidIcon.tsx

@@ -1,14 +1,13 @@
 import * as React from 'react';
+import { SVGProps } from 'react';
 
-function SvgPlaySolidIcon(props: React.SVGProps<SVGSVGElement>) {
-  return (
-    <svg width="24px" height="24px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
-      <path
-        d="M12 4.125a7.875 7.875 0 100 15.75 7.875 7.875 0 000-15.75zm3.572 8.57l-4.5 3.094a.84.84 0 01-.801.085.842.842 0 01-.521-.78V8.906a.844.844 0 011.322-.695l4.5 3.094a.845.845 0 010 1.39z"
-        fill="currentColor"
-      />
-    </svg>
-  );
-}
+const SvgPlaySolidIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg width="24px" height="24px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <path
+      d="M12 4.125a7.875 7.875 0 1 0 0 15.75 7.875 7.875 0 0 0 0-15.75Zm3.572 8.57-4.5 3.094a.84.84 0 0 1-.801.085.842.842 0 0 1-.521-.78V8.906a.844.844 0 0 1 1.322-.695l4.5 3.094a.845.845 0 0 1 0 1.39Z"
+      fill="currentColor"
+    />
+  </svg>
+);
 
 export default SvgPlaySolidIcon;

package/src/PlaylistIcon.tsx

@@ -1,14 +1,13 @@
 import * as React from 'react';
+import { SVGProps } from 'react';
 
-function SvgPlaylistIcon(props: React.SVGProps<SVGSVGElement>) {
-  return (
-    <svg width="24px" height="24px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
-      <path
-        d="M5.897 6.795h12.206a.897.897 0 000-1.795H5.897a.897.897 0 100 1.795zM18.102 8.949H12a.898.898 0 000 1.795h6.102a.897.897 0 100-1.795zM18.102 13.256H12a.898.898 0 000 1.795h6.102a.897.897 0 000-1.795zM18.103 17.205H5.897a.897.897 0 100 1.795h12.206a.897.897 0 000-1.795zM5.982 9.183a.718.718 0 00-.444.663v4.308a.718.718 0 001.227.508l2.154-2.154a.718.718 0 000-1.016L6.765 9.338a.718.718 0 00-.783-.155z"
-        fill="currentColor"
-      />
-    </svg>
-  );
-}
+const SvgPlaylistIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg width="24px" height="24px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <path
+      d="M5.897 6.795h12.206a.897.897 0 0 0 0-1.795H5.897a.897.897 0 1 0 0 1.795ZM18.102 8.949H12a.898.898 0 0 0 0 1.795h6.102a.897.897 0 1 0 0-1.795ZM18.102 13.256H12a.898.898 0 0 0 0 1.795h6.102a.897.897 0 0 0 0-1.795ZM18.103 17.205H5.897a.897.897 0 1 0 0 1.795h12.206a.897.897 0 0 0 0-1.795ZM5.982 9.183a.718.718 0 0 0-.444.663v4.308a.718.718 0 0 0 1.227.508l2.154-2.154a.718.718 0 0 0 0-1.016L6.765 9.338a.718.718 0 0 0-.783-.155Z"
+      fill="currentColor"
+    />
+  </svg>
+);
 
 export default SvgPlaylistIcon;

package/src/PoorConnectivityIcon.tsx

@@ -1,16 +1,15 @@
 import * as React from 'react';
+import { SVGProps } from 'react';
 
-function SvgPoorConnectivityIcon(props: React.SVGProps<SVGSVGElement>) {
-  return (
-    <svg width="24px" height="24px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M3.046 3.046a.75.75 0 000 1.06l16.847 16.848a.75.75 0 101.06-1.06L4.108 3.045a.75.75 0 00-1.06 0zm.256 6.303a13.888 13.888 0 012.175-1.432l1.356 1.356c-.847.401-1.65.902-2.391 1.497a.91.91 0 01-1.14-1.42zm2.066 3.625A9.79 9.79 0 018.57 11.01l1.451 1.451a7.969 7.969 0 00-3.42 1.854.91.91 0 11-1.233-1.34zm7.503-2.543l2.563 2.563a7.968 7.968 0 011.927 1.297.91.91 0 101.227-1.346 9.79 9.79 0 00-5.717-2.514zm2.391 7.271L12.05 14.49h-.057a5.698 5.698 0 00-1.752.277c-.852.276-1.63.75-2.267 1.386a.91.91 0 101.286 1.29 3.878 3.878 0 013.66-1.019c.683.17 1.308.521 1.807 1.019.15.15.34.236.535.259zM9.048 6.608l1.582 1.583a12.07 12.07 0 018.928 2.584.91.91 0 001.14-1.42 13.89 13.89 0 00-11.65-2.747z"
-        fill="currentColor"
-      />
-    </svg>
-  );
-}
+const SvgPoorConnectivityIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg width="24px" height="24px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M3.046 3.046a.75.75 0 0 0 0 1.06l16.847 16.848a.75.75 0 1 0 1.06-1.06L4.108 3.045a.75.75 0 0 0-1.06 0Zm.256 6.303a13.888 13.888 0 0 1 2.175-1.432l1.356 1.356c-.847.401-1.65.902-2.391 1.497a.91.91 0 0 1-1.14-1.42Zm2.066 3.625A9.79 9.79 0 0 1 8.57 11.01l1.451 1.451a7.969 7.969 0 0 0-3.42 1.854.91.91 0 1 1-1.233-1.34Zm7.503-2.543 2.563 2.563a7.968 7.968 0 0 1 1.927 1.297.91.91 0 1 0 1.227-1.346 9.79 9.79 0 0 0-5.717-2.514Zm2.391 7.271L12.05 14.49h-.057a5.698 5.698 0 0 0-1.752.277c-.852.276-1.63.75-2.267 1.386a.91.91 0 1 0 1.286 1.29 3.878 3.878 0 0 1 3.66-1.019c.683.17 1.308.521 1.807 1.019.15.15.34.236.535.259ZM9.048 6.608l1.582 1.583a12.07 12.07 0 0 1 8.928 2.584.91.91 0 0 0 1.14-1.42 13.89 13.89 0 0 0-11.65-2.747Z"
+      fill="currentColor"
+    />
+  </svg>
+);
 
 export default SvgPoorConnectivityIcon;

package/src/PoorConnectivitySolidIcon.tsx

@@ -1,16 +1,15 @@
 import * as React from 'react';
+import { SVGProps } from 'react';
 
-function SvgPoorConnectivitySolidIcon(props: React.SVGProps<SVGSVGElement>) {
-  return (
-    <svg width="24px" height="24px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10zM6.03 6.738a.5.5 0 01.708-.707l11.231 11.231a.5.5 0 01-.707.707L6.031 6.738zm1.621 2.54c-.51.27-.995.59-1.45.955a.607.607 0 10.76.947 8.042 8.042 0 011.594-.998l-.904-.904zm2.062 2.062a6.527 6.527 0 00-2.134 1.31.607.607 0 00.822.893 5.311 5.311 0 012.28-1.236l-.968-.967zm4.576 1.322l-1.708-1.708a6.527 6.527 0 013.81 1.676.607.607 0 01-.817.898 5.314 5.314 0 00-1.285-.866zm-2.255.998l2.14 2.141a.604.604 0 01-.356-.172 2.585 2.585 0 00-2.44-.68 2.584 2.584 0 00-1.205.68.607.607 0 01-.857-.86 3.8 3.8 0 012.68-1.109h.037zm-.947-4.2l-1.055-1.055a9.258 9.258 0 017.767 1.832.607.607 0 11-.76.947 8.045 8.045 0 00-5.952-1.724z"
-        fill="currentColor"
-      />
-    </svg>
-  );
-}
+const SvgPoorConnectivitySolidIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg width="24px" height="24px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10ZM6.03 6.738a.5.5 0 0 1 .708-.707l11.231 11.231a.5.5 0 0 1-.707.707L6.031 6.738Zm1.621 2.54c-.51.27-.995.59-1.45.955a.607.607 0 1 0 .76.947 8.042 8.042 0 0 1 1.594-.998l-.904-.904Zm2.062 2.062a6.527 6.527 0 0 0-2.134 1.31.607.607 0 0 0 .822.893 5.311 5.311 0 0 1 2.28-1.236l-.968-.967Zm4.576 1.322-1.708-1.708a6.527 6.527 0 0 1 3.81 1.676.607.607 0 0 1-.817.898 5.314 5.314 0 0 0-1.285-.866Zm-2.255.998 2.14 2.141a.604.604 0 0 1-.356-.172 2.585 2.585 0 0 0-2.44-.68 2.584 2.584 0 0 0-1.205.68.607.607 0 0 1-.857-.86 3.8 3.8 0 0 1 2.68-1.109h.037Zm-.947-4.2-1.055-1.055a9.258 9.258 0 0 1 7.767 1.832.607.607 0 1 1-.76.947 8.045 8.045 0 0 0-5.952-1.724Z"
+      fill="currentColor"
+    />
+  </svg>
+);
 
 export default SvgPoorConnectivitySolidIcon;

package/src/PrevIcon.tsx

@@ -1,14 +1,13 @@
 import * as React from 'react';
+import { SVGProps } from 'react';
 
-function SvgPrevIcon(props: React.SVGProps<SVGSVGElement>) {
-  return (
-    <svg width="24px" height="24px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
-      <path
-        d="M10.168 13.392l6.423 5.273A1.473 1.473 0 0019 17.531V6.449a1.474 1.474 0 00-2.408-1.135l-6.424 5.274a1.81 1.81 0 000 2.798v.006zM8.004 19H5V4.98h3.004V19z"
-        fill="currentColor"
-      />
-    </svg>
-  );
-}
+const SvgPrevIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg width="24px" height="24px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <path
+      d="m10.168 13.392 6.423 5.273A1.473 1.473 0 0 0 19 17.531V6.449a1.474 1.474 0 0 0-2.408-1.135l-6.424 5.274a1.81 1.81 0 0 0 0 2.798v.006ZM8.004 19H5V4.98h3.004V19Z"
+      fill="currentColor"
+    />
+  </svg>
+);
 
 export default SvgPrevIcon;

package/src/QrCodeIcon.tsx

@@ -1,16 +1,15 @@
 import * as React from 'react';
+import { SVGProps } from 'react';
 
-function SvgQrCodeIcon(props: React.SVGProps<SVGSVGElement>) {
-  return (
-    <svg width="24px" height="24px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M3 3.818C3 3.366 3.366 3 3.818 3h6.546c.451 0 .818.366.818.818v6.546a.818.818 0 01-.818.818H3.818A.818.818 0 013 10.364V3.818zm1.636.818v4.91h4.91v-4.91h-4.91zm1.637 2.455c0-.452.366-.818.818-.818h.008a.818.818 0 010 1.636h-.008a.818.818 0 01-.818-.818zM13.636 3a.818.818 0 00-.818.818v6.546c0 .451.367.818.818.818h6.546a.818.818 0 00.818-.818V3.818A.818.818 0 0020.182 3h-6.546zm.819 6.545V4.636h4.909v4.91h-4.91zm1.636-2.454c0-.452.366-.818.818-.818h.008a.818.818 0 110 1.636h-.008a.818.818 0 01-.818-.818zM3.818 12.818a.818.818 0 00-.818.818v6.546c0 .452.366.818.818.818h6.546a.818.818 0 00.818-.818v-6.546a.818.818 0 00-.818-.818H3.818zm.818 6.546v-4.91h4.91v4.91h-4.91zm1.637-2.455c0-.452.366-.818.818-.818h.008a.818.818 0 010 1.636h-.008a.818.818 0 01-.818-.818zm7.363-4.09a.818.818 0 100 1.635h.009a.818.818 0 000-1.636h-.009zm2.455 4.09c0-.452.366-.818.818-.818h.008a.818.818 0 010 1.636h-.008a.818.818 0 01-.818-.818zm4.909 0a.818.818 0 00-1.636 0v2.455h-2.455a.818.818 0 100 1.636h3.273a.818.818 0 00.818-.818v-3.273zm-7.364-.818c.452 0 .819.366.819.818v3.273a.818.818 0 01-1.637 0v-3.273c0-.452.367-.818.818-.818zm3.273-3.273a.818.818 0 100 1.636h3.273a.818.818 0 100-1.636h-3.273z"
-        fill="currentColor"
-      />
-    </svg>
-  );
-}
+const SvgQrCodeIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg width="24px" height="24px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M3 3.818C3 3.366 3.366 3 3.818 3h6.546c.451 0 .818.366.818.818v6.546a.818.818 0 0 1-.818.818H3.818A.818.818 0 0 1 3 10.364V3.818Zm1.636.818v4.91h4.91v-4.91h-4.91Zm1.637 2.455c0-.452.366-.818.818-.818h.008a.818.818 0 0 1 0 1.636h-.008a.818.818 0 0 1-.818-.818ZM13.636 3a.818.818 0 0 0-.818.818v6.546c0 .451.367.818.818.818h6.546a.818.818 0 0 0 .818-.818V3.818A.818.818 0 0 0 20.182 3h-6.546Zm.819 6.545V4.636h4.909v4.91h-4.91Zm1.636-2.454c0-.452.366-.818.818-.818h.008a.818.818 0 1 1 0 1.636h-.008a.818.818 0 0 1-.818-.818ZM3.818 12.818a.818.818 0 0 0-.818.818v6.546c0 .452.366.818.818.818h6.546a.818.818 0 0 0 .818-.818v-6.546a.818.818 0 0 0-.818-.818H3.818Zm.818 6.546v-4.91h4.91v4.91h-4.91Zm1.637-2.455c0-.452.366-.818.818-.818h.008a.818.818 0 0 1 0 1.636h-.008a.818.818 0 0 1-.818-.818Zm7.363-4.09a.818.818 0 1 0 0 1.635h.009a.818.818 0 0 0 0-1.636h-.009Zm2.455 4.09c0-.452.366-.818.818-.818h.008a.818.818 0 0 1 0 1.636h-.008a.818.818 0 0 1-.818-.818Zm4.909 0a.818.818 0 0 0-1.636 0v2.455h-2.455a.818.818 0 1 0 0 1.636h3.273a.818.818 0 0 0 .818-.818v-3.273Zm-7.364-.818c.452 0 .819.366.819.818v3.273a.818.818 0 0 1-1.637 0v-3.273c0-.452.367-.818.818-.818Zm3.273-3.273a.818.818 0 1 0 0 1.636h3.273a.818.818 0 1 0 0-1.636h-3.273Z"
+      fill="currentColor"
+    />
+  </svg>
+);
 
 export default SvgQrCodeIcon;

package/src/QuestionIcon.tsx

@@ -1,16 +1,15 @@
 import * as React from 'react';
+import { SVGProps } from 'react';
 
-function SvgQuestionIcon(props: React.SVGProps<SVGSVGElement>) {
-  return (
-    <svg width="24px" height="24px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M12 4.636a7.364 7.364 0 100 14.728 7.364 7.364 0 000-14.728zM3 12a9 9 0 1118 0 9 9 0 01-18 0zm9.211-3.253a1.637 1.637 0 00-1.82 1.07.818.818 0 11-1.544-.543 3.273 3.273 0 016.36 1.09c0 1.252-.928 2.08-1.591 2.521a6.593 6.593 0 01-1.38.694l-.028.01-.01.003-.002.002h-.002l-.26-.776.26.776a.818.818 0 01-.519-1.552l.013-.004.06-.023a4.954 4.954 0 00.96-.492c.564-.375.863-.776.863-1.16a1.636 1.636 0 00-1.36-1.616zM12 15.273a.818.818 0 100 1.636h.008a.818.818 0 100-1.636H12z"
-        fill="currentColor"
-      />
-    </svg>
-  );
-}
+const SvgQuestionIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg width="24px" height="24px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M12 4.636a7.364 7.364 0 1 0 0 14.728 7.364 7.364 0 0 0 0-14.728ZM3 12a9 9 0 1 1 18 0 9 9 0 0 1-18 0Zm9.211-3.253a1.637 1.637 0 0 0-1.82 1.07.818.818 0 1 1-1.544-.543 3.273 3.273 0 0 1 6.36 1.09c0 1.252-.928 2.08-1.591 2.521a6.593 6.593 0 0 1-1.38.694l-.028.01-.01.003-.002.002h-.002l-.26-.776.26.776a.818.818 0 0 1-.519-1.552l.013-.004.06-.023a4.954 4.954 0 0 0 .96-.492c.564-.375.863-.776.863-1.16a1.636 1.636 0 0 0-1.36-1.616ZM12 15.273a.818.818 0 1 0 0 1.636h.008a.818.818 0 1 0 0-1.636H12Z"
+      fill="currentColor"
+    />
+  </svg>
+);
 
 export default SvgQuestionIcon;