@axinom/mosaic-ui 0.66.0-rc.9 → 0.67.0-rc.0

package/src/components/Icons/Icons.tsx

@@ -1,1030 +1,622 @@
 import clsx from 'clsx';
 import React from 'react';
+import { SvgElement, SvgElementProps } from '../VisualElements/SvgElement';
 import { IconName } from './Icons.models';
 import classes from './Icons.scss';
 
-export interface IconsProps {
-  /** Icon type */
-  icon?: IconName;
-  /** Optional class */
-  className?: string;
-}
+const DEFAULT_PATH_PROPS = {
+  vectorEffect: 'non-scaling-stroke' as const,
+  fill: 'none',
+  strokeWidth: '2',
+};
 
-const AxiIcon: React.FC<{ className?: string }> = ({ className }) => (
-  <svg
-    className={clsx(classes.icons, className)}
-    version="1.1"
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 40 40"
-  >
+const DEFAULT_RECT_PROPS = {
+  vectorEffect: 'non-scaling-stroke' as const,
+};
+
+const AxiIcon: React.FC<SvgElementProps> = (props) => (
+  <SvgElement {...props}>
     <path
-      vectorEffect="non-scaling-stroke"
-      fill="none"
-      strokeWidth="2"
+      {...DEFAULT_PATH_PROPS}
       d="M24.3,36h-8.5c-5,0-9.1-4.1-9.1-9.1v-5.3c0-5,4.1-9.1,9.1-9.1h8.5c5,0,9.1,4.1,9.1,9.1v5.3c0,5-4.1,9.1-9.1,9.1ZM6.8,20.4h-.9c-1.3,0-2.3,1.1-2.3,2.3v3c0,1.3,1.1,2.3,2.3,2.3h.9M33.3,28.2h.9c1.3,0,2.3-1.1,2.3-2.3v-3c0-1.3-1.1-2.3-2.3-2.3h-.9M14.1,20.4c-1.4,0-2.5,1.1-2.5,2.5s1.1,2.5,2.5,2.5,2.5-1.1,2.5-2.5-1.1-2.5-2.5-2.5ZM19.7,4c-1.4,0-2.5,1.1-2.5,2.5s1.1,2.5,2.5,2.5,2.5-1.1,2.5-2.5-1.1-2.5-2.5-2.5ZM25.9,20.4c-1.4,0-2.5,1.1-2.5,2.5s1.1,2.5,2.5,2.5,2.5-1.1,2.5-2.5-1.1-2.5-2.5-2.5ZM19.7,9v3.5M16.1,30.2h7.8"
     />
-  </svg>
+  </SvgElement>
 );
 
-const ArchiveIcon: React.FC<{ className?: string }> = ({ className }) => (
-  <svg
-    className={clsx(classes.icons, className)}
-    version="1.1"
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 40 40"
-  >
+const ArchiveIcon: React.FC<SvgElementProps> = (props) => (
+  <SvgElement {...props}>
     <path
-      vectorEffect="non-scaling-stroke"
-      fill="none"
-      strokeWidth="2"
+      {...DEFAULT_PATH_PROPS}
       d="M27.6,14.7H39V39H1.1V14.6h11.6 M9.9,22.1l10.3,9.1
 	l10.3-9.1 M20.1,31.2V0"
     />
-  </svg>
+  </SvgElement>
 );
 
-const AudioIcon: React.FC<{ className?: string }> = ({ className }) => (
-  <svg
-    className={clsx(classes.icons, className)}
-    version="1.1"
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 40 40"
-  >
+const AudioIcon: React.FC<SvgElementProps> = (props) => (
+  <SvgElement {...props}>
     <path
-      vectorEffect="non-scaling-stroke"
-      fill="none"
-      strokeWidth="2"
+      {...DEFAULT_PATH_PROPS}
       d="M20,2c9.9,0,18,8.1,18,18s-8.1,18-18,18S2,29.9,2,20,10.1,2,20,2ZM14.5,16.7h-5.1v6.7h5.1l7.3,5V11.7l-7.3,5ZM26.1,24.5c2.5,0,4.5-2,4.5-4.5s-2-4.5-4.5-4.5"
     />
-  </svg>
+  </SvgElement>
 );
 
-const DescriptiveAudioIcon: React.FC<{ className?: string }> = ({
-  className,
-}) => (
-  <svg
-    className={clsx(classes.icons, className)}
-    version="1.1"
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 40 40"
-  >
+const DescriptiveAudioIcon: React.FC<SvgElementProps> = (props) => (
+  <SvgElement {...props}>
     <path
-      fill="none"
-      strokeWidth="2"
+      {...DEFAULT_PATH_PROPS}
       d="M20,2c9.9,0,18,8.1,18,18s-8.1,18-18,18S2,29.9,2,20,10.1,2,20,2ZM17.1,25.5v-11h-2.6l-4.9,11M11.5,21h5.5M29.9,19.9v-.5c0-2.7-2.4-4.8-5.3-4.8h-1.9v10.2h1.9c3,0,5.3-2.2,5.3-4.8Z"
-      vectorEffect="non-scaling-stroke"
     />
-  </svg>
+  </SvgElement>
 );
 
-const ThumbnailsIcon: React.FC<{ className?: string }> = ({ className }) => (
-  <svg
-    className={clsx(classes.icons, className)}
-    version="1.1"
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 40 40"
-  >
+const ThumbnailsIcon: React.FC<SvgElementProps> = (props) => (
+  <SvgElement {...props}>
     <path
-      vectorEffect="non-scaling-stroke"
-      fill="none"
-      strokeWidth="2"
+      {...DEFAULT_PATH_PROPS}
       d="M38,20c0,9.9-8.1,18-18,18S2,29.9,2,20,10.1,2,20,2s18,8.1,18,18ZM14.3,12c0,1.6,1.2,2.7,2.7,2.7s2.7-1.1,2.7-2.7-1.2-2.7-2.7-2.7-2.7,1.1-2.7,2.7ZM37.5,24l-8.1-8.1-11.4,11.4-6.6-6.6-7.4,7.4"
     />
-  </svg>
+  </SvgElement>
 );
 
-const BackwardOne: React.FC<{ className?: string }> = ({ className }) => (
-  <svg
-    className={clsx(classes.icons, className)}
-    version="1.1"
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 40 40"
-  >
+const BackwardOne: React.FC<SvgElementProps> = (props) => (
+  <SvgElement {...props}>
     <path
-      vectorEffect="non-scaling-stroke"
-      fill="none"
-      stroke="#1478AF"
-      strokeWidth="2"
+      {...DEFAULT_PATH_PROPS}
       d="M4.1,10.5C7.7,5.4,14.3,2,20,2c9.9,0,18,8.1,18,18s-8.1,18-18,18S2,29.9,2,20 M12.1,10.5H4.1V2.5 M20.9,25.5V15
-	c0,0-1.1,2.1-3.8,3.1"
+      c0,0-1.1,2.1-3.8,3.1"
     />
-  </svg>
+  </SvgElement>
 );
 
-const BackwardTen: React.FC<{ className?: string }> = ({ className }) => (
-  <svg
-    className={clsx(classes.icons, className)}
-    version="1.1"
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 40 40"
-  >
+const BackwardTen: React.FC<SvgElementProps> = (props) => (
+  <SvgElement {...props}>
     <path
-      vectorEffect="non-scaling-stroke"
-      fill="none"
-      stroke="#1478AF"
-      strokeWidth="2"
+      {...DEFAULT_PATH_PROPS}
       d="M4.2,10.5C7.8,5.4,14.4,2,20.1,2c9.9,0,18,8.1,18,18s-8.1,18-18,18s-18-8.1-18-18 M12.1,10.5H4.2V2.6
-	 M12.3,18.1c2.7-1,3.8-3.1,3.8-3.1v10.5 M23.6,15.3c1.8,0,3.2,2.3,3.2,5.2s-1.4,5.2-3.2,5.2s-3.2-2.3-3.2-5.2S21.8,15.3,23.6,15.3z"
+       M12.3,18.1c2.7-1,3.8-3.1,3.8-3.1v10.5 M23.6,15.3c1.8,0,3.2,2.3,3.2,5.2s-1.4,5.2-3.2,5.2s-3.2-2.3-3.2-5.2S21.8,15.3,23.6,15.3z"
     />
-  </svg>
+  </SvgElement>
 );
 
-const BlockIcon: React.FC<{ className?: string }> = ({ className }) => (
-  <svg
-    className={clsx(classes.icons, className)}
-    version="1.1"
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 40 40"
-  >
+const BlockIcon: React.FC<SvgElementProps> = (props) => (
+  <SvgElement {...props}>
     <path
-      vectorEffect="non-scaling-stroke"
-      fill="none"
-      strokeWidth="2"
+      {...DEFAULT_PATH_PROPS}
       d="M20.4,2.4c9.9,0,18,8.1,18,18s-8.1,18-18,18s-18-8.1-18-18S10.5,2.4,20.4,2.4z M9.8,20.4H31"
     />
-  </svg>
+  </SvgElement>
 );
 
-const BulkIcon: React.FC<{ className?: string }> = ({ className }) => (
-  <svg
-    className={clsx(classes.icons, className)}
-    version="1.1"
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 40 40"
-  >
+const BulkIcon: React.FC<SvgElementProps> = (props) => (
+  <SvgElement {...props}>
     <path
-      vectorEffect="non-scaling-stroke"
-      fill="none"
-      strokeWidth="2"
+      {...DEFAULT_PATH_PROPS}
       d="M33.1,38.6H1.3V6.8h31.8V38.6z M26.8,14.4L15.1,27.8l-7.1-7.5 M38.7,31.2V1.4h-29"
     />
-  </svg>
+  </SvgElement>
 );
 
-const BulkEditIcon: React.FC<{ className?: string }> = ({ className }) => (
-  <svg
-    className={clsx(classes.icons, className)}
-    version="1.1"
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 40 40"
-  >
+export const BulkEditIcon: React.FC<SvgElementProps> = (props) => (
+  <SvgElement {...props}>
     <path
-      vectorEffect="non-scaling-stroke"
-      fill="none"
-      strokeWidth="2"
+      {...DEFAULT_PATH_PROPS}
       d="M32.7,18.5l4.4,4.4-10.5,10.5-4.4-4.4,10.5-10.5ZM32.2,12.9v-7.7H10M8.5,16.5h12.9M8.5,21h12.9M8.5,25.5h7M27.2,18.5v-8.6H2.9v24.7h14.4M22.3,29l-1.6,5.8,6-1.4"
     />
-  </svg>
+  </SvgElement>
 );
 
-const CalendarIcon: React.FC<{ className?: string }> = ({ className }) => (
-  <svg
-    className={clsx(classes.icons, className)}
-    version="1.1"
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 40 40"
-  >
+export const CalendarIcon: React.FC<SvgElementProps> = (props) => (
+  <SvgElement {...props}>
     <path
-      vectorEffect="non-scaling-stroke"
-      fill="none"
-      stroke="#0E7CB4"
-      strokeWidth="2"
+      {...DEFAULT_PATH_PROPS}
       d="M12.6,34.8H1.9V5h33.8v8.6 M26.7,15.1c-6.3,0-11.5,5.2-11.5,11.5S20.3,38,26.7,38s11.4-5.2,11.4-11.6
-      S33,15.1,26.7,15.1z M35.7,10.9 M1.9,10.9 M10.9,1v9.4 M26.7,1v9.4 M26.2,19.1v8.2l0,0h6.5"
+        S33,15.1,26.7,15.1z M35.7,10.9 M1.9,10.9 M10.9,1v9.4 M26.7,1v9.4 M26.2,19.1v8.2l0,0h6.5"
     />
-  </svg>
+  </SvgElement>
 );
 
-const CheckmarkIcon: React.FC<{ className?: string }> = ({ className }) => (
-  <svg
-    className={clsx(classes.icons, className)}
-    version="1.1"
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 40 40"
-  >
-    <path
-      vectorEffect="non-scaling-stroke"
-      fill="none"
-      strokeWidth="2"
-      d="M0.9,17.8L16,32.5l23.1-25"
-    />
-  </svg>
+const CheckmarkIcon: React.FC<SvgElementProps> = (props) => (
+  <SvgElement {...props}>
+    <path {...DEFAULT_PATH_PROPS} d="M0.9,17.8L16,32.5l23.1-25" />
+  </SvgElement>
 );
 
-const ChevronDownIcon: React.FC<{ className?: string }> = ({ className }) => (
-  <svg
-    className={clsx(classes.icons, className)}
-    version="1.1"
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 40 40"
-  >
+const ChevronDownIcon: React.FC<SvgElementProps> = (props) => (
+  <SvgElement {...props}>
     <path
-      vectorEffect="non-scaling-stroke"
-      fill="none"
-      strokeWidth="2"
+      {...DEFAULT_PATH_PROPS}
       transform="rotate(90, 20, 20)"
       d="M9.2,39.1L30.8,20L9.2,0.9"
     />
-  </svg>
+  </SvgElement>
 );
 
-const ChevronLeftIcon: React.FC<{ className?: string }> = ({ className }) => (
-  <svg
-    className={clsx(classes.icons, className)}
-    version="1.1"
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 40 40"
-  >
+const ChevronLeftIcon: React.FC<SvgElementProps> = (props) => (
+  <SvgElement {...props}>
     <path
-      vectorEffect="non-scaling-stroke"
-      fill="none"
-      strokeWidth="2"
+      {...DEFAULT_PATH_PROPS}
       transform="rotate(180, 20, 20)"
       d="M9.2,39.1L30.8,20L9.2,0.9"
     />
-  </svg>
+  </SvgElement>
 );
 
-const ChevronRightIcon: React.FC<{ className?: string }> = ({ className }) => (
-  <svg
-    className={clsx(classes.icons, className)}
-    version="1.1"
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 40 40"
-  >
-    <path
-      vectorEffect="non-scaling-stroke"
-      fill="none"
-      strokeWidth="2"
-      d="M9.2,39.1L30.8,20L9.2,0.9"
-    />
-  </svg>
+const ChevronRightIcon: React.FC<SvgElementProps> = (props) => (
+  <SvgElement {...props}>
+    <path {...DEFAULT_PATH_PROPS} d="M9.2,39.1L30.8,20L9.2,0.9" />
+  </SvgElement>
 );
 
-const ChevronUpIcon: React.FC<{ className?: string }> = ({ className }) => (
-  <svg
-    className={clsx(classes.icons, className)}
-    version="1.1"
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 40 40"
-  >
+const ChevronUpIcon: React.FC<SvgElementProps> = (props) => (
+  <SvgElement {...props}>
     <path
-      vectorEffect="non-scaling-stroke"
-      fill="none"
-      strokeWidth="2"
+      {...DEFAULT_PATH_PROPS}
       transform="rotate(-90, 20, 20)"
       d="M9.2,39.1L30.8,20L9.2,0.9"
     />
-  </svg>
+  </SvgElement>
 );
 
-const ClosedCaptionIcon: React.FC<{ className?: string }> = ({ className }) => (
-  <svg
-    className={clsx(classes.icons, className)}
-    version="1.1"
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 40 40"
-  >
+const ClosedCaptionIcon: React.FC<SvgElementProps> = (props) => (
+  <SvgElement {...props}>
     <path
-      vectorEffect="non-scaling-stroke"
-      fill="none"
-      stroke="#B7B7B7"
-      strokeWidth="2"
+      {...DEFAULT_PATH_PROPS}
       d="M20,2c9.9,0,18,8.1,18,18s-8.1,18-18,18S2,29.9,2,20,10.1,2,20,2ZM17.5,17.8c0-.7-.5-3-3.6-3s-3.6,2.3-3.6,4.3v1.6c0,1.3,0,4.6,3.6,4.6s3.8-2.6,3.8-3M29.6,17.8c0-.7-.5-3-3.6-3s-3.6,2.3-3.6,4.3v1.6c0,1.3,0,4.6,3.6,4.6s3.8-2.6,3.8-3"
     />
-  </svg>
+  </SvgElement>
 );
 
-const CopyIcon: React.FC<{ className?: string }> = ({ className }) => (
-  <svg
-    className={clsx(classes.icons, className)}
-    version="1.1"
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 40 40"
-  >
+const CopyIcon: React.FC<SvgElementProps> = (props) => (
+  <SvgElement {...props}>
     <path
-      vectorEffect="non-scaling-stroke"
-      fill="none"
-      stroke="#1478AF"
-      strokeWidth="2"
+      {...DEFAULT_PATH_PROPS}
       d="M29.6,38.8H3.2V8.4h17l9.3,9.3V38.8z M20.2,8.4v9.3h9.3 M33.4,31.6h3.4V10.5l-9.3-9.3h-17v3.2 M27.5,1.2v9.3
-	h9.3"
+      h9.3"
     />
-  </svg>
+  </SvgElement>
 );
 
-const DeleteIcon: React.FC<{ className?: string }> = ({ className }) => (
-  <svg
-    className={clsx(classes.icons, className)}
-    version="1.1"
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 40 40"
-  >
+const DeleteIcon: React.FC<SvgElementProps> = (props) => (
+  <SvgElement {...props}>
     <path
-      vectorEffect="non-scaling-stroke"
-      fill="none"
-      strokeWidth="2"
+      {...DEFAULT_PATH_PROPS}
       d="M6.5,7.3l2.9,31.3h21.1l2.9-31.3 M0.5,7.2h39 M15.1,13.4L16,33.1 M24.7,13.4l-0.9,19.7 M14.2,7.2l1.2-5.8h8.3
-      l1.1,5.8"
+        l1.1,5.8"
     />
-  </svg>
+  </SvgElement>
 );
 
-const DetailsIcon: React.FC<{ className?: string }> = ({ className }) => (
-  <svg
-    className={clsx(classes.icons, className)}
-    version="1.1"
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 40 40"
-  >
+const DetailsIcon: React.FC<SvgElementProps> = (props) => (
+  <SvgElement {...props}>
     <path
-      vectorEffect="non-scaling-stroke"
-      fill="none"
-      strokeWidth="2"
+      {...DEFAULT_PATH_PROPS}
       d="M4,8.7h32 M4,16.4h10.2 M36,31.3h-9.5 M18.3,16.4H36 M22.4,31.3H4 M4,24.1h32"
     />
-  </svg>
+  </SvgElement>
 );
 
-const DragIcon: React.FC<{ className?: string }> = ({ className }) => (
-  <svg
-    className={clsx(classes.icons, className)}
-    version="1.1"
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 40 40"
-  >
-    <rect x="11.4" y="5.4" />
-    <rect x="11.4" y="17.7" />
-    <rect x="11.4" y="30" />
-    <rect x="23.6" y="5.4" />
-    <rect x="23.6" y="17.7" />
-    <rect x="23.6" y="30" />
-  </svg>
-);
+const DragIcon: React.FC<SvgElementProps> = (props) => {
+  const RECT_PROPS = {
+    ...DEFAULT_RECT_PROPS,
+    width: '5.5',
+    height: '5.5',
+    fill: '#fff',
+  };
+
+  return (
+    <SvgElement {...props}>
+      <rect {...RECT_PROPS} x="11.4" y="5.4" />
+      <rect {...RECT_PROPS} x="11.4" y="17.7" />
+      <rect {...RECT_PROPS} x="11.4" y="30" />
+      <rect {...RECT_PROPS} x="23.6" y="5.4" />
+      <rect {...RECT_PROPS} x="23.6" y="17.7" />
+      <rect {...RECT_PROPS} x="23.6" y="30" />
+    </SvgElement>
+  );
+};
 
-const EllipsisIcon: React.FC<{ className?: string }> = ({ className }) => (
-  <svg
-    className={clsx(classes.icons, className)}
-    version="1.1"
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 40 40"
-  >
+const EllipsisIcon: React.FC<SvgElementProps> = (props) => (
+  <SvgElement {...props}>
     <path
-      vectorEffect="non-scaling-stroke"
-      fill="none"
-      strokeWidth="2"
+      {...DEFAULT_PATH_PROPS}
       d="M6.8,30c0,1.3-1.1,2.4-2.4,2.4S2,31.3,2,30s1.1-2.4,2.4-2.4S6.8,28.7,6.8,30z M20,27.6c-1.3,0-2.4,1.1-2.4,2.4
-      s1.1,2.4,2.4,2.4s2.4-1.1,2.4-2.4S21.3,27.6,20,27.6z M35.6,27.6c-1.3,0-2.4,1.1-2.4,2.4s1.1,2.4,2.4,2.4S38,31.3,38,30
-      S36.9,27.6,35.6,27.6z"
+        s1.1,2.4,2.4,2.4s2.4-1.1,2.4-2.4S21.3,27.6,20,27.6z M35.6,27.6c-1.3,0-2.4,1.1-2.4,2.4s1.1,2.4,2.4,2.4S38,31.3,38,30
+        S36.9,27.6,35.6,27.6z"
     />
-  </svg>
+  </SvgElement>
 );
 
-const ErrorIcon: React.FC<{ className?: string }> = ({ className }) => (
-  <svg
-    className={clsx(classes.icons, className)}
-    version="1.1"
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 40 40"
-  >
+const ErrorIcon: React.FC<SvgElementProps> = (props) => (
+  <SvgElement {...props}>
     <path
-      vectorEffect="non-scaling-stroke"
-      fill="none"
-      strokeWidth="2"
+      {...DEFAULT_PATH_PROPS}
       d="M20,2c9.9,0,18,8.1,18,18s-8.1,18-18,18S2,29.9,2,20S10.1,2,20,2z M12.5,12.5l15,15 M27.5,12.5l-15,15"
     />
-  </svg>
+  </SvgElement>
 );
 
-const ExternalIcon: React.FC<{ className?: string }> = ({ className }) => (
-  <svg
-    className={clsx(classes.icons, className)}
-    version="1.1"
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 40 40"
-  >
+const ExternalIcon: React.FC<SvgElementProps> = (props) => (
+  <SvgElement {...props}>
     <path
-      vectorEffect="non-scaling-stroke"
-      fill="none"
-      strokeWidth="2"
+      {...DEFAULT_PATH_PROPS}
       d="M39.8,14.8 M25.1,0.2 M38.9,15.7V1.3H24.8 M38.9,1.3
-	L16.4,23.8 M20.8,8.5H1.2v30.4h29.7V19.4"
+      L16.4,23.8 M20.8,8.5H1.2v30.4h29.7V19.4"
     />
-  </svg>
+  </SvgElement>
 );
 
-const FileIcon: React.FC<{ className?: string }> = ({ className }) => (
-  <svg
-    className={clsx(classes.icons, className)}
-    version="1.1"
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 40 40"
-  >
+const FileIcon: React.FC<SvgElementProps> = (props) => (
+  <SvgElement {...props}>
     <path
-      vectorEffect="non-scaling-stroke"
-      fill="none"
-      strokeWidth="2"
+      {...DEFAULT_PATH_PROPS}
       d="M1,34.7l4.4-18.8H39l-4.3,18.8L1,34.7L1,5.3h12.1
-      l3.5,3.8h18.1v6.9"
+        l3.5,3.8h18.1v6.9"
     />
-  </svg>
+  </SvgElement>
 );
 
-const FiltersIcon: React.FC<{ className?: string }> = ({ className }) => (
-  <svg
-    className={clsx(classes.icons, className)}
-    version="1.1"
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 40 40"
-  >
+const FiltersIcon: React.FC<SvgElementProps> = (props) => (
+  <SvgElement {...props}>
     <path
-      vectorEffect="non-scaling-stroke"
-      fill="none"
-      strokeWidth="2"
+      {...DEFAULT_PATH_PROPS}
       d="M5.7,4.7h28.6l-11.3,12v13.6l-6.5,5.1v-18.4L5.7,4.7Z"
     />
-  </svg>
+  </SvgElement>
 );
 
-const ForwardOne: React.FC<{ className?: string }> = ({ className }) => (
-  <svg
-    className={clsx(classes.icons, className)}
-    version="1.1"
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 40 40"
-  >
+const ForwardOne: React.FC<SvgElementProps> = (props) => (
+  <SvgElement {...props}>
     <path
-      vectorEffect="non-scaling-stroke"
-      fill="none"
-      strokeWidth="2"
+      {...DEFAULT_PATH_PROPS}
       d="M35.9,10.5C32.3,5.4,25.7,2,20,2C10.1,2,2,10.1,2,20s8.1,18,18,18s18-8.1,18-18 M28,10.5h7.9V2.6 M17.1,18.1
-	c2.7-1,3.8-3.1,3.8-3.1v10.5"
+      c2.7-1,3.8-3.1,3.8-3.1v10.5"
     />
-  </svg>
+  </SvgElement>
 );
 
-const ForwardTen: React.FC<{ className?: string }> = ({ className }) => (
-  <svg
-    className={clsx(classes.icons, className)}
-    version="1.1"
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 40 40"
-  >
+const ForwardTen: React.FC<SvgElementProps> = (props) => (
+  <SvgElement {...props}>
     <path
-      vectorEffect="non-scaling-stroke"
-      fill="none"
-      strokeWidth="2"
+      {...DEFAULT_PATH_PROPS}
       d="M35.9,10.5C32.3,5.4,25.7,2,20,2C10.1,2,2,10.1,2,20s8.1,18,18,18s18-8.1,18-18 M28,10.5h7.9V2.6 M12.3,18.1
-	c2.7-1,3.8-3.1,3.8-3.1v10.5 M23.6,15.3c1.8,0,3.2,2.3,3.2,5.2s-1.4,5.2-3.2,5.2s-3.2-2.3-3.2-5.2S21.8,15.3,23.6,15.3z"
+      c2.7-1,3.8-3.1,3.8-3.1v10.5 M23.6,15.3c1.8,0,3.2,2.3,3.2,5.2s-1.4,5.2-3.2,5.2s-3.2-2.3-3.2-5.2S21.8,15.3,23.6,15.3z"
     />
-  </svg>
+  </SvgElement>
 );
 
-const InfoIcon: React.FC<{ className?: string }> = ({ className }) => (
-  <svg
-    className={clsx(classes.icons, className)}
-    version="1.1"
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 40 40"
-  >
+const InfoIcon: React.FC<SvgElementProps> = (props) => (
+  <SvgElement {...props}>
     <path
-      vectorEffect="non-scaling-stroke"
-      fill="none"
-      strokeWidth="2"
+      {...DEFAULT_PATH_PROPS}
       d="M20,2c9.9,0,18,8.1,18,18s-8.1,18-18,18S2,29.9,2,20S10.1,2,20,2z M20,29.9
-      V16.2l0,0V29.9z M20,10.1v2.6l0,0V10.1z"
+        V16.2l0,0V29.9z M20,10.1v2.6l0,0V10.1z"
     />
-  </svg>
+  </SvgElement>
 );
 
-const InProgressIcon: React.FC<{ className?: string }> = ({ className }) => (
-  <svg
-    className={clsx(classes.icons, className)}
-    version="1.1"
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 40 40"
-  >
+const InProgressIcon: React.FC<SvgElementProps> = (props) => (
+  <SvgElement {...props}>
     <path
-      vectorEffect="non-scaling-stroke"
-      fill="none"
-      strokeWidth="2"
+      {...DEFAULT_PATH_PROPS}
       d="M20,2c9.9,0,18,8.1,18,18s-8.1,18-18,18S2,29.9,2,20 M3.9,12c-0.7,1.3-1.2,2.7-1.5,4.2 M16.5,13v14 M23.5,13v14
-      M16.1,2.4c-1.5,0.3-3,0.9-4.3,1.6 M8.9,5.8c-1.2,0.9-2.3,2-3.2,3.2"
+        M16.1,2.4c-1.5,0.3-3,0.9-4.3,1.6 M8.9,5.8c-1.2,0.9-2.3,2-3.2,3.2"
     />
-  </svg>
+  </SvgElement>
 );
 
-const MidlineEllipsisIcon: React.FC<{ className?: string }> = ({
-  className,
-}) => (
-  <svg
-    className={clsx(classes.icons, className)}
-    version="1.1"
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 40 40"
-  >
+const MidlineEllipsisIcon: React.FC<SvgElementProps> = (props) => (
+  <SvgElement {...props}>
     <path
-      vectorEffect="non-scaling-stroke"
-      fill="none"
-      stroke="#1478AF"
-      strokeWidth="2"
+      {...DEFAULT_PATH_PROPS}
       d="M8,20c0,1.1-0.9,2-2,2S4,21.1,4,20s0.9-2,2-2S8,18.9,8,20z M20,18
-      c-1.1,0-2,0.9-2,2s0.9,2,2,2s2-0.9,2-2S21.1,18,20,18z M34,18c-1.1,0-2,0.9-2,2s0.9,2,2,2s2-0.9,2-2S35.1,18,34,18z"
+        c-1.1,0-2,0.9-2,2s0.9,2,2,2s2-0.9,2-2S21.1,18,20,18z M34,18c-1.1,0-2,0.9-2,2s0.9,2,2,2s2-0.9,2-2S35.1,18,34,18z"
     />
-  </svg>
+  </SvgElement>
 );
 
-const MinusIcon: React.FC<{ className?: string }> = ({ className }) => (
-  <svg
-    className={clsx(classes.icons, className)}
-    version="1.1"
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 40 40"
-  >
-    <path
-      vectorEffect="non-scaling-stroke"
-      fill="none"
-      strokeWidth="2"
-      d="M0,20h40"
-    />
-  </svg>
+const MinusIcon: React.FC<SvgElementProps> = (props) => (
+  <SvgElement {...props}>
+    <path {...DEFAULT_PATH_PROPS} d="M0,20h40" />
+  </SvgElement>
 );
 
-const MuteIcon: React.FC<{ className?: string }> = ({ className }) => (
-  <svg
-    className={clsx(classes.icons, className)}
-    version="1.1"
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 40 40"
-  >
+const MuteIcon: React.FC<SvgElementProps> = (props) => (
+  <SvgElement {...props}>
     <path
-      vectorEffect="non-scaling-stroke"
-      fill="none"
-      stroke="#1478AF"
-      strokeWidth="2"
+      {...DEFAULT_PATH_PROPS}
       d="M22,7.5v25L13.5,25h-9V15h9L22,7.5z M26.4,24.6c1.8-0.8,3-2.6,3-4.7c0-1.9-1.1-3.6-2.6-4.5 M28.7,30.6
-	c4-1.9,6.8-6,6.8-10.7c0-4.5-2.6-8.5-6.3-10.5"
+      c4-1.9,6.8-6,6.8-10.7c0-4.5-2.6-8.5-6.3-10.5"
     />
-  </svg>
+  </SvgElement>
 );
 
-const NavigateRightIcon: React.FC<{ className?: string }> = ({ className }) => (
-  <svg
-    className={clsx(classes.icons, className)}
-    version="1.1"
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 40 40"
-  >
+const NavigateRightIcon: React.FC<SvgElementProps> = (props) => (
+  <SvgElement {...props}>
     <path
-      vectorEffect="non-scaling-stroke"
-      fill="none"
-      stroke="#FFFFFF"
-      strokeWidth="2"
+      {...DEFAULT_PATH_PROPS}
       d="M22.8,1.1l15.4,15.4L24.1,30.6 M38.2,16.5H4.4v23.1"
     />
-  </svg>
+  </SvgElement>
 );
 
-const PauseIcon: React.FC<{ className?: string }> = ({ className }) => (
-  <svg
-    className={clsx(classes.icons, className)}
-    version="1.1"
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 40 40"
-  >
+const PauseIcon: React.FC<SvgElementProps> = (props) => (
+  <SvgElement {...props}>
     <path
-      fill="none"
-      strokeWidth="2"
+      {...DEFAULT_PATH_PROPS}
       d="M4.5,2h10.3v36H4.5V2z M25.2,2h10.3v36H25.2V2z"
     />
-  </svg>
-);
-
-const PlayIcon: React.FC<{ className?: string }> = ({ className }) => (
-  <svg
-    className={clsx(classes.icons, className)}
-    version="1.1"
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 40 40"
-  >
-    <path fill="none" strokeWidth="2" d="M33,20L7,35.4V4.6L33,20z" />
-  </svg>
+  </SvgElement>
 );
 
-const PlusIcon: React.FC<{ className?: string }> = ({ className }) => (
-  <svg
-    className={clsx(classes.icons, className)}
-    version="1.1"
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 40 40"
-  >
+const PlayIcon: React.FC<SvgElementProps> = (props) => (
+  <SvgElement {...props}>
     <path
-      vectorEffect="non-scaling-stroke"
       fill="none"
       strokeWidth="2"
-      d="M0,20h40 M20,40V0"
+      vectorEffect="non-scaling-stroke"
+      d="M33,20L7,35.4V4.6L33,20z"
     />
-  </svg>
+  </SvgElement>
 );
 
-const PublishIcon: React.FC<{ className?: string }> = ({ className }) => (
-  <svg
-    className={clsx(classes.icons, className)}
-    version="1.1"
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 40 40"
-  >
+const PlusIcon: React.FC<SvgElementProps> = (props) => (
+  <SvgElement {...props}>
+    <path {...DEFAULT_PATH_PROPS} d="M0,20h40 M20,40V0" />
+  </SvgElement>
+);
+
+const PublishIcon: React.FC<SvgElementProps> = (props) => (
+  <SvgElement {...props}>
     <path
-      vectorEffect="non-scaling-stroke"
-      fill="none"
-      strokeWidth="2"
+      {...DEFAULT_PATH_PROPS}
       d="M1,27v8.6h38V27 M4.6,10.6l5.6-6.3l6.2,6.3 M10.2,4.4v24 M23.6,10.6l5.6-6.3l6.2,6.3 M29.2,4.4v24"
     />
-  </svg>
+  </SvgElement>
 );
 
-const QuickEditIcon: React.FC<{ className?: string }> = ({ className }) => (
-  <svg
-    className={clsx(classes.icons, className)}
-    version="1.1"
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 40 40"
-  >
+const QuickEditIcon: React.FC<SvgElementProps> = (props) => (
+  <SvgElement {...props}>
     <path
-      vectorEffect="non-scaling-stroke"
-      fill="none"
-      strokeWidth="2"
+      {...DEFAULT_PATH_PROPS}
       d="M11.8,29.7l-8.8,2.6,2.6-8.8,15.8-15.8,6.2,6.2-15.8,15.8h0ZM27.5,19.7h10.5M22.7,24.3h8.4M18,29h6.2M5.6,23.5l6.2,6.2"
     />
-  </svg>
+  </SvgElement>
 );
 
-const QuickEditStationIcon: React.FC<{ className?: string }> = ({
-  className,
-}) => (
-  <svg
-    className={clsx(classes.icons, className)}
-    version="1.1"
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 40 40"
-  >
+const QuickEditStationIcon: React.FC<SvgElementProps> = (props) => (
+  <SvgElement {...props}>
     <path
-      vectorEffect="non-scaling-stroke"
-      fill="none"
-      strokeWidth="2"
+      {...DEFAULT_PATH_PROPS}
       d="M7.5,4.5h25v31H7.5V4.5ZM17.82,13.14h8.87M12.98,13.14h3.07M12.98,17.71h3.07M12.98,22.29h3.07M12.98,26.86h3.07M17.82,17.71h8.87M17.82,26.86h8.87M17.82,22.29h4.84"
     />
-  </svg>
+  </SvgElement>
 );
 
-const RemoveFilterIcon: React.FC<{ className?: string }> = ({ className }) => (
-  <svg
-    className={clsx(classes.icons, className)}
-    version="1.1"
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 40 40"
-  >
+const RemoveFilterIcon: React.FC<SvgElementProps> = (props) => (
+  <SvgElement {...props}>
     <path
-      vectorEffect="non-scaling-stroke"
-      fill="none"
-      stroke="#1478AF"
-      strokeWidth="2"
+      {...DEFAULT_PATH_PROPS}
       d="M13.7,16.9L3,4.6h28.6l-11.3,12v13.6l-6.5,5.1V16.9z M32.9,22.9l6.1,6.1L32.9,22.9z M32.9,22.9
-	l-6.1-6.1L32.9,22.9l-6.1,6.1L32.9,22.9z M32.9,22.9l6.1-6.1L32.9,22.9z"
+      l-6.1-6.1L32.9,22.9l-6.1,6.1L32.9,22.9z M32.9,22.9l6.1-6.1L32.9,22.9z"
     />
-  </svg>
+  </SvgElement>
 );
 
-const ReplaceIcon: React.FC<{ className?: string }> = ({ className }) => (
-  <svg
-    className={clsx(classes.icons, className)}
-    version="1.1"
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 40 40"
-  >
+const ReplaceIcon: React.FC<SvgElementProps> = (props) => (
+  <SvgElement {...props}>
     <path
-      vectorEffect="non-scaling-stroke"
-      fill="none"
-      stroke="#000000"
-      strokeWidth="2"
+      {...DEFAULT_PATH_PROPS}
       d="M25.6,6.4l6.2,6.2l-6.2,6.2
-	 M31.8,12.6H8.2 M14.4,21.2l-6.2,6.2l6.2,6.2 M8.2,27.4h23.6"
-    ></path>
-  </svg>
+       M31.8,12.6H8.2 M14.4,21.2l-6.2,6.2l6.2,6.2 M8.2,27.4h23.6"
+    />
+  </SvgElement>
 );
 
-const RetryIcon: React.FC<{ className?: string }> = ({ className }) => (
-  <svg
-    className={clsx(classes.icons, className)}
-    version="1.1"
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 40 40"
-  >
+const RetryIcon: React.FC<SvgElementProps> = (props) => (
+  <SvgElement {...props}>
     <path
-      vectorEffect="non-scaling-stroke"
-      fill="none"
-      strokeWidth="2"
+      {...DEFAULT_PATH_PROPS}
       d="M9.5,27.3c-4.1-5.8-2.6-13.8,3.1-17.8c4.5-3.2,10.6-3.1,15,0.2 M11.9,18.8l-2.4,8.5L1,24.8 M27,21.4l4.2-7.8
-	l7.8,4.2 M31.2,13.6c3.6,6.1,1.5,13.9-4.6,17.5c-4.1,2.4-9.2,2.3-13.2-0.2"
+      l7.8,4.2 M31.2,13.6c3.6,6.1,1.5,13.9-4.6,17.5c-4.1,2.4-9.2,2.3-13.2-0.2"
     />
-  </svg>
+  </SvgElement>
 );
 
-const SaveIcon: React.FC<{ className?: string }> = ({ className }) => (
-  <svg
-    className={clsx(classes.icons, className)}
-    version="1.1"
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 40 40"
-  >
-    <path
-      vectorEffect="non-scaling-stroke"
-      fill="none"
-      strokeWidth="2"
-      d="M15.8,30.1c0,0-6.2,0.1-7.6-0.1c-3.3-0.4-5.8-3.3-5.6-6.7c-0.2-6,6.9-6.6,6.9-6.6
-s-0.7-6.4,5-7.5c3.2-0.8,6.5,0.8,7.8,3.8c1.5-0.6,3.2-0.6,4.7,0.2c1.3,0.8,2.2,2.1,2.4,3.6c0,0,8-0.5,8.1,6.6c0,7.1-6.7,6.7-6.7,6.7
-h-6.5"
-    />
-    <path
-      vectorEffect="non-scaling-stroke"
-      fill="none"
-      strokeWidth="2"
-      d="M20.1,33V19.4 M15.7,23.8l4.3-4.3l4.3,4.3"
-    />
-  </svg>
+const SaveIcon: React.FC<SvgElementProps> = (props) => (
+  <SvgElement {...props}>
+    <>
+      <path
+        {...DEFAULT_PATH_PROPS}
+        d="M15.8,30.1c0,0-6.2,0.1-7.6-0.1c-3.3-0.4-5.8-3.3-5.6-6.7c-0.2-6,6.9-6.6,6.9-6.6
+    s-0.7-6.4,5-7.5c3.2-0.8,6.5,0.8,7.8,3.8c1.5-0.6,3.2-0.6,4.7,0.2c1.3,0.8,2.2,2.1,2.4,3.6c0,0,8-0.5,8.1,6.6c0,7.1-6.7,6.7-6.7,6.7
+    h-6.5"
+      />
+      <path
+        {...DEFAULT_PATH_PROPS}
+        d="M20.1,33V19.4 M15.7,23.8l4.3-4.3l4.3,4.3"
+      />
+    </>
+  </SvgElement>
 );
 
-const SnapshotIcon: React.FC<{ className?: string }> = ({ className }) => (
-  <svg
-    className={clsx(classes.icons, className)}
-    version="1.1"
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 40 40"
-  >
+const SnapshotIcon: React.FC<SvgElementProps> = (props) => (
+  <SvgElement {...props}>
     <path
-      vectorEffect="non-scaling-stroke"
-      fill="none"
-      strokeWidth="2"
+      {...DEFAULT_PATH_PROPS}
       d="M29.5,21c0,5.2-4.3,9.5-9.5,9.5s-9.5-4.3-9.5-9.5s4.3-9.5,9.5-9.5S29.5,15.8,29.5,21z M37.9,9.1h-8.1l-2.3-4.2
-	H12.6l-2.3,4.2H2.1C1.5,9.1,1,9.6,1,10.3v23.6C1,34.5,1.5,35,2.1,35h35.7c0.6,0,1.1-0.5,1.1-1.1V10.3C39,9.6,38.5,9.1,37.9,9.1z
-	 M34.8,13.4h-1.5v1.4h1.5V13.4z M14.1,19.8l5.4,5.4l8.5-9.3"
+      H12.6l-2.3,4.2H2.1C1.5,9.1,1,9.6,1,10.3v23.6C1,34.5,1.5,35,2.1,35h35.7c0.6,0,1.1-0.5,1.1-1.1V10.3C39,9.6,38.5,9.1,37.9,9.1z
+       M34.8,13.4h-1.5v1.4h1.5V13.4z M14.1,19.8l5.4,5.4l8.5-9.3"
     />
-  </svg>
+  </SvgElement>
 );
 
-const StopIcon: React.FC<{ className?: string }> = ({ className }) => (
-  <svg
-    className={clsx(classes.icons, className)}
-    version="1.1"
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 40 40"
-  >
-    <path fill="none" strokeWidth="2" d="M5,5h30v30H5V5z" />
-  </svg>
+const StopIcon: React.FC<SvgElementProps> = (props) => (
+  <SvgElement {...props}>
+    <path {...DEFAULT_PATH_PROPS} d="M5,5h30v30H5V5z" />
+  </SvgElement>
 );
 
-const SubtitlesIcon: React.FC<{ className?: string }> = ({ className }) => (
-  <svg
-    className={clsx(classes.icons, className)}
-    version="1.1"
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 40 40"
-  >
+const SubtitlesIcon: React.FC<SvgElementProps> = (props) => (
+  <SvgElement {...props}>
     <path
-      vectorEffect="non-scaling-stroke"
-      fill="none"
-      stroke="#B7B7B7"
-      strokeWidth="2"
+      {...DEFAULT_PATH_PROPS}
       d="M20,2c9.9,0,18,8.1,18,18s-8.1,18-18,18S2,29.9,2,20,10.1,2,20,2ZM10.1,17.7h19.8M10.1,24.3h5.9M19.5,24.3h10.4"
     />
-  </svg>
+  </SvgElement>
 );
 
-const SuccessIcon: React.FC<{ className?: string }> = ({ className }) => (
-  <svg
-    className={clsx(classes.icons, className)}
-    version="1.1"
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 40 40"
-  >
+const SuccessIcon: React.FC<SvgElementProps> = (props) => (
+  <SvgElement {...props}>
     <path
-      vectorEffect="non-scaling-stroke"
-      fill="none"
-      strokeWidth="2"
+      {...DEFAULT_PATH_PROPS}
       d="M20,2c9.9,0,18,8.1,18,18s-8.1,18-18,18S2,29.9,2,20S10.1,2,20,2z M29,13.5
-      L17.8,26.3L11,19.1"
+        L17.8,26.3L11,19.1"
     />
-  </svg>
+  </SvgElement>
 );
 
-const UnarchiveIcon: React.FC<{ className?: string }> = ({ className }) => (
-  <svg
-    className={clsx(classes.icons, className)}
-    version="1.1"
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 40 40"
-  >
+const UnarchiveIcon: React.FC<SvgElementProps> = (props) => (
+  <SvgElement {...props}>
     <path
-      vectorEffect="non-scaling-stroke"
-      fill="none"
-      stroke="#FFFFFF"
-      strokeWidth="2"
+      {...DEFAULT_PATH_PROPS}
       d="M27.6,16.2H39V39H1.1V16.1h11.6 M30.6,11.1L20.3,2L10,11.1 M20.3,2v31.2"
     />
-  </svg>
+  </SvgElement>
 );
 
-const UndoIcon: React.FC<{ className?: string }> = ({ className }) => (
-  <svg
-    className={clsx(classes.icons, className)}
-    version="1.1"
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 40 40"
-  >
+const UndoIcon: React.FC<SvgElementProps> = (props) => (
+  <SvgElement {...props}>
     <path
-      vectorEffect="non-scaling-stroke"
-      fill="none"
-      strokeWidth="2"
+      {...DEFAULT_PATH_PROPS}
       d="M2,11.8h36v25.8H3.2 M11.4,2.4L2,11.8l9.4,9.4"
     />
-  </svg>
+  </SvgElement>
 );
 
-const UnmuteIcon: React.FC<{ className?: string }> = ({ className }) => (
-  <svg
-    className={clsx(classes.icons, className)}
-    version="1.1"
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 40 40"
-  >
+const UnmuteIcon: React.FC<SvgElementProps> = (props) => (
+  <SvgElement {...props}>
     <path
-      vectorEffect="non-scaling-stroke"
-      fill="none"
-      stroke="#1478AF"
-      strokeWidth="2"
+      {...DEFAULT_PATH_PROPS}
       d="M22,7.5v25L13.4,25h-9V15h9L22,7.5z M26.2,14.9l9.4,9.4 M35.6,14.9l-9.4,9.4"
     />
-  </svg>
+  </SvgElement>
 );
 
-const UnpublishIcon: React.FC<{ className?: string }> = ({ className }) => (
-  <svg
-    className={clsx(classes.icons, className)}
-    version="1.1"
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 40 40"
-  >
+const UnpublishIcon: React.FC<SvgElementProps> = (props) => (
+  <SvgElement {...props}>
     <path
-      vectorEffect="non-scaling-stroke"
-      fill="none"
-      strokeWidth="2"
+      {...DEFAULT_PATH_PROPS}
       d="M26.1,7.6l-6.2-5.5l-6.2,5.5 M19.9,2v14.8 M9.1,16.2L30.9,38 M30.9,16.2L9.1,38"
     />
-  </svg>
+  </SvgElement>
 );
 
-const UploadIcon: React.FC<{ className?: string }> = ({ className }) => (
-  <svg
-    className={clsx(classes.icons, className)}
-    version="1.1"
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 40 40"
-  >
+const UploadIcon: React.FC<SvgElementProps> = (props) => (
+  <SvgElement {...props}>
     <path
-      vectorEffect="non-scaling-stroke"
-      fill="none"
-      strokeWidth="2"
+      {...DEFAULT_PATH_PROPS}
       d="M2,1.4h36 M20.1,39.4V8.7 M29.8,17.3l-9.7-8.6l-9.7,8.6"
     />
-  </svg>
+  </SvgElement>
 );
 
-const WarningIcon: React.FC<{ className?: string }> = ({ className }) => (
-  <svg
-    className={clsx(classes.icons, className)}
-    version="1.1"
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 40 40"
-  >
+const WarningIcon: React.FC<SvgElementProps> = (props) => (
+  <SvgElement {...props}>
     <path
-      vectorEffect="non-scaling-stroke"
-      fill="none"
-      strokeWidth="2"
+      {...DEFAULT_PATH_PROPS}
       d="M20,2c9.9,0,18,8.1,18,18s-8.1,18-18,18S2,29.9,2,20S10.1,2,20,2z M20,10.1v13.7l0,0V10.1z M20,29.9v-2.6l0,0
-      V29.9z"
-    ></path>
-  </svg>
+        V29.9z"
+    />
+  </SvgElement>
 );
 
-const VideoIcon: React.FC<{ className?: string }> = ({ className }) => (
-  <svg
-    className={clsx(classes.icons, className)}
-    version="1.1"
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 40 40"
-  >
+const VideoIcon: React.FC<SvgElementProps> = (props) => (
+  <SvgElement {...props}>
     <path
-      vectorEffect="non-scaling-stroke"
-      fill="none"
-      stroke="#B7B7B7"
-      strokeWidth="2"
+      {...DEFAULT_PATH_PROPS}
       d="M20,2c9.9,0,18,8.1,18,18s-8.1,18-18,18S2,29.9,2,20,10.1,2,20,2ZM15.9,14.2l10.2,5.7-10.2,5.8v-11.5Z"
     />
-  </svg>
+  </SvgElement>
 );
 
-const XIcon: React.FC<{ className?: string }> = ({ className }) => (
-  <svg
-    className={clsx(classes.icons, className)}
-    version="1.1"
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 40 40"
-  >
-    <path
-      vectorEffect="non-scaling-stroke"
-      fill="none"
-      strokeWidth="2"
-      d="M2.4,2.4l35.3,35.3 M37.6,2.4L2.4,37.6"
-    />
-  </svg>
+const XIcon: React.FC<SvgElementProps> = (props) => (
+  <SvgElement {...props}>
+    <path {...DEFAULT_PATH_PROPS} d="M2.4,2.4l35.3,35.3 M37.6,2.4L2.4,37.6" />
+  </SvgElement>
 );
 
-/**
- * Default SVG icons. A 'className' prop can also be passed in.
- * @example
- * <Icons icon={action.icon} />
- */
-export const Icons: React.FC<IconsProps> = ({ icon, className }) => {
-  const icons: { [key in IconName]: JSX.Element } = {
-    [IconName.Axi]: <AxiIcon className={className} />,
-    [IconName.Archive]: <ArchiveIcon className={className} />,
-    [IconName.Audio]: <AudioIcon className={className} />,
-    [IconName.DescriptiveAudio]: <DescriptiveAudioIcon className={className} />,
-    [IconName.ThumbnailsIcon]: <ThumbnailsIcon className={className} />,
-    [IconName.BackwardOne]: <BackwardOne className={className} />,
-    [IconName.BackwardTen]: <BackwardTen className={className} />,
-    [IconName.Block]: <BlockIcon className={className} />,
-    [IconName.Bulk]: <BulkIcon className={className} />,
-    [IconName.BulkEdit]: <BulkEditIcon className={className} />,
-    [IconName.Calendar]: <CalendarIcon className={className} />,
-    [IconName.Checkmark]: <CheckmarkIcon className={className} />,
-    [IconName.ChevronDown]: <ChevronDownIcon className={className} />,
-    [IconName.ChevronLeft]: <ChevronLeftIcon className={className} />,
-    [IconName.ChevronRight]: <ChevronRightIcon className={className} />,
-    [IconName.ChevronUp]: <ChevronUpIcon className={className} />,
-    [IconName.ClosedCaption]: <ClosedCaptionIcon className={className} />,
-    [IconName.Copy]: <CopyIcon className={className} />,
-    [IconName.Delete]: <DeleteIcon className={className} />,
-    [IconName.Details]: <DetailsIcon className={className} />,
-    [IconName.Drag]: <DragIcon className={className} />,
-    [IconName.Ellipsis]: <EllipsisIcon className={className} />,
-    [IconName.Error]: <ErrorIcon className={className} />,
-    [IconName.External]: <ExternalIcon className={className} />,
-    [IconName.File]: <FileIcon className={className} />,
-    [IconName.Filters]: <FiltersIcon className={className} />,
-    [IconName.ForwardOne]: <ForwardOne className={className} />,
-    [IconName.ForwardTen]: <ForwardTen className={className} />,
-    [IconName.Info]: <InfoIcon className={className} />,
-    [IconName.InProgress]: <InProgressIcon className={className} />,
-    [IconName.MidlineEllipsis]: <MidlineEllipsisIcon className={className} />,
-    [IconName.Minus]: <MinusIcon className={className} />,
-    [IconName.Mute]: <MuteIcon className={className} />,
-    [IconName.NavigateRight]: <NavigateRightIcon className={className} />,
-    [IconName.Pause]: <PauseIcon className={className} />,
-    [IconName.Play]: <PlayIcon className={className} />,
-    [IconName.Plus]: <PlusIcon className={className} />,
-    [IconName.Publish]: <PublishIcon className={className} />,
-    [IconName.QuickEdit]: <QuickEditIcon className={className} />,
-    [IconName.QuickEditStation]: <QuickEditStationIcon className={className} />,
-    [IconName.RemoveFilter]: <RemoveFilterIcon className={className} />,
-    [IconName.Replace]: <ReplaceIcon className={className} />,
-    [IconName.Retry]: <RetryIcon className={className} />,
-    [IconName.Save]: <SaveIcon className={className} />,
-    [IconName.Snapshot]: <SnapshotIcon className={className} />,
-    [IconName.Stop]: <StopIcon className={className} />,
-    [IconName.Subtitles]: <SubtitlesIcon className={className} />,
-    [IconName.Success]: <SuccessIcon className={className} />,
-    [IconName.Unarchive]: <UnarchiveIcon className={className} />,
-    [IconName.Undo]: <UndoIcon className={className} />,
-    [IconName.Unmute]: <UnmuteIcon className={className} />,
-    [IconName.Unpublish]: <UnpublishIcon className={className} />,
-    [IconName.Upload]: <UploadIcon className={className} />,
-    [IconName.Video]: <VideoIcon className={className} />,
-    [IconName.Warning]: <WarningIcon className={className} />,
-    [IconName.X]: <XIcon className={className} />,
+export interface IconsProps extends SvgElementProps {
+  icon?: IconName;
+}
+
+export const Icons: React.FC<IconsProps> = ({ icon, className, ...props }) => {
+  const iconComponents = {
+    [IconName.Axi]: AxiIcon,
+    [IconName.Archive]: ArchiveIcon,
+    [IconName.Audio]: AudioIcon,
+    [IconName.DescriptiveAudio]: DescriptiveAudioIcon,
+    [IconName.ThumbnailsIcon]: ThumbnailsIcon,
+    [IconName.BackwardOne]: BackwardOne,
+    [IconName.BackwardTen]: BackwardTen,
+    [IconName.Block]: BlockIcon,
+    [IconName.Bulk]: BulkIcon,
+    [IconName.BulkEdit]: BulkEditIcon,
+    [IconName.Calendar]: CalendarIcon,
+    [IconName.Checkmark]: CheckmarkIcon,
+    [IconName.ChevronDown]: ChevronDownIcon,
+    [IconName.ChevronLeft]: ChevronLeftIcon,
+    [IconName.ChevronRight]: ChevronRightIcon,
+    [IconName.ChevronUp]: ChevronUpIcon,
+    [IconName.ClosedCaption]: ClosedCaptionIcon,
+    [IconName.Copy]: CopyIcon,
+    [IconName.Delete]: DeleteIcon,
+    [IconName.Details]: DetailsIcon,
+    [IconName.Drag]: DragIcon,
+    [IconName.Ellipsis]: EllipsisIcon,
+    [IconName.Error]: ErrorIcon,
+    [IconName.External]: ExternalIcon,
+    [IconName.File]: FileIcon,
+    [IconName.Filters]: FiltersIcon,
+    [IconName.ForwardOne]: ForwardOne,
+    [IconName.ForwardTen]: ForwardTen,
+    [IconName.Info]: InfoIcon,
+    [IconName.InProgress]: InProgressIcon,
+    [IconName.MidlineEllipsis]: MidlineEllipsisIcon,
+    [IconName.Minus]: MinusIcon,
+    [IconName.Mute]: MuteIcon,
+    [IconName.NavigateRight]: NavigateRightIcon,
+    [IconName.Pause]: PauseIcon,
+    [IconName.Play]: PlayIcon,
+    [IconName.Plus]: PlusIcon,
+    [IconName.Publish]: PublishIcon,
+    [IconName.QuickEdit]: QuickEditIcon,
+    [IconName.QuickEditStation]: QuickEditStationIcon,
+    [IconName.RemoveFilter]: RemoveFilterIcon,
+    [IconName.Replace]: ReplaceIcon,
+    [IconName.Retry]: RetryIcon,
+    [IconName.Save]: SaveIcon,
+    [IconName.Snapshot]: SnapshotIcon,
+    [IconName.Stop]: StopIcon,
+    [IconName.Subtitles]: SubtitlesIcon,
+    [IconName.Success]: SuccessIcon,
+    [IconName.Unarchive]: UnarchiveIcon,
+    [IconName.Undo]: UndoIcon,
+    [IconName.Unmute]: UnmuteIcon,
+    [IconName.Unpublish]: UnpublishIcon,
+    [IconName.Upload]: UploadIcon,
+    [IconName.Video]: VideoIcon,
+    [IconName.Warning]: WarningIcon,
+    [IconName.X]: XIcon,
   };
 
-  const actionIcon: JSX.Element =
-    icon !== undefined ? (
-      icons[icon]
-    ) : (
-      <svg
-        className={clsx(classes.icons, className)}
-        version="1.1"
-        xmlns="http://www.w3.org/2000/svg"
-        viewBox="0 0 40 40"
-      ></svg>
-    );
-
-  return actionIcon;
+  const componentClassName = clsx(classes.icons, className);
+
+  if (icon === undefined) {
+    return <SvgElement className={componentClassName} {...props} />;
+  }
+
+  const IconComponent = iconComponents[icon];
+  return <IconComponent className={componentClassName} {...props} />;
 };