@xipkg/icons 0.4.4 → 0.6.0

package/Svg.tsx

@@ -0,0 +1,43 @@
+import * as React from 'react';
+import { cva, type VariantProps } from 'class-variance-authority';
+
+import { cn } from '@xipkg/utils';
+
+
+export const svgVariants = cva(
+  'inline-flex items-center w-fit justify-center ring-offset-gray-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
+  {
+    variants: {
+      theme: {
+        default: 'text-gray-0 dark:text-gray-100 bg-brand-80 hover:bg-brand-100 active:bg-brand-100 focus:bg-brand-100',
+        secondary: 'bg-gray-0 text-gray-100 border-gray-30 border-2 hover:bg-gray-5 active:bg-gray-5 focus:bg-gray-5',
+        ghost: 'text-gray-100 bg-gray-0 border-0 hover:bg-gray-5 active:bg-gray-5 focus:bg-gray-5',
+        error: 'bg-red-80 text-gray-0 hover:bg-red-100 active:bg-red-100 focus:bg-red-100',
+        success: 'bg-green-80 text-gray-0 hover:bg-green-100 active:bg-green-100 focus:bg-green-100'
+      },
+      size: {
+        l: 'h-14 px-8 rounded-xl text-[20px]',
+        m: 'h-12 px-6 rounded-lg text-[16px]',
+        s: 'h-8 px-4 rounded-md text-[14px]',
+      },
+    },
+    defaultVariants: {
+      theme: 'default',
+      size: 'l',
+    },
+  },
+);
+
+export interface IconProps
+  extends React.SVGProps<SVGSVGElement>,
+    VariantProps<typeof svgVariants> {
+}
+
+export const Svg = ({ theme, className, children, ...rest }: IconProps) => {
+
+  return (
+    <svg viewBox="0 0 24 24" className={cn(svgVariants({ theme, className }))} {...rest}>
+      {children}
+    </svg>
+  )
+}

package/{src → icons}/Account.tsx

@@ -1,11 +1,11 @@
-import { SvgIcon } from '@mui/material';
+import { Svg } from '../Svg';
 import { IconProps } from '../types';
 
 export const Account = ({ ...props }: IconProps) => (
-  <SvgIcon {...props}>
+  <Svg {...props}>
     <path
       d="M11.58 3.023c-.566.079-.77.121-1.1.226a5.014 5.014 0 0 0-3.387 3.829c-.083.421-.091 1.34-.017 1.762a5.182 5.182 0 0 0 1.298 2.589c.153.161.271.298.262.305a14.61 14.61 0 0 1-.411.221c-1.823.965-3.188 2.586-3.858 4.585-.365 1.089-.447 1.435-.447 1.879 0 .751.219 1.277.76 1.825.363.367.802.604 1.294.697.47.089 11.582.089 12.052 0 .492-.093.931-.33 1.294-.697.541-.548.76-1.074.76-1.825 0-.443-.08-.781-.447-1.879a8.043 8.043 0 0 0-3.858-4.585 14.61 14.61 0 0 1-.411-.221c-.009-.007.109-.144.262-.305a5.015 5.015 0 0 0 1.128-1.93c.181-.59.22-.857.22-1.499 0-.642-.039-.909-.22-1.499-.528-1.725-2.027-3.063-3.809-3.402-.325-.061-1.143-.107-1.365-.076m1.28 2.097a3.09 3.09 0 0 1 2.026 2.04c.135.434.135 1.246 0 1.68a3.086 3.086 0 0 1-2.046 2.046c-.436.135-1.248.135-1.68 0A3.086 3.086 0 0 1 9.114 8.84c-.136-.434-.136-1.246 0-1.68a3.088 3.088 0 0 1 2.329-2.119c.308-.065 1.101-.021 1.417.079m.345 7.997c1.868.401 3.469 1.654 4.252 3.33.168.36.586 1.607.641 1.913.036.196-.111.477-.298.57-.131.066-.491.07-5.8.07-6.399 0-5.854.029-6.032-.32-.113-.222-.109-.243.178-1.156.373-1.187.775-1.907 1.467-2.632.954-.997 2.119-1.607 3.504-1.833.493-.081 1.581-.051 2.088.058"
       fillRule="evenodd"
     />
-  </SvgIcon>
+  </Svg>
 );

package/{src → icons}/Activity.tsx

@@ -1,11 +1,11 @@
-import { SvgIcon } from '@mui/material';
+import { Svg } from '../Svg';
 import { IconProps } from '../types';
 
 export const Activity = ({ ...props }: IconProps) => (
-  <SvgIcon {...props}>
+  <Svg {...props}>
     <path
       d="M11.12 2.039c-1.804.181-3.413.768-4.84 1.767-3.542 2.48-5.102 6.953-3.858 11.059a9.762 9.762 0 0 0 2.517 4.196 9.792 9.792 0 0 0 3.333 2.217c3.362 1.332 7.041.802 9.928-1.433.437-.338 1.307-1.208 1.645-1.645C21.255 16.379 22 14.234 22 12c0-4.568-3.158-8.613-7.57-9.697-.984-.241-2.402-.355-3.31-.264m1.614 2.002a7.985 7.985 0 0 1 3.408 1.12c.186.112.338.213.338.223 0 .01-.126.174-.281.365a10.075 10.075 0 0 0-1.936 3.971c-.195.834-.241 1.275-.241 2.28s.046 1.446.241 2.28a10.122 10.122 0 0 0 1.936 3.971c.155.191.281.355.281.365 0 .042-.611.394-1.04.6a7.962 7.962 0 0 1-6.88 0c-.45-.216-1.04-.559-1.04-.605 0-.012.078-.114.173-.227 1.172-1.38 1.956-3.178 2.234-5.124.068-.471.068-2.049 0-2.52-.278-1.946-1.062-3.744-2.234-5.124a1.565 1.565 0 0 1-.173-.228c0-.012.152-.115.338-.227a7.992 7.992 0 0 1 4.876-1.12M6.209 6.958a8.132 8.132 0 0 1 1.699 3.859c.094.602.094 1.764 0 2.366a7.96 7.96 0 0 1-1.252 3.241c-.252.378-.617.851-.656.852-.011 0-.13-.138-.265-.308-.852-1.071-1.399-2.319-1.641-3.748-.094-.554-.094-1.886 0-2.44.242-1.429.789-2.677 1.641-3.748.135-.17.254-.308.265-.308.011 0 .105.106.209.234m12 0a8.132 8.132 0 0 1 1.699 3.859c.094.602.094 1.764 0 2.366a7.96 7.96 0 0 1-1.252 3.241c-.252.378-.617.851-.656.852-.011 0-.13-.138-.265-.308-.852-1.071-1.399-2.319-1.641-3.748-.094-.554-.094-1.886 0-2.44.242-1.429.789-2.677 1.641-3.748.135-.17.254-.308.265-.308.011 0 .105.106.209.234"
       fillRule="evenodd"
     />
-  </SvgIcon>
+  </Svg>
 );

package/{src → icons}/Add.tsx

