@abqm-ds/icons 1.0.14 → 1.0.16

package/src/components/icons/BarChartIcon.tsx

@@ -0,0 +1,17 @@
+import type { SVGProps } from 'react';
+const BarChartIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="1em"
+    height="1em"
+    fill="none"
+    viewBox="0 0 24 24"
+    {...props}
+  >
+    <path
+      fill={props?.fill ? props.fill : '#1E1E1E'}
+      d="M6 16.5H3V21h3zm7.5-6h-3V21h3zM21 3v18h-3V3zm-3-1.5A1.5 1.5 0 0 0 16.5 3v18a1.5 1.5 0 0 0 1.5 1.5h3a1.5 1.5 0 0 0 1.5-1.5V3A1.5 1.5 0 0 0 21 1.5zm-9 9A1.5 1.5 0 0 1 10.5 9h3a1.5 1.5 0 0 1 1.5 1.5V21a1.5 1.5 0 0 1-1.5 1.5h-3A1.5 1.5 0 0 1 9 21zm-7.5 6A1.5 1.5 0 0 1 3 15h3a1.5 1.5 0 0 1 1.5 1.5V21A1.5 1.5 0 0 1 6 22.5H3A1.5 1.5 0 0 1 1.5 21z"
+    />
+  </svg>
+);
+export default BarChartIcon;

package/src/components/icons/BoxArrowInLeftIcon.tsx

@@ -0,0 +1,25 @@
+import type { SVGProps } from 'react';
+const BoxArrowInLeftIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="1em"
+    height="1em"
+    fill="none"
+    viewBox="0 0 24 24"
+    {...props}
+  >
+    <path
+      fill={props?.fill ? props.fill : '#1E1E1E'}
+      fillRule="evenodd"
+      d="M15 5.25a.75.75 0 0 0-.75-.75h-12a.75.75 0 0 0-.75.75v13.5a.75.75 0 0 0 .75.75h12a.75.75 0 0 0 .75-.75v-3a.75.75 0 1 1 1.5 0v3A2.25 2.25 0 0 1 14.25 21h-12A2.25 2.25 0 0 1 0 18.75V5.25A2.25 2.25 0 0 1 2.25 3h12a2.25 2.25 0 0 1 2.25 2.25v3a.75.75 0 1 1-1.5 0z"
+      clipRule="evenodd"
+    />
+    <path
+      fill={props?.fill ? props.fill : '#1E1E1E'}
+      fillRule="evenodd"
+      d="M6.219 12.531a.75.75 0 0 1 0-1.062l4.5-4.5a.75.75 0 1 1 1.062 1.062L8.56 11.25H21.75a.75.75 0 1 1 0 1.5H8.56l3.22 3.219a.752.752 0 0 1-1.061 1.062z"
+      clipRule="evenodd"
+    />
+  </svg>
+);
+export default BoxArrowInLeftIcon;

package/src/components/icons/BroadcastIcon.tsx

@@ -0,0 +1,24 @@
+import type { SVGProps } from 'react';
+const BroadcastIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="1em"
+    height="1em"
+    fill="none"
+    viewBox="0 0 24 24"
+    {...props}
+  >
+    <g clipPath="url(#Broadcast_svg__a)">
+      <path
+        fill={props?.fill ? props.fill : '#1E1E1E'}
+        d="M4.575 4.575a10.5 10.5 0 0 0 0 14.85.75.75 0 0 1-1.06 1.06 12 12 0 0 1 0-16.97.75.75 0 0 1 1.06 1.06m3.183 3.183a6 6 0 0 0 0 8.484.75.75 0 1 1-1.062 1.062 7.5 7.5 0 0 1 0-10.608.75.75 0 1 1 1.062 1.062m8.484-1.062a.75.75 0 0 1 1.062 0 7.5 7.5 0 0 1 0 10.608.752.752 0 0 1-1.062-1.062 6 6 0 0 0 0-8.484.75.75 0 0 1 0-1.062m3.183-3.18a.75.75 0 0 1 1.06 0 12 12 0 0 1 0 16.97.75.75 0 0 1-1.06-1.061 10.5 10.5 0 0 0 0-14.85.75.75 0 0 1 0-1.06zM15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0"
+      />
+    </g>
+    <defs>
+      <clipPath id="Broadcast_svg__a">
+        <path fill={props?.fill ? props.fill : '#fff'} d="M0 0h24v24H0z" />
+      </clipPath>
+    </defs>
+  </svg>
+);
+export default BroadcastIcon;