@@ -1,11 +1,11 @@
-import { SvgIcon } from '@mui/material';
+import { Svg } from '../Svg';
 import { IconProps } from '../types';
 
 export const Add = ({ ...props }: IconProps) => (
-  <SvgIcon {...props}>
+  <Svg {...props}>
     <path
       d="M11.634 4.063c-.251.077-.559.361-.679.626l-.095.211-.011 2.99-.011 2.99H7.849l-2.989.001-.202.094A1.18 1.18 0 0 0 4 12c0 .427.288.863.689 1.045l.211.095 2.969.011 2.969.011.011 2.969.011 2.969.095.211c.182.401.618.689 1.045.689.427 0 .863-.288 1.045-.689l.095-.211.011-2.969.011-2.969 2.969-.011 2.969-.011.211-.095c.401-.182.689-.618.689-1.045a1.18 1.18 0 0 0-.658-1.025l-.202-.094-2.989-.001h-2.989l-.011-2.99-.011-2.99-.095-.211a1.16 1.16 0 0 0-1.411-.626"
       fillRule="evenodd"
     />
-  </SvgIcon>
+  </Svg>
 );

package/{src → icons}/Announce.tsx

@@ -1,11 +1,11 @@
-import { SvgIcon } from '@mui/material';
+import { Svg } from '../Svg';
 import { IconProps } from '../types';
 
 export const Announce = ({ ...props }: IconProps) => (
-  <SvgIcon {...props}>
+  <Svg {...props}>
     <path
       d="m12.86 5.179-4.88.819L6.4 6c-1.729.002-1.947.023-2.331.228-.268.143-.698.573-.841.841-.224.419-.227.466-.227 3.931s.003 3.512.227 3.931c.061.115.228.327.371.472.321.324.657.497 1.091.564l.31.047v.603c.001 1.235.199 1.783.9 2.483.72.72 1.238.899 2.6.899 1.016 0 1.461-.087 1.98-.388.337-.195.936-.794 1.131-1.131.247-.426.388-.981.389-1.53 0-.148.009-.27.019-.27.011 0 1.321.217 2.91.483 2.65.443 2.92.481 3.235.459.771-.054 1.383-.329 1.92-.861.5-.496.77-1.012.871-1.669.063-.401.063-7.783 0-8.184a2.91 2.91 0 0 0-.9-1.706 2.913 2.913 0 0 0-1.935-.822c-.356-.019-.687.031-5.26.799m5.52 1.256c.241.109.402.264.517.494l.103.207-.001 3.862c-.001 3.651-.005 3.871-.074 4.022-.164.36-.53.62-.874.62-.133 0-8.437-1.359-8.941-1.464L9 14.154v-6.31l.13-.024c1.194-.22 8.71-1.453 8.87-1.455a.95.95 0 0 1 .38.07M7 11v3H5V8h2v3m1.974 5.169 1.034.17-.014.481c-.013.439-.023.496-.125.669a1.038 1.038 0 0 1-.539.454c-.208.074-1.452.074-1.66 0a1.038 1.038 0 0 1-.539-.454c-.107-.182-.111-.212-.124-.839L6.993 16l.474-.001c.37 0 .697.037 1.507.17"
       fillRule="evenodd"
     />
-  </SvgIcon>
+  </Svg>
 );

package/{src → icons}/ArrowBottom.tsx

@@ -1,11 +1,11 @@
-import { SvgIcon } from '@mui/material';
+import { Svg } from '../Svg';
 import { IconProps } from '../types';
 
 export const ArrowBottom = ({ ...props }: IconProps) => (
-  <SvgIcon {...props}>
+  <Svg {...props}>
     <path
       d="M11.619 4.056c-.241.075-.371.176-.491.38l-.108.184-.011 5.979-.01 5.978-2.73-2.724c-1.827-1.825-2.785-2.753-2.897-2.809-.352-.176-.733-.085-1.073.255-.34.34-.431.721-.255 1.073.057.113 1.215 1.303 3.574 3.668 1.92 1.925 3.53 3.558 3.578 3.629.124.182.533.371.804.371s.68-.189.804-.371c.048-.071 1.658-1.704 3.578-3.629 2.359-2.365 3.517-3.555 3.574-3.668.176-.352.085-.733-.255-1.073-.34-.34-.721-.431-1.073-.255-.112.056-1.07.985-2.898 2.809L13 16.579v-5.882c0-6.529.015-6.159-.261-6.436-.234-.234-.735-.326-1.12-.205"
       fillRule="evenodd"
     />
-  </SvgIcon>
+  </Svg>
 );

package/{src → icons}/ArrowLeft.tsx

@@ -1,11 +1,11 @@
-import { SvgIcon } from '@mui/material';
+import { Svg } from '../Svg';
 import { IconProps } from '../types';
 
 export const ArrowLeft = ({ ...props }: IconProps) => (
-  <SvgIcon {...props}>
+  <Svg {...props}>
     <path
       d="M11.62 4.046c-.099.051-1.491 1.41-3.66 3.572-1.925 1.92-3.558 3.53-3.629 3.578-.182.124-.371.533-.371.804s.189.68.371.804c.071.048 1.704 1.658 3.629 3.578 2.365 2.359 3.555 3.517 3.668 3.574.352.176.733.085 1.073-.255.34-.34.431-.721.255-1.073-.056-.112-.984-1.07-2.809-2.897l-2.724-2.73 5.981-.01 5.982-.011.195-.12c.247-.153.38-.397.408-.751.028-.344-.066-.664-.25-.847-.277-.277.095-.262-6.436-.262H7.421l2.726-2.73c1.824-1.828 2.753-2.786 2.809-2.898.176-.352.085-.733-.255-1.073-.34-.34-.734-.432-1.081-.253"
       fillRule="evenodd"
     />
-  </SvgIcon>
+  </Svg>
 );

package/{src → icons}/ArrowRight.tsx

@@ -1,11 +1,11 @@
-import { SvgIcon } from '@mui/material';
+import { Svg } from '../Svg';
 import { IconProps } from '../types';
 
 export const ArrowRight = ({ ...props }: IconProps) => (
-  <SvgIcon {...props}>
+  <Svg {...props}>
     <path
       d="M11.626 4.045a1.68 1.68 0 0 0-.583.59.864.864 0 0 0 .001.737c.056.112.984 1.07 2.809 2.897l2.725 2.73-5.96.01-5.96.011-.199.102a.76.76 0 0 0-.319.297c-.112.181-.12.222-.12.578 0 .347.011.401.111.572a.862.862 0 0 0 .3.3l.189.111 5.979.011 5.978.01-2.724 2.73c-1.825 1.827-2.753 2.785-2.809 2.897-.176.352-.085.733.255 1.073.34.34.721.431 1.073.255.113-.057 1.303-1.215 3.668-3.574 1.925-1.92 3.557-3.529 3.628-3.577.177-.121.372-.542.372-.805s-.195-.684-.372-.805c-.071-.048-1.703-1.657-3.628-3.577-2.365-2.359-3.555-3.517-3.668-3.574a.884.884 0 0 0-.746.001"
       fillRule="evenodd"
     />
-  </SvgIcon>
+  </Svg>
 );

package/{src → icons}/ArrowUp.tsx

@@ -1,11 +1,11 @@
-import { SvgIcon } from '@mui/material';
+import { Svg } from '../Svg';
 import { IconProps } from '../types';
 
 export const ArrowUp = ({ ...props }: IconProps) => (
-  <SvgIcon {...props}>
+  <Svg {...props}>
     <path
       d="M11.531 4.085c-.15.072-.283.17-.336.247-.048.071-1.657 1.703-3.577 3.628-2.359 2.365-3.517 3.555-3.574 3.668-.176.352-.085.733.255 1.073.34.34.721.431 1.073.255.112-.056 1.07-.984 2.897-2.809l2.73-2.724.01 5.978.011 5.979.111.189a.862.862 0 0 0 .3.3c.171.1.225.111.572.111.356 0 .397-.008.578-.12a.76.76 0 0 0 .297-.319l.102-.199.011-5.96.01-5.96 2.73 2.725c1.827 1.825 2.785 2.753 2.897 2.809.352.176.733.085 1.073-.255.34-.34.431-.721.255-1.073-.057-.113-1.215-1.303-3.574-3.668-1.92-1.925-3.529-3.557-3.577-3.628-.054-.079-.184-.173-.346-.25-.345-.163-.587-.162-.928.003"
       fillRule="evenodd"
     />
-  </SvgIcon>
+  </Svg>
 );

package/{src → icons}/Bold.tsx

@@ -1,11 +1,11 @@
-import { SvgIcon } from '@mui/material';
+import { Svg } from '../Svg';
 import { IconProps } from '../types';
 
 export const Bold = ({ ...props }: IconProps) => (
-  <SvgIcon {...props}>
+  <Svg {...props}>
     <path
       d="M7 12.002v6.002l3.25-.015c2.857-.014 3.291-.024 3.59-.084 1.752-.35 2.818-1.247 3.1-2.609.199-.963-.08-1.956-.735-2.616-.456-.46-1.088-.786-1.665-.859-.511-.065-.506-.121.03-.291.896-.286 1.533-.858 1.792-1.61.126-.363.154-1.075.06-1.498-.255-1.144-1.255-1.988-2.702-2.278C13.111 6.022 12.52 6 9.77 6H7v6.002m5.571-3.867c.474.133.804.379 1.012.753.107.195.117.244.117.612 0 .367-.01.417-.116.61a1.62 1.62 0 0 1-.674.654c-.445.227-.582.246-1.92.266l-1.23.018V8.031l1.29.019c1.026.015 1.337.033 1.521.085m.154 4.683c.576.122 1.09.499 1.3.953.102.222.115.293.115.649 0 .357-.012.424-.112.628a1.46 1.46 0 0 1-.74.674c-.442.167-.749.195-2.178.197l-1.35.001v-3.16l1.35.001c1.004 0 1.418.015 1.615.057"
       fillRule="evenodd"
     />
-  </SvgIcon>
+  </Svg>
 );

package/{src → icons}/Brush.tsx

@@ -1,11 +1,11 @@
-import { SvgIcon } from '@mui/material';
+import { Svg } from '../Svg';
 import { IconProps } from '../types';
 
 export const Brush = ({ ...props }: IconProps) => (
-  <SvgIcon {...props}>
+  <Svg {...props}>
     <path
       d="M14.893 2.933 12.64 6.995l-2.02 3.645-.22-.03c-.381-.052-1.158-.028-1.511.046-.636.134-1.59.509-2.062.811-.795.509-1.283 1.263-1.585 2.446-.044.172-.153.734-.243 1.25a31.514 31.514 0 0 1-.266 1.377c-.26 1.101-.66 1.896-1.326 2.629-.297.328-.367.457-.395.73-.046.445.235.894.648 1.035.231.079.957.088 1.98.025 3.511-.215 6.025-1.035 7.453-2.432.544-.532.797-.95 1.068-1.762.275-.822.347-1.558.216-2.192-.034-.167-.048-.317-.03-.333.018-.016 1.658-1.247 3.643-2.735l3.611-2.706L21 8l-.601-.8-1.68 1.261-1.679 1.26-1.222-1.048c-.891-.764-1.215-1.064-1.197-1.11a347.73 347.73 0 0 1 2.184-3.948l.076-.125-.671-.371a349.31 349.31 0 0 1-.877-.487l-.207-.116-.233.417m-.425 7.217c.481.413.879.768.883.79.005.022-.499.422-1.121.888l-1.13.849-.428-.426-.428-.426.168-.305.668-1.211c.275-.499.503-.907.507-.908.004-.001.401.337.881.749m-4.337 2.466c.071.03.609.539 1.196 1.13 1.042 1.05 1.067 1.078 1.095 1.269.076.523-.192 1.456-.548 1.903-.313.394-1.065.88-1.814 1.175-.998.393-2.41.699-3.73.81L6 18.93l.136-.295c.345-.748.573-1.589.823-3.035.201-1.163.285-1.501.463-1.867.209-.429.422-.601 1.057-.851.777-.306 1.348-.398 1.652-.266"
       fillRule="evenodd"
     />
-  </SvgIcon>
+  </Svg>
 );

package/{src → icons}/Burger.tsx

@@ -1,11 +1,11 @@
-import { SvgIcon } from '@mui/material';
+import { Svg } from '../Svg';
 import { IconProps } from '../types';
 
 export const Burger = ({ ...props }: IconProps) => (
-  <SvgIcon {...props}>
+  <Svg {...props}>
     <path
       d="M3.117 4.054c-.412.112-.798.446-.99.859-.09.192-.106.282-.106.588-.001.327.011.386.129.624.156.317.442.598.761.748l.229.107h17.72l.229-.107a1.67 1.67 0 0 0 .761-.748c.118-.238.13-.298.13-.625s-.012-.387-.13-.625a1.67 1.67 0 0 0-.761-.748l-.229-.107-8.78-.008c-6.873-.005-8.82.004-8.963.042m-.168 6.563c-.45.185-.768.544-.887 1.002a1.27 1.27 0 0 0 0 .762c.121.465.467.847.92 1.016l.222.084 8.848-.011 8.848-.01.229-.108a1.505 1.505 0 0 0 .704-2.026c-.123-.255-.428-.549-.704-.678l-.229-.108-8.86-.009-8.86-.009-.231.095m.168 6.437c-.412.112-.798.446-.99.859-.09.192-.106.282-.106.588-.001.327.011.386.129.624.156.317.442.598.761.748l.229.107h17.72l.229-.107a1.67 1.67 0 0 0 .761-.748c.118-.238.13-.298.13-.625s-.012-.387-.13-.625a1.67 1.67 0 0 0-.761-.748l-.229-.107-8.78-.008c-6.873-.005-8.82.004-8.963.042"
       fillRule="evenodd"
     />
-  </SvgIcon>
+  </Svg>
 );

package/{src → icons}/Calendar.tsx