package/src/components/icons/CaretDownFillIcon.tsx

@@ -0,0 +1,17 @@
+import type { SVGProps } from 'react';
+const CaretDownFillIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="1em"
+    height="1em"
+    fill="none"
+    viewBox="0 0 24 24"
+    {...props}
+  >
+    <path
+      fill={props?.fill ? props.fill : '#1E1E1E'}
+      d="M10.87 16.71 3.678 8.487C2.827 7.519 3.517 6 4.806 6h14.388a1.5 1.5 0 0 1 1.13 2.489l-7.195 8.22a1.5 1.5 0 0 1-2.258 0z"
+    />
+  </svg>
+);
+export default CaretDownFillIcon;

package/src/components/icons/CaretLeftFillIcon.tsx

@@ -0,0 +1,17 @@
+import type { SVGProps } from 'react';
+const CaretLeftFillIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="1em"
+    height="1em"
+    fill="none"
+    viewBox="0 0 24 24"
+    {...props}
+  >
+    <path
+      fill={props?.fill ? props.fill : '#1E1E1E'}
+      d="m5.79 13.13 8.223 7.193c.969.85 2.487.16 2.487-1.129V4.806a1.5 1.5 0 0 0-2.488-1.13l-8.22 7.195a1.5 1.5 0 0 0 0 2.258z"
+    />
+  </svg>
+);
+export default CaretLeftFillIcon;

package/src/components/icons/CaretRightFillIcon.tsx

@@ -0,0 +1,17 @@
+import type { SVGProps } from 'react';
+const CaretRightFillIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="1em"
+    height="1em"
+    fill="none"
+    viewBox="0 0 24 24"
+    {...props}
+  >
+    <path
+      fill={props?.fill ? props.fill : '#1E1E1E'}
+      d="m18.21 13.13-8.223 7.193c-.969.85-2.487.16-2.487-1.129V4.806a1.5 1.5 0 0 1 2.489-1.13l8.22 7.195a1.5 1.5 0 0 1 0 2.258z"
+    />
+  </svg>
+);
+export default CaretRightFillIcon;

package/src/components/icons/CircleIcon.tsx

@@ -0,0 +1,24 @@
+import type { SVGProps } from 'react';
+const CircleIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="1em"
+    height="1em"
+    fill="none"
+    viewBox="0 0 24 24"
+    {...props}
+  >
+    <g clipPath="url(#circle_svg__a)">
+      <path
+        fill={props?.fill ? props.fill : '#1E1E1E'}
+        d="M12 22.5a10.5 10.5 0 1 1 0-21 10.5 10.5 0 0 1 0 21m0 1.5a12 12 0 1 0 0-24 12 12 0 0 0 0 24"
+      />
+    </g>
+    <defs>
+      <clipPath id="circle_svg__a">
+        <path fill={props?.fill ? props.fill : '#fff'} d="M0 0h24v24H0z" />
+      </clipPath>
+    </defs>
+  </svg>
+);
+export default CircleIcon;

package/src/components/icons/FacebookIcon.tsx

@@ -0,0 +1,24 @@
+import type { SVGProps } from 'react';
+const FacebookIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="1em"
+    height="1em"
+    fill="none"
+    viewBox="0 0 24 24"
+    {...props}
+  >
+    <g clipPath="url(#facebook_svg__a)">
+      <path
+        fill={props?.fill ? props.fill : '#1E1E1E'}
+        d="M24 12.074C24 5.403 18.627-.002 12-.002 5.37 0-.003 5.405-.003 12.075c0 6.026 4.39 11.02 10.125 11.927v-8.438H7.077v-3.489h3.048V9.413c0-3.026 1.793-4.697 4.533-4.697 1.314 0 2.687.236 2.687.236v2.97H15.83c-1.49 0-1.954.931-1.954 1.887v2.265h3.327l-.531 3.489h-2.798V24C19.611 23.094 24 18.099 24 12.074"
+      />
+    </g>
+    <defs>
+      <clipPath id="facebook_svg__a">
+        <path fill={props?.fill ? props.fill : '#fff'} d="M0 0h24v24H0z" />
+      </clipPath>
+    </defs>
+  </svg>
+);
+export default FacebookIcon;

package/src/components/icons/FileEarmarkTextIcon.tsx