@@ -1,11 +1,11 @@
-import { SvgIcon } from '@mui/material';
+import { Svg } from '../Svg';
 import { IconProps } from '../types';
 
 export const Calendar = ({ ...props }: IconProps) => (
-  <SvgIcon {...props}>
+  <Svg {...props}>
     <path
       d="M8.59 2.062a.812.812 0 0 0-.528.545A1.485 1.485 0 0 0 8 2.903c0 .08-.025.09-.31.114-1.023.088-1.853.392-2.66.973-.801.577-1.471 1.514-1.781 2.49-.236.744-.229.582-.229 5.54 0 4.179.006 4.589.07 4.902a5.058 5.058 0 0 0 2.731 3.57c.32.16.945.36 1.359.436.407.075 9.233.075 9.64 0 1.882-.346 3.392-1.662 3.935-3.429.232-.758.225-.582.225-5.499 0-3.531-.011-4.602-.052-4.82-.289-1.575-1.221-2.857-2.616-3.599-.59-.314-1.244-.499-1.994-.563l-.301-.026-.046-.24c-.098-.514-.386-.732-.971-.732-.586 0-.873.218-.972.736L13.982 3h-3.964l-.046-.244c-.093-.489-.372-.717-.908-.742a1.435 1.435 0 0 0-.474.048M8 5.593c0 .702.054.938.261 1.146.344.343 1.134.343 1.478 0 .207-.208.261-.444.261-1.146V5h4v.593c0 .702.054.938.261 1.146.344.343 1.134.343 1.478 0 .208-.208.261-.444.261-1.152v-.599l.292.025c1.172.099 2.215.955 2.59 2.127.076.239.092.396.108 1.07l.019.79H4.992l.017-.79c.02-.877.066-1.096.335-1.61.472-.9 1.513-1.574 2.466-1.596L8 5v.593m10.991 8.197-.012 2.79-.094.28c-.329.989-1.069 1.722-2.045 2.026l-.3.094H7.46l-.3-.094c-.976-.304-1.715-1.036-2.046-2.026l-.093-.28-.012-2.79L4.997 11h14.007l-.013 2.79"
       fillRule="evenodd"
     />
-  </SvgIcon>
+  </Svg>
 );

package/{src → icons}/Camera.tsx

@@ -1,11 +1,11 @@
-import { SvgIcon } from '@mui/material';
+import { Svg } from '../Svg';
 import { IconProps } from '../types';
 
 export const Camera = ({ ...props }: IconProps) => (
-  <SvgIcon {...props}>
+  <Svg {...props}>
     <path
       d="M6.378 5.058A4.002 4.002 0 0 0 3.058 8.4c-.085.558-.085 6.642 0 7.2A3.982 3.982 0 0 0 6.4 18.942c.558.085 6.642.085 7.2 0a3.968 3.968 0 0 0 2.978-2.191l.212-.428.635.406c.349.223.752.449.895.502.728.27 1.514.093 2.084-.47.286-.284.474-.622.552-.993.062-.296.062-7.24 0-7.536-.21-1.004-1.232-1.718-2.236-1.563-.36.056-.646.192-1.359.648-.393.252-.584.354-.596.318a9.287 9.287 0 0 0-.209-.434A3.97 3.97 0 0 0 13.6 5.058c-.513-.078-6.718-.078-7.222 0m7.114 2.002c.36.093.626.25.912.536.286.286.443.552.536.912.089.342.089 6.642 0 6.984-.093.36-.25.626-.536.912-.286.286-.552.443-.912.536-.342.089-6.642.089-6.984 0-.36-.093-.626-.25-.912-.536-.286-.286-.443-.552-.536-.912-.089-.342-.089-6.642 0-6.984.093-.36.25-.626.536-.912.28-.28.55-.442.895-.534.32-.087 6.67-.089 7.001-.002m5.498 6.613-.01 1.673-.98-.624-.98-.625V9.906l.98-.624.98-.625.01 1.672c.006.919.006 2.424 0 3.344M7.667 9.065C7.303 9.177 7 9.602 7 10c0 .402.312.827.69.939.297.088 2.323.088 2.62 0 .378-.112.69-.537.69-.939 0-.402-.312-.827-.69-.939-.292-.087-2.358-.084-2.643.004"
       fillRule="evenodd"
     />
-  </SvgIcon>
+  </Svg>
 );

package/{src → icons}/CategoryAdd.tsx

@@ -1,8 +1,8 @@
-import { SvgIcon } from '@mui/material';
+import { Svg } from '../Svg';
 import { IconProps } from '../types';
 
 export const CategoryAdd = ({ ...props }: IconProps) => (
-  <SvgIcon {...props}>
+  <Svg {...props}>
     <path d="M4.5 4.059c-.683.151-1.316.557-1.805 1.161a3.084 3.084 0 0 0-.615 1.201C2.002 6.725 2 6.871 2 12s.002 5.275.08 5.579c.282 1.102 1.238 2.059 2.339 2.341.309.079.435.08 7.581.08 7.146 0 7.272-.001 7.581-.08 1.098-.281 2.058-1.241 2.339-2.339.078-.305.08-.439.08-4.581s-.002-4.276-.08-4.581c-.263-1.026-1.098-1.917-2.143-2.287l-.317-.112-3.721-.011-3.722-.011-.998-.999L10.021 4l-2.641.003c-2.03.003-2.695.016-2.88.056M10.18 7l.999 1h3.961c2.604 0 4.011.015 4.109.042.211.059.469.268.61.496l.121.196v8.532l-.121.196c-.141.228-.399.437-.61.496-.1.028-2.491.041-7.289.041-6.824-.001-7.147-.004-7.3-.074a1.168 1.168 0 0 1-.531-.479l-.109-.186V6.734l.12-.193c.066-.106.185-.246.265-.31.284-.229.267-.227 2.615-.229L9.181 6l.999 1m1.072 2.078c-.247.151-.252.181-.252 1.62V12H9.69c-1.229 0-1.318.005-1.438.078-.222.136-.252.246-.252.93 0 .536.01.628.078.74.151.247.181.252 1.62.252H11v1.302c0 1.439.005 1.469.252 1.62.112.068.203.078.748.078.545 0 .636-.01.748-.078.247-.151.252-.181.252-1.62V14h1.31c1.229 0 1.318-.005 1.438-.078.222-.135.252-.247.252-.922s-.03-.787-.252-.922c-.12-.073-.209-.078-1.438-.078H13v-1.31c0-1.229-.005-1.318-.078-1.438-.136-.222-.246-.252-.93-.252-.536 0-.628.01-.74.078" />
-  </SvgIcon>
+  </svg>
 );

package/{src → icons}/ChannelAdd.tsx

@@ -1,8 +1,8 @@
-import { SvgIcon } from '@mui/material';
+import { Svg } from '../Svg';
 import { IconProps } from '../types';
 
 export const ChannelAdd = ({ ...props }: IconProps) => (
-  <SvgIcon {...props}>
+  <Svg {...props}>
     <path d="M11.12 2.039c-1.804.181-3.413.768-4.84 1.767-3.542 2.48-5.102 6.953-3.858 11.059a9.762 9.762 0 0 0 2.517 4.196 9.792 9.792 0 0 0 3.333 2.217c3.362 1.332 7.041.802 9.928-1.433.437-.338 1.307-1.208 1.645-1.645C21.255 16.379 22 14.234 22 12c0-4.568-3.158-8.613-7.57-9.697-.984-.241-2.402-.355-3.31-.264m1.62 2.002A7.98 7.98 0 0 1 19.182 8.5a7.965 7.965 0 0 1-1.417 9.03A7.977 7.977 0 0 1 12 19.999c-3.765 0-7.052-2.668-7.823-6.351a7.995 7.995 0 0 1 4.324-8.831 7.919 7.919 0 0 1 4.239-.776m-1.488 3.037c-.255.156-.252.131-.252 2.12V11H9.19c-1.725 0-1.816.004-1.938.078-.222.136-.252.246-.252.93 0 .536.01.628.078.74.156.255.131.252 2.12.252H11v1.802c0 1.989-.003 1.964.252 2.12.112.068.203.078.748.078.545 0 .636-.01.748-.078.255-.156.252-.131.252-2.12V13h1.81c1.725 0 1.816-.004 1.938-.078.222-.135.252-.247.252-.922s-.03-.787-.252-.922c-.122-.074-.213-.078-1.938-.078H13V9.19c0-1.725-.004-1.816-.078-1.938-.136-.222-.246-.252-.93-.252-.536 0-.628.01-.74.078" />
-  </SvgIcon>
+  </svg>
 );