@@ -0,0 +1,21 @@
+import type { SVGProps } from 'react';
+const FileEarmarkTextIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="1em"
+    height="1em"
+    fill="none"
+    viewBox="0 0 24 24"
+    {...props}
+  >
+    <path
+      fill={props?.fill ? props.fill : '#1E1E1E'}
+      d="M8.25 10.5a.75.75 0 1 0 0 1.5h7.5a.75.75 0 1 0 0-1.5zm-.75 3.75a.75.75 0 0 1 .75-.75h7.5a.75.75 0 1 1 0 1.5h-7.5a.75.75 0 0 1-.75-.75m0 3a.75.75 0 0 1 .75-.75h3a.75.75 0 1 1 0 1.5h-3a.75.75 0 0 1-.75-.75"
+    />
+    <path
+      fill={props?.fill ? props.fill : '#1E1E1E'}
+      d="M14.25 0H6a3 3 0 0 0-3 3v18a3 3 0 0 0 3 3h12a3 3 0 0 0 3-3V6.75zm0 1.5v3a2.25 2.25 0 0 0 2.25 2.25h3V21a1.5 1.5 0 0 1-1.5 1.5H6A1.5 1.5 0 0 1 4.5 21V3A1.5 1.5 0 0 1 6 1.5z"
+    />
+  </svg>
+);
+export default FileEarmarkTextIcon;

package/src/components/icons/FileTextIcon.tsx

@@ -0,0 +1,21 @@
+import type { SVGProps } from 'react';
+const FileTextIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="1em"
+    height="1em"
+    fill="none"
+    viewBox="0 0 24 24"
+    {...props}
+  >
+    <path
+      fill={props?.fill ? props.fill : '#1E1E1E'}
+      d="M7.5 6a.75.75 0 0 0 0 1.5h9a.75.75 0 1 0 0-1.5zm-.75 3.75A.75.75 0 0 1 7.5 9h9a.75.75 0 1 1 0 1.5h-9a.75.75 0 0 1-.75-.75M7.5 12a.75.75 0 1 0 0 1.5h9a.75.75 0 1 0 0-1.5zm0 3a.75.75 0 1 0 0 1.5H12a.75.75 0 1 0 0-1.5z"
+    />
+    <path
+      fill={props?.fill ? props.fill : '#1E1E1E'}
+      d="M3 3a3 3 0 0 1 3-3h12a3 3 0 0 1 3 3v18a3 3 0 0 1-3 3H6a3 3 0 0 1-3-3zm15-1.5H6A1.5 1.5 0 0 0 4.5 3v18A1.5 1.5 0 0 0 6 22.5h12a1.5 1.5 0 0 0 1.5-1.5V3A1.5 1.5 0 0 0 18 1.5"
+    />
+  </svg>
+);
+export default FileTextIcon;

package/src/components/icons/FilterIcon.tsx

@@ -0,0 +1,17 @@
+import type { SVGProps } from 'react';
+const FilterIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="1em"
+    height="1em"
+    fill="none"
+    viewBox="0 0 24 24"
+    {...props}
+  >
+    <path
+      fill={props?.fill ? props.fill : '#1E1E1E'}
+      d="M9 15.75a.75.75 0 0 1 .75-.75h4.5a.75.75 0 1 1 0 1.5h-4.5a.75.75 0 0 1-.75-.75m-3-4.5a.75.75 0 0 1 .75-.75h10.5a.75.75 0 1 1 0 1.5H6.75a.75.75 0 0 1-.75-.75m-3-4.5A.75.75 0 0 1 3.75 6h16.5a.75.75 0 1 1 0 1.5H3.75A.75.75 0 0 1 3 6.75"
+    />
+  </svg>
+);
+export default FilterIcon;

package/src/components/icons/GoogleColorIcon.tsx

@@ -0,0 +1,28 @@
+import type { SVGProps } from 'react';
+const GoogleColorIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="1em"
+    height="1em"
+    viewBox="0 0 48 48"
+    {...props}
+  >
+    <path
+      fill={props?.fill ? props.fill : '#FFC107'}
+      d="M43.611 20.083H42V20H24v8h11.303c-1.649 4.657-6.08 8-11.303 8-6.627 0-12-5.373-12-12s5.373-12 12-12c3.059 0 5.842 1.154 7.961 3.039l5.657-5.657C34.046 6.053 29.268 4 24 4 12.955 4 4 12.955 4 24s8.955 20 20 20 20-8.955 20-20c0-1.341-.138-2.65-.389-3.917"
+    />
+    <path
+      fill={props?.fill ? props.fill : '#FF3D00'}
+      d="m6.306 14.691 6.571 4.819C14.655 15.108 18.961 12 24 12c3.059 0 5.842 1.154 7.961 3.039l5.657-5.657C34.046 6.053 29.268 4 24 4 16.318 4 9.656 8.337 6.306 14.691"
+    />
+    <path
+      fill={props?.fill ? props.fill : '#4CAF50'}
+      d="M24 44c5.166 0 9.86-1.977 13.409-5.192l-6.19-5.238A11.9 11.9 0 0 1 24 36c-5.202 0-9.619-3.317-11.283-7.946l-6.522 5.025C9.505 39.556 16.227 44 24 44"
+    />
+    <path
+      fill={props?.fill ? props.fill : '#1976D2'}
+      d="M43.611 20.083H42V20H24v8h11.303a12.04 12.04 0 0 1-4.087 5.571l.003-.002 6.19 5.238C36.971 39.205 44 34 44 24c0-1.341-.138-2.65-.389-3.917"
+    />
+  </svg>
+);
+export default GoogleColorIcon;

package/src/components/icons/GoogleIcon.tsx

@@ -0,0 +1,24 @@
+import type { SVGProps } from 'react';
+const GoogleIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="1em"
+    height="1em"
+    fill="none"
+    viewBox="0 0 24 24"
+    {...props}
+  >
+    <g clipPath="url(#google_svg__a)">
+      <path
+        fill={props?.fill ? props.fill : '#1E1E1E'}
+        d="M23.318 9.837c.14.806.21 1.622.208 2.44 0 3.65-1.305 6.737-3.576 8.827h.003C17.967 22.938 15.237 24 12 24a12 12 0 0 1 0-24 11.53 11.53 0 0 1 8.028 3.123L16.602 6.55A6.52 6.52 0 0 0 12 4.75c-3.13 0-5.79 2.112-6.738 4.956a7.2 7.2 0 0 0 0 4.595h.005c.952 2.84 3.607 4.951 6.738 4.951 1.616 0 3.005-.414 4.082-1.146h-.004a5.55 5.55 0 0 0 2.399-3.646H12v-4.62h11.317z"
+      />
+    </g>
+    <defs>
+      <clipPath id="google_svg__a">
+        <path fill={props?.fill ? props.fill : '#fff'} d="M0 0h24v24H0z" />
+      </clipPath>
+    </defs>
+  </svg>
+);
+export default GoogleIcon;

package/src/components/icons/InstagramIcon.tsx

@@ -0,0 +1,24 @@
+import type { SVGProps } from 'react';
+const InstagramIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="1em"
+    height="1em"
+    fill="none"
+    viewBox="0 0 24 24"
+    {...props}
+  >
+    <g clipPath="url(#instagram_svg__a)">
+      <path
+        fill={props?.fill ? props.fill : '#1E1E1E'}
+        d="M12 0C8.743 0 8.334.015 7.055.072 5.775.132 4.904.333 4.14.63c-.8.301-1.526.774-2.125 1.385A5.9 5.9 0 0 0 .63 4.14c-.297.762-.5 1.635-.558 2.91C.015 8.332 0 8.74 0 12.002c0 3.257.015 3.665.072 4.945.06 1.278.261 2.15.558 2.913a5.9 5.9 0 0 0 1.385 2.125 5.86 5.86 0 0 0 2.123 1.385c.766.297 1.636.5 2.914.558C8.332 23.985 8.74 24 12 24s3.666-.015 4.947-.072c1.277-.06 2.151-.261 2.915-.558a5.9 5.9 0 0 0 2.124-1.385 5.9 5.9 0 0 0 1.384-2.125c.296-.764.498-1.635.558-2.913.057-1.28.072-1.687.072-4.947s-.015-3.668-.072-4.948c-.06-1.277-.262-2.15-.558-2.912a5.9 5.9 0 0 0-1.385-2.125A5.9 5.9 0 0 0 19.86.63c-.765-.297-1.638-.5-2.915-.558C15.666.015 15.259 0 11.997 0h.005zm-1.075 2.163H12c3.205 0 3.584.01 4.849.069 1.17.052 1.805.249 2.228.412.56.218.96.479 1.38.899s.68.819.898 1.38c.164.422.36 1.058.412 2.228.058 1.264.07 1.643.07 4.846s-.012 3.584-.07 4.848c-.053 1.17-.249 1.805-.413 2.228-.192.52-.499.992-.898 1.378-.42.42-.819.68-1.38.897-.42.165-1.056.36-2.228.414-1.264.057-1.643.07-4.847.07s-3.586-.013-4.85-.07c-1.17-.054-1.804-.249-2.227-.414a3.7 3.7 0 0 1-1.38-.897 3.7 3.7 0 0 1-.9-1.38c-.164-.422-.36-1.058-.413-2.228-.057-1.264-.069-1.643-.069-4.849 0-3.204.012-3.582.069-4.846.054-1.17.249-1.806.414-2.23.218-.559.478-.96.899-1.38.42-.42.819-.679 1.38-.896.423-.165 1.057-.36 2.227-.414 1.107-.052 1.536-.066 3.773-.068zm7.482 1.992a1.44 1.44 0 1 0 0 2.88 1.44 1.44 0 0 0 0-2.88m-6.405 1.683a6.163 6.163 0 1 0-.193 12.325 6.163 6.163 0 0 0 .193-12.325m0 2.162a4 4 0 1 1 0 8 4 4 0 0 1 0-8"
+      />
+    </g>
+    <defs>
+      <clipPath id="instagram_svg__a">
+        <path fill={props?.fill ? props.fill : '#fff'} d="M0 0h24v24H0z" />
+      </clipPath>
+    </defs>
+  </svg>
+);
+export default InstagramIcon;