package/{src → icons}/Chat.tsx

@@ -1,8 +1,8 @@
-import { SvgIcon } from '@mui/material';
+import { Svg } from '../Svg';
 import { IconProps } from '../types';
 
 export const Chat = ({ ...props }: IconProps) => (
-  <SvgIcon {...props}>
+  <Svg {...props}>
     <path d="M7.34 3.046a4.934 4.934 0 0 0-1.52.471c-1.23.603-2.132 1.623-2.557 2.89-.257.765-.237.205-.252 7.41-.015 7.391-.039 6.802.294 7.126a.945.945 0 0 0 .979.243c.097-.03.973-.534 1.947-1.119l1.77-1.064 4.37-.014c3.933-.013 4.396-.021 4.642-.082.984-.243 1.732-.636 2.395-1.259.739-.695 1.202-1.491 1.463-2.517l.109-.431V7.3l-.109-.431c-.261-1.026-.724-1.822-1.462-2.516a5.095 5.095 0 0 0-2.808-1.311c-.42-.052-8.854-.048-9.261.004m9.416 2.043c.889.274 1.569.851 1.948 1.651.298.63.296.597.296 4.26 0 3.636 0 3.629-.284 4.238-.424.906-1.164 1.495-2.138 1.702-.235.05-.96.059-4.705.059L7.445 17l-1.172.705c-.645.387-1.196.713-1.224.724-.041.016-.049-1.036-.039-5.474.014-6.133-.012-5.599.302-6.251a3.046 3.046 0 0 1 2.191-1.662c.108-.019 2.186-.03 4.617-.027 3.999.007 4.441.014 4.636.074m-8.903 4.982a1.245 1.245 0 0 0-.104 2.318c.465.213.999.11 1.374-.266a1.229 1.229 0 0 0-.793-2.107c-.2-.014-.324.001-.477.055m3.847-.036c-.377.1-.764.456-.882.811-.1.302-.065.716.083.989a1.248 1.248 0 0 0 2.198 0c.148-.273.183-.687.083-.989-.086-.258-.37-.579-.632-.711-.214-.108-.633-.158-.85-.1m3.758 0c-.545.141-.946.64-.95 1.182-.003.376.106.643.369.906a1.233 1.233 0 0 0 2.113-.797 1.234 1.234 0 0 0-1.16-1.309 1.663 1.663 0 0 0-.372.018" />
-  </SvgIcon>
+  </svg>
 );

package/{src → icons}/Check.tsx

@@ -1,11 +1,11 @@
-import { SvgIcon } from '@mui/material';
+import { Svg } from '../Svg';
 import { IconProps } from '../types';
 
 export const Check = ({ ...props }: IconProps) => (
-  <SvgIcon {...props}>
+  <Svg {...props}>
     <path
       d="M17.516 6.726c-.231.113-.612.481-3.885 3.748l-3.63 3.622-1.63-1.621c-1.418-1.409-1.665-1.638-1.887-1.748-.494-.244-.945-.133-1.43.351-.336.337-.434.545-.434.922 0 .237.02.342.098.5.076.155.603.704 2.34 2.442 2.418 2.418 2.418 2.418 2.868 2.451.264.019.465-.038.714-.204.241-.16 8.232-8.139 8.479-8.466.225-.297.298-.516.273-.813-.023-.289-.163-.548-.446-.832-.484-.483-.935-.595-1.43-.352"
       fillRule="evenodd"
     />
-  </SvgIcon>
+  </Svg>
 );

package/{src → icons}/ChevronBottom.tsx

@@ -1,11 +1,11 @@
-import { SvgIcon } from '@mui/material';
+import { Svg } from '../Svg';
 import { IconProps } from '../types';
 
 export const ChevronBottom = ({ ...props }: IconProps) => (
-  <SvgIcon {...props}>
+  <Svg {...props}>
     <path
       d="M5.122 7.583c-.544.236-.775.85-.512 1.357.144.276 7.203 7.328 7.47 7.463a.995.995 0 0 0 .84 0c.128-.065 1.212-1.121 3.771-3.677 3.933-3.926 3.811-3.791 3.805-4.249a.996.996 0 0 0-.627-.896c-.207-.086-.57-.077-.789.022-.139.062-.908.808-3.38 3.279l-3.2 3.198-3.18-3.181c-2.443-2.444-3.226-3.204-3.378-3.28-.232-.116-.598-.132-.82-.036"
       fillRule="evenodd"
     />
-  </SvgIcon>
+  </Svg>
 );

package/{src → icons}/ChevronLeft.tsx

@@ -1,11 +1,11 @@
-import { SvgIcon } from '@mui/material';
+import { Svg } from '../Svg';
 import { IconProps } from '../types';
 
 export const ChevronLeft = ({ ...props }: IconProps) => (
-  <SvgIcon {...props}>
+  <Svg {...props}>
     <path
       d="M15.64 4.068c-.156.053-.66.541-3.811 3.687-2.629 2.624-3.655 3.674-3.716 3.801a1.013 1.013 0 0 0-.053.77c.066.203.247.392 3.695 3.845 2.624 2.629 3.674 3.655 3.801 3.716a.986.986 0 0 0 1.144-.185c.279-.279.364-.655.235-1.045-.059-.18-.347-.479-3.289-3.427L10.421 12l3.225-3.23c2.942-2.948 3.23-3.247 3.289-3.427.128-.39.044-.766-.234-1.044a1.006 1.006 0 0 0-1.061-.231"
       fillRule="evenodd"
     />
-  </SvgIcon>
+  </Svg>
 );

package/{src → icons}/ChevronRight.tsx

@@ -1,11 +1,11 @@
-import { SvgIcon } from '@mui/material';
+import { Svg } from '../Svg';
 import { IconProps } from '../types';
 
 export const ChevronRight = ({ ...props }: IconProps) => (
-  <SvgIcon {...props}>
+  <Svg {...props}>
     <path
       d="M8.487 3.56a2.155 2.155 0 0 0-.511.367c-.528.507-.669 1.049-.414 1.593.113.24.363.501 3.23 3.37L13.899 12l-3.107 3.11c-2.867 2.869-3.117 3.13-3.23 3.37-.247.527-.128 1.031.365 1.544.342.356.702.536 1.073.536.227 0 .312-.021.545-.139.254-.127.565-.428 4.023-3.89 3.472-3.475 3.757-3.77 3.87-4.011.17-.363.17-.677 0-1.04-.113-.241-.398-.536-3.87-4.011-3.458-3.462-3.769-3.763-4.023-3.89-.374-.189-.688-.194-1.058-.019"
       fillRule="evenodd"
     />
-  </SvgIcon>
+  </Svg>
 );

package/{src → icons}/ChevronSmallBottom.tsx