package/src/components/icons/ListIcon.tsx

@@ -0,0 +1,19 @@
+import type { SVGProps } from 'react';
+const ListIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="1em"
+    height="1em"
+    fill="none"
+    viewBox="0 0 24 24"
+    {...props}
+  >
+    <path
+      fill={props?.fill ? props.fill : '#1E1E1E'}
+      fillRule="evenodd"
+      d="M3.75 18a.75.75 0 0 1 .75-.75h15a.75.75 0 1 1 0 1.5h-15a.75.75 0 0 1-.75-.75m0-6a.75.75 0 0 1 .75-.75h15a.75.75 0 1 1 0 1.5h-15a.75.75 0 0 1-.75-.75m0-6a.75.75 0 0 1 .75-.75h15a.75.75 0 1 1 0 1.5h-15A.75.75 0 0 1 3.75 6"
+      clipRule="evenodd"
+    />
+  </svg>
+);
+export default ListIcon;

package/src/components/icons/ListOlIcon.tsx

@@ -0,0 +1,23 @@
+import type { SVGProps } from 'react';
+const ListOlIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="1em"
+    height="1em"
+    fill="none"
+    viewBox="0 0 24 24"
+    {...props}
+  >
+    <path
+      fill={props?.fill ? props.fill : '#1E1E1E'}
+      fillRule="evenodd"
+      d="M7.5 17.25a.75.75 0 0 1 .75-.75h13.5a.75.75 0 1 1 0 1.5H8.25a.75.75 0 0 1-.75-.75m0-6a.75.75 0 0 1 .75-.75h13.5a.75.75 0 1 1 0 1.5H8.25a.75.75 0 0 1-.75-.75m0-6a.75.75 0 0 1 .75-.75h13.5a.75.75 0 1 1 0 1.5H8.25a.75.75 0 0 1-.75-.75"
+      clipRule="evenodd"
+    />
+    <path
+      fill={props?.fill ? props.fill : '#1E1E1E'}
+      d="M2.57 17.798v-.711H3c.325 0 .545-.206.545-.476 0-.277-.237-.465-.542-.465-.335 0-.55.228-.56.465h-.885c.024-.7.56-1.18 1.48-1.18.882-.003 1.43.436 1.435 1.054a.89.89 0 0 1-.738.891v.05a.923.923 0 0 1 .853.946c.005.8-.752 1.2-1.576 1.2-.984 0-1.5-.555-1.512-1.191h.873c.012.267.279.459.633.463.381 0 .636-.217.633-.524-.003-.293-.232-.523-.621-.523h-.45zm-.006-7.049h-.907v-.053c0-.611.443-1.266 1.438-1.266.874 0 1.44.49 1.44 1.135 0 .583-.386.925-.715 1.271l-.805.858v.045h1.581v.761H1.715v-.592l1.435-1.485c.207-.213.44-.457.44-.762 0-.27-.221-.48-.514-.48a.495.495 0 0 0-.513.507zM3.846 7.5h-.953V4.386h-.046l-.897.63v-.85l.944-.665h.952z"
+    />
+  </svg>
+);
+export default ListOlIcon;

package/src/components/icons/PencilSquareIcon.tsx

@@ -0,0 +1,23 @@
+import type { SVGProps } from 'react';
+const PencilSquareIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="1em"
+    height="1em"
+    fill="none"
+    viewBox="0 0 24 24"
+    {...props}
+  >
+    <path
+      fill={props?.fill ? props.fill : '#1E1E1E'}
+      d="M23.253 2.91a.75.75 0 0 1 0 1.059L21.69 5.535l-3-3L20.253.969a.75.75 0 0 1 1.06 0l1.94 1.94m-2.625 3.684-3-3-10.22 10.22a.75.75 0 0 0-.18.295l-1.208 3.62a.375.375 0 0 0 .474.475l3.62-1.208a.75.75 0 0 0 .295-.18l10.22-10.22z"
+    />
+    <path
+      fill={props?.fill ? props.fill : '#1E1E1E'}
+      fillRule="evenodd"
+      d="M1.5 20.25a2.25 2.25 0 0 0 2.25 2.25h16.5a2.25 2.25 0 0 0 2.25-2.25v-9a.75.75 0 1 0-1.5 0v9a.75.75 0 0 1-.75.75H3.75a.75.75 0 0 1-.75-.75V3.75A.75.75 0 0 1 3.75 3h9.75a.75.75 0 1 0 0-1.5H3.75A2.25 2.25 0 0 0 1.5 3.75z"
+      clipRule="evenodd"
+    />
+  </svg>
+);
+export default PencilSquareIcon;

package/src/components/icons/PersonCircleIcon.tsx

@@ -0,0 +1,26 @@
+import type { SVGProps } from 'react';
+const PersonCircleIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="1em"
+    height="1em"
+    fill="none"
+    viewBox="0 0 24 24"
+    {...props}
+  >
+    <g fill="#1E1E1E" clipPath="url(#person-circle_svg__a)">
+      <path d="M16.5 9a4.5 4.5 0 1 1-9 0 4.5 4.5 0 0 1 9 0" />
+      <path
+        fillRule="evenodd"
+        d="M0 12a12 12 0 1 1 24 0 12 12 0 0 1-24 0M12 1.5a10.5 10.5 0 0 0-8.202 17.055C4.863 16.839 7.208 15 12 15c4.793 0 7.136 1.837 8.202 3.555A10.5 10.5 0 0 0 12 1.5"
+        clipRule="evenodd"
+      />
+    </g>
+    <defs>
+      <clipPath id="person-circle_svg__a">
+        <path fill={props?.fill ? props.fill : '#fff'} d="M0 0h24v24H0z" />
+      </clipPath>
+    </defs>
+  </svg>
+);
+export default PersonCircleIcon;

package/src/components/icons/PlusIcon.tsx

@@ -0,0 +1,17 @@
+import type { SVGProps } from 'react';
+const PlusIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="1em"
+    height="1em"
+    fill="none"
+    viewBox="0 0 24 24"
+    {...props}
+  >
+    <path
+      fill={props?.fill ? props.fill : '#1E1E1E'}
+      d="M12 6a.75.75 0 0 1 .75.75v4.5h4.5a.75.75 0 1 1 0 1.5h-4.5v4.5a.75.75 0 1 1-1.5 0v-4.5h-4.5a.75.75 0 1 1 0-1.5h4.5v-4.5A.75.75 0 0 1 12 6"
+    />
+  </svg>
+);
+export default PlusIcon;

package/src/components/icons/PrinterIcon.tsx

@@ -0,0 +1,18 @@
+import type { SVGProps } from 'react';
+const PrinterIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="1em"
+    height="1em"
+    fill="none"
+    viewBox="0 0 24 24"
+    {...props}
+  >
+    <path fill={props?.fill ? props.fill : '#1E1E1E'} d="M3.75 12a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5" />
+    <path
+      fill={props?.fill ? props.fill : '#1E1E1E'}
+      d="M7.5 1.5a3 3 0 0 0-3 3v3H3a3 3 0 0 0-3 3V15a3 3 0 0 0 3 3h1.5v1.5a3 3 0 0 0 3 3h9a3 3 0 0 0 3-3V18H21a3 3 0 0 0 3-3v-4.5a3 3 0 0 0-3-3h-1.5v-3a3 3 0 0 0-3-3zM6 4.5A1.5 1.5 0 0 1 7.5 3h9A1.5 1.5 0 0 1 18 4.5v3H6zM7.5 12a3 3 0 0 0-3 3v1.5H3A1.5 1.5 0 0 1 1.5 15v-4.5A1.5 1.5 0 0 1 3 9h18a1.5 1.5 0 0 1 1.5 1.5V15a1.5 1.5 0 0 1-1.5 1.5h-1.5V15a3 3 0 0 0-3-3zM18 15v4.5a1.5 1.5 0 0 1-1.5 1.5h-9A1.5 1.5 0 0 1 6 19.5V15a1.5 1.5 0 0 1 1.5-1.5h9A1.5 1.5 0 0 1 18 15"
+    />
+  </svg>
+);
+export default PrinterIcon;