@@ -1,11 +1,11 @@
-import { SvgIcon } from '@mui/material';
+import { Svg } from '../Svg';
 import { IconProps } from '../types';
 
 export const ChevronSmallBottom = ({ ...props }: IconProps) => (
-  <SvgIcon {...props}>
+  <Svg {...props}>
     <path
       d="M6.643 9.069C6.291 9.193 6 9.614 6 10c0 .08.029.234.065.343.059.179.304.437 2.67 2.808 1.724 1.728 2.659 2.637 2.765 2.688a.925.925 0 0 0 .725.062c.234-.066.244-.076 2.869-2.694 2.011-2.005 2.654-2.67 2.717-2.807.215-.472.01-1.036-.471-1.292-.211-.113-.656-.119-.86-.013-.077.04-1.125 1.056-2.33 2.258l-2.189 2.186-2.211-2.204c-1.998-1.993-2.229-2.211-2.407-2.27a1.032 1.032 0 0 0-.7.004"
       fillRule="evenodd"
     />
-  </SvgIcon>
+  </Svg>
 );

package/{src → icons}/ChevronSmallLeft.tsx

@@ -1,11 +1,11 @@
-import { SvgIcon } from '@mui/material';
+import { Svg } from '../Svg';
 import { IconProps } from '../types';
 
 export const ChevronSmallLeft = ({ ...props }: IconProps) => (
-  <SvgIcon {...props}>
+  <Svg {...props}>
     <path
       d="M14.64 6.068c-.155.053-.543.424-2.791 2.667-1.885 1.881-2.636 2.655-2.7 2.785-.12.245-.12.636 0 .86.05.094 1.178 1.25 2.718 2.786 2.823 2.814 2.724 2.728 3.133 2.728.701 0 1.199-.746.917-1.374-.061-.137-.598-.698-2.268-2.37l-2.188-2.189 2.204-2.211c1.993-1.998 2.211-2.229 2.27-2.407a1.004 1.004 0 0 0-1.295-1.275"
       fillRule="evenodd"
     />
-  </SvgIcon>
+  </Svg>
 );

package/{src → icons}/ChevronSmallRight.tsx

@@ -1,11 +1,11 @@
-import { SvgIcon } from '@mui/material';
+import { Svg } from '../Svg';
 import { IconProps } from '../types';
 
 export const ChevronSmallRight = ({ ...props }: IconProps) => (
-  <SvgIcon {...props}>
+  <Svg {...props}>
     <path
       d="M9.617 6.177c-.346.15-.617.556-.616.923.001.398.007.404 2.35 2.75l2.188 2.189-2.204 2.211c-1.993 1.998-2.211 2.229-2.27 2.407-.129.39-.044.766.234 1.044s.654.363 1.044.234c.179-.059.437-.304 2.808-2.67 1.728-1.724 2.637-2.659 2.688-2.765a.925.925 0 0 0 .062-.725c-.067-.234-.075-.243-2.694-2.866-1.753-1.755-2.681-2.657-2.79-2.71-.192-.093-.61-.105-.8-.022"
       fillRule="evenodd"
     />
-  </SvgIcon>
+  </Svg>
 );

package/{src → icons}/ChevronSmallTop.tsx

@@ -1,11 +1,11 @@
-import { SvgIcon } from '@mui/material';
+import { Svg } from '../Svg';
 import { IconProps } from '../types';
 
 export const ChevronSmallTop = ({ ...props }: IconProps) => (
-  <SvgIcon {...props}>
+  <Svg {...props}>
     <path
       d="M11.62 9.059c-.088.033-.168.06-.179.06-.01.001-1.195 1.176-2.633 2.611-1.537 1.535-2.647 2.674-2.694 2.765a1.056 1.056 0 0 0-.062.76.96.96 0 0 0 .478.568.998.998 0 0 0 .91.021c.123-.063.872-.783 2.35-2.257l2.17-2.165 2.21 2.206c2.207 2.203 2.21 2.206 2.45 2.275.856.246 1.56-.63 1.155-1.437-.105-.208-5.115-5.202-5.344-5.327-.244-.133-.582-.166-.811-.08"
       fillRule="evenodd"
     />
-  </SvgIcon>
+  </Svg>
 );

package/{src → icons}/ChevronUp.tsx

@@ -1,11 +1,11 @@
-import { SvgIcon } from '@mui/material';
+import { Svg } from '../Svg';
 import { IconProps } from '../types';
 
 export const ChevronUp = ({ ...props }: IconProps) => (
-  <SvgIcon {...props}>
+  <Svg {...props}>
     <path
       d="M12.08 7.603c-.257.115-7.317 7.163-7.47 7.457-.33.637.147 1.426.87 1.436.451.006.359.087 3.84-3.395L12.5 9.92l3.2 3.196c2.284 2.282 3.251 3.222 3.38 3.286.391.196.948.06 1.204-.294.243-.335.28-.696.107-1.048-.052-.105-1.31-1.393-3.665-3.751-2.77-2.774-3.631-3.613-3.784-3.69a1.06 1.06 0 0 0-.862-.016"
       fillRule="evenodd"
     />
-  </SvgIcon>
+  </Svg>
 );

package/{src → icons}/Cite.tsx

@@ -1,11 +1,11 @@
-import { SvgIcon } from '@mui/material';
+import { Svg } from '../Svg';
 import { IconProps } from '../types';
 
 export const Cite = ({ ...props }: IconProps) => (
-  <SvgIcon {...props}>
+  <Svg {...props}>
     <path
       d="M4.564 9.424c-.651.665-1.126 1.439-1.379 2.245-.158.504-.184.756-.185 1.761v.93h2.48v-.931c0-1.002.037-1.441.162-1.903.09-.33.398-1.008.646-1.418.094-.157.149-.287.128-.306-.02-.018-.27-.164-.556-.323a61.573 61.573 0 0 1-.694-.39l-.174-.101-.428.436m3.919 0c-.779.792-1.298 1.727-1.499 2.704-.048.232-.064.547-.064 1.27v.962H9.4v-.97c0-1.071.052-1.553.219-2.051.107-.32.382-.893.605-1.264.075-.124.136-.235.136-.247 0-.011-.265-.169-.59-.35-.325-.181-.65-.365-.724-.409l-.133-.08-.43.435m6.157.95c0 .994-.059 1.663-.183 2.094-.1.344-.453 1.116-.693 1.514l-.122.202.724.407.723.407.215-.183c.636-.544 1.302-1.556 1.592-2.419.154-.46.183-.743.184-1.786v-.97h-2.44v.734m3.87.436c-.016 1.101-.024 1.193-.121 1.558-.107.4-.471 1.203-.722 1.592-.098.152-.127.228-.094.246l.725.407.678.381.106-.075c.058-.042.261-.239.451-.438.745-.784 1.296-1.857 1.424-2.776.024-.171.043-.705.043-1.188V9.64h-2.472l-.018 1.17"
       fillRule="evenodd"
     />
-  </SvgIcon>
+  </Svg>
 );

package/{src → icons}/Clip.tsx