package/src/components/icons/SearchIcon.tsx

@@ -0,0 +1,24 @@
+import type { SVGProps } from 'react';
+const SearchIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="1em"
+    height="1em"
+    fill="none"
+    viewBox="0 0 24 24"
+    {...props}
+  >
+    <g clipPath="url(#Search_svg__a)">
+      <path
+        fill={props?.fill ? props.fill : '#1E1E1E'}
+        d="M17.613 15.515a9.75 9.75 0 1 0-2.095 2.097h-.002q.067.09.147.173l5.775 5.775a1.5 1.5 0 0 0 2.123-2.121l-5.775-5.775a1.5 1.5 0 0 0-.173-.15zM18 9.75a8.25 8.25 0 1 1-16.5 0 8.25 8.25 0 0 1 16.5 0"
+      />
+    </g>
+    <defs>
+      <clipPath id="Search_svg__a">
+        <path fill={props?.fill ? props.fill : '#fff'} d="M0 0h24v24H0z" />
+      </clipPath>
+    </defs>
+  </svg>
+);
+export default SearchIcon;

package/src/components/icons/SpinnerRingResizeIcon.tsx

@@ -0,0 +1,37 @@
+import type { SVGProps } from 'react';
+const SpinnerRingResizeIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="1em"
+    height="1em"
+    stroke="#000"
+    viewBox="0 0 24 24"
+    {...props}
+  >
+    <style>
+      {
+        '@keyframes spinner_zKoa{to{transform:rotate(360deg)}}@keyframes spinner_YpZS{0%{stroke-dasharray:0 150;stroke-dashoffset:0}47.5%{stroke-dasharray:42 150;stroke-dashoffset:-16}95%,to{stroke-dasharray:42 150;stroke-dashoffset:-59}}'
+      }
+    </style>
+    <g
+      style={{
+        transformOrigin: 'center',
+        animation: 'spinner_zKoa 2s linear infinite',
+      }}
+    >
+      <circle
+        cx={12}
+        cy={12}
+        r={9.5}
+        fill="none"
+        strokeWidth={3}
+        className="spinner-ring-resize_svg__spinner_V8m1"
+        style={{
+          strokeLinecap: 'round',
+          animation: 'spinner_YpZS 1.5s ease-in-out infinite',
+        }}
+      />
+    </g>
+  </svg>
+);
+export default SpinnerRingResizeIcon;

package/src/components/icons/StarIcon.tsx

@@ -0,0 +1,24 @@
+import type { SVGProps } from 'react';
+const StarIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="1em"
+    height="1em"
+    fill="none"
+    viewBox="0 0 24 24"
+    {...props}
+  >
+    <g clipPath="url(#star_svg__a)">
+      <path
+        fill={props?.fill ? props.fill : '#1E1E1E'}
+        d="M4.299 22.275c-.117.666.54 1.187 1.119.89l6.585-3.384 6.583 3.384c.58.297 1.236-.224 1.12-.889l-1.246-7.094 5.283-5.034c.495-.471.24-1.332-.423-1.425l-7.347-1.044-3.276-6.491a.77.77 0 0 0-1.39 0L8.03 7.68.684 8.724c-.662.093-.918.954-.425 1.425l5.285 5.034-1.245 7.095zm7.357-4.15-5.529 2.84 1.041-5.935a.85.85 0 0 0-.244-.757l-4.36-4.155 6.079-.864a.79.79 0 0 0 .59-.432L12 3.335l2.77 5.487a.79.79 0 0 0 .59.432l6.078.862-4.36 4.155a.85.85 0 0 0-.244.759l1.041 5.935-5.529-2.84a.76.76 0 0 0-.691 0z"
+      />
+    </g>
+    <defs>
+      <clipPath id="star_svg__a">
+        <path fill={props?.fill ? props.fill : '#fff'} d="M0 0h24v24H0z" />
+      </clipPath>
+    </defs>
+  </svg>
+);
+export default StarIcon;

package/src/components/icons/XIcon.tsx

@@ -0,0 +1,17 @@
+import type { SVGProps } from 'react';
+const XIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="1em"
+    height="1em"
+    fill="none"
+    viewBox="0 0 24 24"
+    {...props}
+  >
+    <path
+      fill={props?.fill ? props.fill : '#1E1E1E'}
+      d="M6.969 6.969a.75.75 0 0 1 1.062 0L12 10.939l3.969-3.97A.75.75 0 1 1 17.03 8.03L13.06 12l3.97 3.969a.752.752 0 0 1-1.062 1.062l-3.97-3.97-3.968 3.97a.753.753 0 0 1-1.225-.244.75.75 0 0 1 .163-.818l3.97-3.97-3.97-3.968a.75.75 0 0 1 0-1.062"
+    />
+  </svg>
+);
+export default XIcon;

package/src/components/icons/YoutubeIcon.tsx

@@ -0,0 +1,17 @@
+import type { SVGProps } from 'react';
+const YoutubeIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="1em"
+    height="1em"
+    fill="none"
+    viewBox="0 0 24 24"
+    {...props}
+  >
+    <path
+      fill={props?.fill ? props.fill : '#1E1E1E'}
+      d="M12.077 2.999h.133c1.233.004 7.48.049 9.165.502a3.02 3.02 0 0 1 2.122 2.13c.152.57.259 1.325.33 2.103l.015.156.034.39.011.156c.098 1.371.11 2.655.111 2.935v.113a48 48 0 0 1-.123 3.09l-.012.158-.013.155c-.075.858-.186 1.71-.353 2.337a3.01 3.01 0 0 1-2.122 2.13c-1.74.469-8.353.502-9.27.503h-.213c-.463 0-2.38-.009-4.39-.078l-.255-.009-.131-.006-.256-.01-.257-.011c-1.665-.073-3.25-.192-3.981-.39A3.01 3.01 0 0 1 .5 17.224C.333 16.6.222 15.746.147 14.888l-.012-.157-.012-.156A47 47 0 0 1 0 11.52v-.184c.003-.323.015-1.437.096-2.667l.01-.155.005-.078.012-.156.033-.39.015-.156c.072-.778.178-1.534.33-2.103a3.01 3.01 0 0 1 2.123-2.13c.73-.195 2.315-.315 3.98-.39l.255-.01.258-.01.13-.004.256-.01A150 150 0 0 1 11.787 3h.29zM9.6 7.814v7.227l6.236-3.613z"
+    />
+  </svg>
+);
+export default YoutubeIcon;

package/src/components/icons/index.ts

@@ -0,0 +1,28 @@
+export { default as AppleIcon } from './AppleIcon';
+export { default as ArrowDownShortIcon } from './ArrowDownShortIcon';
+export { default as AwardFillIcon } from './AwardFillIcon';
+export { default as BarChartIcon } from './BarChartIcon';
+export { default as BoxArrowInLeftIcon } from './BoxArrowInLeftIcon';
+export { default as BroadcastIcon } from './BroadcastIcon';
+export { default as CaretDownFillIcon } from './CaretDownFillIcon';
+export { default as CaretLeftFillIcon } from './CaretLeftFillIcon';
+export { default as CaretRightFillIcon } from './CaretRightFillIcon';
+export { default as CircleIcon } from './CircleIcon';
+export { default as FacebookIcon } from './FacebookIcon';
+export { default as FileEarmarkTextIcon } from './FileEarmarkTextIcon';
+export { default as FileTextIcon } from './FileTextIcon';
+export { default as FilterIcon } from './FilterIcon';
+export { default as GoogleColorIcon } from './GoogleColorIcon';
+export { default as GoogleIcon } from './GoogleIcon';
+export { default as InstagramIcon } from './InstagramIcon';
+export { default as ListIcon } from './ListIcon';
+export { default as ListOlIcon } from './ListOlIcon';
+export { default as PencilSquareIcon } from './PencilSquareIcon';
+export { default as PersonCircleIcon } from './PersonCircleIcon';
+export { default as PlusIcon } from './PlusIcon';
+export { default as PrinterIcon } from './PrinterIcon';
+export { default as SearchIcon } from './SearchIcon';
+export { default as SpinnerRingResizeIcon } from './SpinnerRingResizeIcon';
+export { default as StarIcon } from './StarIcon';
+export { default as XIcon } from './XIcon';
+export { default as YoutubeIcon } from './YoutubeIcon';