@@ -1,11 +1,11 @@
-import { SvgIcon } from '@mui/material';
+import { Svg } from '../Svg';
 import { IconProps } from '../types';
 
 export const Clip = ({ ...props }: IconProps) => (
-  <SvgIcon {...props}>
+  <Svg {...props}>
     <path
       d="M13.62 2.985c-.766.116-1.312.28-1.88.565-.824.413-.855.44-4.151 3.727-2.073 2.067-3.097 3.116-3.15 3.226-.147.303-.071.747.166.965a.85.85 0 0 0 .866.15c.104-.043 1.063-.973 3.169-3.074 1.83-1.825 3.125-3.086 3.286-3.199a4.75 4.75 0 0 1 1.376-.632c.511-.129 1.403-.129 1.918-.001.481.12 1.16.458 1.563.779 1.616 1.289 1.964 3.692.781 5.398-.141.204-1.369 1.457-4.113 4.194-4.282 4.273-4.055 4.069-4.715 4.238a2.394 2.394 0 0 1-2.828-1.444c-.272-.682-.231-1.366.123-2.057.131-.256.414-.551 3.366-3.513 1.792-1.797 3.301-3.279 3.398-3.337a.82.82 0 0 1 1.104.285.981.981 0 0 1 .059.732c-.023.062-1.119 1.193-2.434 2.513-1.316 1.32-2.433 2.459-2.482 2.532a.79.79 0 0 0-.11.36.81.81 0 0 0 1.136.81c.221-.1 4.984-4.869 5.216-5.222a2.33 2.33 0 0 0 .37-1.26c.005-.447-.052-.714-.24-1.109a2.367 2.367 0 0 0-.83-.963 2.237 2.237 0 0 0-1.092-.411 2.414 2.414 0 0 0-1.412.246l-.34.167-3.293 3.285c-1.811 1.807-3.378 3.393-3.483 3.525a3.975 3.975 0 0 0-.807 1.748 4.248 4.248 0 0 0 .061 1.832 4.067 4.067 0 0 0 3.908 2.999c.877.002 1.781-.29 2.424-.78.331-.253 7.982-7.908 8.214-8.219a5.79 5.79 0 0 0 1.12-2.748c.056-.425.024-1.343-.063-1.772a5.71 5.71 0 0 0-4.392-4.444c-.36-.079-1.507-.137-1.809-.091"
       fillRule="evenodd"
     />
-  </SvgIcon>
+  </Svg>
 );

package/{src → icons}/Clock.tsx

@@ -1,11 +1,11 @@
-import { SvgIcon } from '@mui/material';
+import { Svg } from '../Svg';
 import { IconProps } from '../types';
 
 export const Clock = ({ ...props }: IconProps) => (
-  <SvgIcon {...props}>
+  <Svg {...props}>
     <path
       d="M11.12 2.039c-1.804.181-3.413.768-4.84 1.767-3.542 2.48-5.102 6.953-3.858 11.059a9.762 9.762 0 0 0 2.517 4.196 9.792 9.792 0 0 0 3.333 2.217c3.362 1.332 7.041.802 9.928-1.433.437-.338 1.307-1.208 1.645-1.645C21.255 16.379 22 14.234 22 12c0-4.568-3.158-8.613-7.57-9.697-.984-.241-2.402-.355-3.31-.264m1.62 2.002A7.98 7.98 0 0 1 19.182 8.5a7.965 7.965 0 0 1-1.417 9.03A7.977 7.977 0 0 1 12 19.999c-3.765 0-7.052-2.668-7.823-6.351a7.995 7.995 0 0 1 4.324-8.831 7.919 7.919 0 0 1 4.239-.776m-1.123 1.536c-.182.079-.41.293-.509.479-.088.164-.088.165-.099 3.121-.01 2.655-.004 2.977.055 3.16.06.186.222.36 1.931 2.075 2.099 2.106 2.078 2.089 2.559 2.062.527-.03.886-.382.919-.9.031-.489.067-.443-1.797-2.314l-1.674-1.68-.011-2.68c-.011-2.671-.011-2.681-.099-2.844a1.21 1.21 0 0 0-.518-.481c-.166-.07-.596-.069-.757.002"
       fillRule="evenodd"
     />
-  </SvgIcon>
+  </Svg>
 );

package/{src → icons}/Close.tsx

@@ -1,11 +1,11 @@
-import { SvgIcon } from '@mui/material';
+import { Svg } from '../Svg';
 import { IconProps } from '../types';
 
 export const Close = ({ ...props }: IconProps) => (
-  <SvgIcon {...props}>
+  <Svg {...props}>
     <path
       d="M6.213 5.442a.97.97 0 0 0-.756.701.891.891 0 0 0 .068.711c.055.11.926 1.011 2.568 2.656L10.579 12l-2.503 2.51c-1.547 1.551-2.528 2.564-2.568 2.653a.999.999 0 0 0 .627 1.377.883.883 0 0 0 .719-.065c.11-.055 1.011-.926 2.656-2.568L12 13.421l2.49 2.486c1.645 1.642 2.546 2.513 2.656 2.568.4.199.822.129 1.14-.189a.948.948 0 0 0 .189-1.14c-.055-.11-.926-1.011-2.568-2.656L13.421 12l2.486-2.49c1.642-1.645 2.513-2.546 2.568-2.656a.891.891 0 0 0 .068-.711 1.02 1.02 0 0 0-.529-.626 1.059 1.059 0 0 0-.856.002c-.125.062-.919.829-2.668 2.574L12 10.579 9.51 8.093C7.898 6.484 6.964 5.58 6.86 5.53c-.2-.098-.431-.13-.647-.088"
       fillRule="evenodd"
     />
-  </SvgIcon>
+  </Svg>
 );

package/{src → icons}/Code.tsx

@@ -1,8 +1,8 @@
-import { SvgIcon } from '@mui/material';
+import { Svg } from '../Svg';
 import { IconProps } from '../types';
 
 export const Code = ({ ...props }: IconProps) => (
-  <SvgIcon {...props}>
+  <Svg {...props}>
     <path d="M12.923 6.15a2808.986 2808.986 0 0 0-2.803 10.81c0 .024.177.04.457.04.401 0 .46-.009.479-.07.066-.218 2.824-10.849 2.824-10.886 0-.029-.151-.044-.458-.044h-.459l-.04.15M5.8 10.194l-2.78 1.468-.011.364-.012.364 2.783 1.465a291.25 291.25 0 0 0 2.802 1.465c.01 0 .018-.252.018-.56v-.56l-2.12-1.06c-1.213-.606-2.12-1.083-2.12-1.114 0-.03.9-.497 2.12-1.099L8.6 9.881V9.3c0-.319-.005-.579-.01-.577L5.8 10.194m9.6-.892v.579l2.12 1.046c1.219.602 2.12 1.069 2.12 1.099 0 .031-.908.508-2.12 1.114L15.4 14.2v.56c0 .308.008.56.018.56.01 0 1.271-.659 2.802-1.465l2.783-1.465-.012-.364-.011-.364-2.34-1.232-2.79-1.47-.45-.237v.579" />
-  </SvgIcon>
+  </svg>
 );

package/{src → icons}/Collapse.tsx

@@ -1,11 +1,11 @@
-import { SvgIcon } from '@mui/material';
+import { Svg } from '../Svg';
 import { IconProps } from '../types';
 
 export const Collapse = ({ ...props }: IconProps) => (
-  <SvgIcon {...props}>
+  <Svg {...props}>
     <path
       d="M11.338 3.816c-.68.13-1.237.37-1.737.749-.165.126-1.005.937-1.866 1.802C6.04 8.071 6.062 8.043 6.066 8.48a.977.977 0 0 0 .548.877c.237.115.647.114.878-.001.107-.054.745-.657 1.768-1.672 1.7-1.687 1.773-1.747 2.263-1.862.477-.113 1-.051 1.414.167.146.077.654.555 1.803 1.695 1.023 1.015 1.661 1.618 1.768 1.672.231.115.641.116.878.001a1.1 1.1 0 0 0 .485-.514c.092-.214.081-.591-.022-.805-.12-.247-3.242-3.355-3.609-3.593a3.901 3.901 0 0 0-2.12-.667 3.895 3.895 0 0 0-.782.038M6.654 14.618c-.207.09-.444.333-.521.535-.097.252-.089.588.02.812.118.244 3.242 3.353 3.607 3.59.389.252.811.442 1.238.556.332.089.463.103 1.002.103.539 0 .67-.014 1.002-.103a4.366 4.366 0 0 0 1.238-.556c.367-.238 3.489-3.346 3.609-3.593.236-.489-.011-1.136-.515-1.347-.205-.086-.626-.071-.826.029-.108.054-.733.646-1.748 1.655-.982.976-1.654 1.613-1.775 1.683a2.056 2.056 0 0 1-1.97 0c-.121-.07-.793-.707-1.775-1.683-1.015-1.009-1.64-1.601-1.748-1.655-.199-.099-.638-.113-.838-.026"
       fillRule="evenodd"
     />
-  </SvgIcon>
+  </Svg>
 );

package/{src → icons}/ColorPicker.tsx

@@ -1,11 +1,11 @@
-import { SvgIcon } from '@mui/material';
+import { Svg } from '../Svg';
 import { IconProps } from '../types';
 
 export const ColorPicker = ({ ...props }: IconProps) => (
-  <SvgIcon {...props}>
+  <Svg {...props}>
     <path
       d="M17.046 3.883a2.73 2.73 0 0 0-.46.164c-.266.12-.37.213-1.477 1.31l-1.191 1.181-.879-.879-.879-.879-.71.71-.709.71.699.7.699.7-3.825 3.83c-2.104 2.106-3.852 3.884-3.884 3.95a1.413 1.413 0 0 0-.086.233c-.046.191-.504 3.434-.504 3.567 0 .398.305.801.7.925l.229.072 1.777-.252c.977-.14 1.844-.272 1.925-.296.122-.035.853-.745 4.009-3.896 2.124-2.119 3.879-3.853 3.9-3.853.022 0 .35.31.73.69l.69.689.71-.709.71-.71-.879-.879-.879-.879 1.161-1.171c1.252-1.263 1.353-1.394 1.475-1.915.112-.474.066-.864-.159-1.336-.114-.241-.218-.364-.746-.881-.38-.373-.692-.643-.822-.712-.364-.194-.899-.268-1.325-.184m.054 3.716L16.04 8.66l-.35-.35-.349-.35L16.4 6.9l1.059-1.059.351.349.351.349-1.061 1.06m-3.53 2.831c.368.368.67.687.67.71 0 .022-1.48 1.519-3.29 3.326l-3.29 3.287-.79.11c-.435.06-.801.099-.814.086-.014-.013.025-.381.085-.817l.11-.792 3.284-3.29c1.807-1.81 3.303-3.29 3.324-3.29.022 0 .342.301.711.67"
       fillRule="evenodd"
     />
-  </SvgIcon>
+  </Svg>
 );

package/{src → icons}/Copy.tsx

@@ -1,11 +1,11 @@
-import { SvgIcon } from '@mui/material';
+import { Svg } from '../Svg';
 import { IconProps } from '../types';
 
 export const Copy = ({ ...props }: IconProps) => (
-  <SvgIcon {...props}>
+  <Svg {...props}>
     <path
       d="M3.987 1.112c-.223.036-.636.204-.856.349-.454.3-.806.817-.916 1.347-.065.312-.068 14.605-.003 14.838.066.239.296.513.53.634.434.223.93.15 1.266-.186.352-.351.325.275.325-7.723V3.25h6.038c6.782 0 6.291.024 6.638-.324a1.066 1.066 0 0 0 0-1.519c-.348-.348.161-.324-6.758-.318-3.386.003-6.205.014-6.264.023M8.32 5.445a2.822 2.822 0 0 0-.855.349 2.215 2.215 0 0 0-.917 1.347c-.068.325-.068 15.726 0 16.051.169.812.865 1.507 1.677 1.677.323.067 12.477.067 12.8 0 .812-.17 1.508-.865 1.677-1.677.068-.325.068-15.726 0-16.051-.149-.716-.666-1.305-1.404-1.599l-.26-.104-6.305-.005c-3.467-.003-6.353.003-6.413.012m12.263 9.722v7.583H8.667V7.583h11.916v7.584"
       fillRule="evenodd"
     />
-  </SvgIcon>
+  </Svg>
 );

package/{src → icons}/Divider.tsx

@@ -1,11 +1,11 @@
-import { SvgIcon } from '@mui/material';
+import { Svg } from '../Svg';
 import { IconProps } from '../types';
 
 export const Divider = ({ ...props }: IconProps) => (
-  <SvgIcon {...props}>
+  <Svg {...props}>
     <path
       d="M4.252 11.078C4.03 11.213 4 11.325 4 12s.03.787.252.922c.126.076.261.078 7.748.078s7.622-.002 7.748-.078c.222-.135.252-.247.252-.922s-.03-.787-.252-.922C19.622 11.002 19.487 11 12 11s-7.622.002-7.748.078"
       fillRule="evenodd"
     />
-  </SvgIcon>
+  </Svg>
 );

package/{src → icons}/Download.tsx

@@ -1,11 +1,11 @@
-import { SvgIcon } from '@mui/material';
+import { Svg } from '../Svg';
 import { IconProps } from '../types';
 
 export const Download = ({ ...props }: IconProps) => (
-  <SvgIcon {...props}>
+  <Svg {...props}>
     <path
       d="M6.378 5.058A4.002 4.002 0 0 0 3.058 8.4c-.085.558-.085 6.642 0 7.2A3.982 3.982 0 0 0 6.4 18.942c.558.085 6.642.085 7.2 0a3.968 3.968 0 0 0 2.978-2.191l.212-.428.635.406c.349.223.752.449.895.502.728.27 1.514.093 2.084-.47.286-.284.474-.622.552-.993.062-.296.062-7.24 0-7.536-.21-1.004-1.232-1.718-2.236-1.563-.36.056-.646.192-1.359.648-.393.252-.584.354-.596.318a9.287 9.287 0 0 0-.209-.434A3.97 3.97 0 0 0 13.6 5.058c-.513-.078-6.718-.078-7.222 0m7.114 2.002c.36.093.626.25.912.536.286.286.443.552.536.912.089.342.089 6.642 0 6.984-.093.36-.25.626-.536.912-.286.286-.552.443-.912.536-.342.089-6.642.089-6.984 0-.36-.093-.626-.25-.912-.536-.286-.286-.443-.552-.536-.912-.089-.342-.089-6.642 0-6.984.093-.36.25-.626.536-.912.28-.28.55-.442.895-.534.32-.087 6.67-.089 7.001-.002m5.498 6.613-.01 1.673-.98-.624-.98-.625V9.906l.98-.624.98-.625.01 1.672c.006.919.006 2.424 0 3.344M7.667 9.065C7.303 9.177 7 9.602 7 10c0 .402.312.827.69.939.297.088 2.323.088 2.62 0 .378-.112.69-.537.69-.939 0-.402-.312-.827-.69-.939-.292-.087-2.358-.084-2.643.004"
       fillRule="evenodd"
     />
-  </SvgIcon>
+  </Svg>
 );