design-react-kit 3.3.1 → 4.0.1

package/src/Icon/Icon.tsx

@@ -0,0 +1,116 @@
+import React, {
+  FC,
+  ImgHTMLAttributes,
+  SVGProps,
+  useEffect,
+  useState
+} from 'react';
+import classNames from 'classnames';
+import { isBundledIcon, loadIcon, allIcons, IconName } from './assets';
+import { EmptyIcon } from './EmptyIcon';
+export type { IconName } from './assets';
+
+export const iconsList = allIcons;
+
+let iconsCache: Record<IconName, FC<SVGProps<SVGSVGElement>>> = {};
+
+/**
+ * Preload a list of icons in cache
+ * @param icons - the list of icons to preload
+ * @returns true if the icons have been preloaded
+ */
+export async function preloadIcons(icons: IconName[]) {
+  const preloadedIcons = await Promise.all(icons.map((icon) => loadIcon(icon)));
+  preloadedIcons.forEach(({ component }, i) => {
+    iconsCache[icons[i]] = ((() => component) as unknown) as FC<
+      SVGProps<SVGSVGElement>
+    >;
+  });
+  return true;
+}
+
+/**
+ * Removes icons from cache
+ * @param icon? - the icon to remove, or nothing to clear the whole cache
+ * @returns an object containing the removed icons
+ */
+export const clearIconCache = (iconName?: IconName) => {
+  let deletedItems;
+  if (iconName) {
+    deletedItems = { iconName: iconsCache[iconName] };
+    delete iconsCache[iconName];
+  } else {
+    deletedItems = { ...iconsCache };
+    iconsCache = {};
+  }
+  return deletedItems;
+};
+
+export interface IconProps extends SVGProps<SVGSVGElement> {
+  /** Classi aggiuntive da usare per il componente Badge */
+  className?: string;
+  /** Le varianti di colore definite in Bootstrap Italia */
+  color?: 'success' | 'warning' | 'danger' | 'note' | 'important' | string;
+  /** Le dimensioni dell'icona. In ordine dalla più grande alla più piccola: "xl", "lg", '' (stringa vuota), "sm", "xs". */
+  size?: 'xl' | 'lg' | '' | 'sm' | 'xs';
+  /**
+   * Il nome dell'icona da mostrare. Per una lista completa vedi:
+   * <a href="https://italia.github.io/design-react-kit/?path=/story/componenti-icon--lista-icone" target="_blank">Lista icone</a>
+   * */
+  icon: string;
+  /** Quando abilitato riduce la dimensione dell'icona all'interno del contenitore.  */
+  padding?: boolean;
+  /** Funzione chiamata al caricamento dell'icona */
+  onIconLoad?: () => void;
+}
+
+export const Icon: FC<IconProps> = ({
+  color = '',
+  size = '',
+  icon = '',
+  className,
+  padding = false,
+  onIconLoad,
+  ...attributes
+}) => {
+  const [IconComponent, setCurrentIcon] = useState<FC<SVGProps<SVGSVGElement>>>(
+    iconsCache[icon]
+  );
+  const classes = classNames('icon', className, {
+    [`icon-${color}`]: color,
+    [`icon-${size}`]: size,
+    'icon-padded': padding
+  });
+
+  useEffect(() => {
+    if (isBundledIcon(icon) && !iconsCache[icon]) {
+      loadIcon(icon).then(({ component }) => {
+        iconsCache[icon] = ((() => component) as unknown) as FC<
+          SVGProps<SVGSVGElement>
+        >;
+        setCurrentIcon(iconsCache[icon]);
+        onIconLoad?.();
+      });
+    } else {
+      onIconLoad?.();
+    }
+  }, [icon, onIconLoad]);
+
+  if (!isBundledIcon(icon)) {
+    // assume it's an image and let the browser do its job
+    return (
+      // eslint-disable-next-line jsx-a11y/alt-text
+      <img
+        src={icon}
+        className={classes}
+        {...(attributes as ImgHTMLAttributes<HTMLImageElement>)}
+      />
+    );
+  }
+
+  if (!IconComponent) {
+    return <EmptyIcon className={classes} role='img' {...attributes} />;
+  }
+
+  return <IconComponent className={classes} role='img' {...attributes} />;
+};

package/src/Icon/assets/ItArrowDown.tsx

@@ -0,0 +1,9 @@
+import * as React from 'react';
+export const component = (props: React.SVGProps<SVGSVGElement>) => {
+  return (
+    <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' {...props}>
+      <path d='M17.9 13.2l-5.4 5.3V3h-1v15.5l-5.4-5.3-.7.7 6.6 6.5 6.6-6.5zM12 19z' />
+      <path fill='none' d='M0 0h24v24H0z' />
+    </svg>
+  );
+};

package/src/Icon/assets/ItArrowDownCircle.tsx

@@ -0,0 +1,9 @@
+import * as React from 'react';
+export const component = (props: React.SVGProps<SVGSVGElement>) => {
+  return (
+    <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' {...props}>
+      <path d='M15.6 13.2l.7.7-4.3 4.3-4.3-4.3.7-.7 3.1 3.1V7h1v9.2zM22 12A10 10 0 1112 2a10 10 0 0110 10zm-1 0a9 9 0 10-9 9 9 9 0 009-9z' />
+      <path fill='none' d='M0 0h24v24H0z' />
+    </svg>
+  );
+};

package/src/Icon/assets/ItArrowDownTriangle.tsx

@@ -0,0 +1,9 @@
+import * as React from 'react';
+export const component = (props: React.SVGProps<SVGSVGElement>) => {
+  return (
+    <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' {...props}>
+      <path d='M9.2 12h5.6a1 1 0 01.7 1.7L12 17.3l-3.5-3.6a1 1 0 01.7-1.7z' />
+      <path fill='none' d='M0 0h24v24H0z' />
+    </svg>
+  );
+};

package/src/Icon/assets/ItArrowLeft.tsx

@@ -0,0 +1,9 @@
+import * as React from 'react';
+export const component = (props: React.SVGProps<SVGSVGElement>) => {
+  return (
+    <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' {...props}>
+      <path d='M21 11.5H5.5l5.3-5.4-.7-.7L3.6 12l6.5 6.6.7-.7-5.3-5.4H21zM5 12z' />
+      <path fill='none' d='M0 0h24v24H0z' />
+    </svg>
+  );
+};

package/src/Icon/assets/ItArrowLeftCircle.tsx

@@ -0,0 +1,9 @@
+import * as React from 'react';
+export const component = (props: React.SVGProps<SVGSVGElement>) => {
+  return (
+    <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' {...props}>
+      <path d='M7.7 11.5H17v1H7.8l3 3.1-.7.7L5.8 12l4.3-4.3.7.7zM22 12A10 10 0 1112 2a10 10 0 0110 10zm-1 0a9 9 0 10-9 9 9 9 0 009-9z' />
+      <path fill='none' d='M0 0h24v24H0z' />
+    </svg>
+  );
+};

package/src/Icon/assets/ItArrowLeftTriangle.tsx

@@ -0,0 +1,9 @@
+import * as React from 'react';
+export const component = (props: React.SVGProps<SVGSVGElement>) => {
+  return (
+    <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' {...props}>
+      <path d='M12 9.2v5.6a1 1 0 01-1.7.7L6.8 12l3.5-3.5a1 1 0 011.7.7z' />
+      <path fill='none' d='M0 0h24v24H0z' />
+    </svg>
+  );
+};

package/src/Icon/assets/ItArrowRight.tsx

@@ -0,0 +1,9 @@
+import * as React from 'react';
+export const component = (props: React.SVGProps<SVGSVGElement>) => {
+  return (
+    <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' {...props}>
+      <path d='M13.9 5.4l-.7.7 5.3 5.4H3v1h15.5l-5.3 5.4.7.7 6.6-6.6zM19 12z' />
+      <path fill='none' d='M0 0h24v24H0z' />
+    </svg>
+  );
+};

package/src/Icon/assets/ItArrowRightCircle.tsx

@@ -0,0 +1,9 @@
+import * as React from 'react';
+export const component = (props: React.SVGProps<SVGSVGElement>) => {
+  return (
+    <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' {...props}>
+      <path d='M13.9 7.7l4.3 4.3-4.3 4.3-.7-.7 3.1-3.1H7v-1h9.2l-3-3.1zM22 12A10 10 0 1112 2a10 10 0 0110 10zm-1 0a9 9 0 10-9 9 9 9 0 009-9z' />
+      <path fill='none' d='M0 0h24v24H0z' />
+    </svg>
+  );
+};

package/src/Icon/assets/ItArrowRightTriangle.tsx

@@ -0,0 +1,9 @@
+import * as React from 'react';
+export const component = (props: React.SVGProps<SVGSVGElement>) => {
+  return (
+    <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' {...props}>
+      <path d='M12 14.8V9.2a1 1 0 011.7-.7l3.5 3.5-3.5 3.5a1 1 0 01-1.7-.7z' />
+      <path fill='none' d='M0 0h24v24H0z' />
+    </svg>
+  );
+};

package/src/Icon/assets/ItArrowUp.tsx

@@ -0,0 +1,9 @@
+import * as React from 'react';
+export const component = (props: React.SVGProps<SVGSVGElement>) => {
+  return (
+    <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' {...props}>
+      <path d='M18.6 10.1L12 3.5l-6.6 6.6.7.7 5.4-5.3V21h1V5.5l5.4 5.3zM12 5z' />
+      <path fill='none' d='M0 0h24v24H0z' />
+    </svg>
+  );
+};

package/src/Icon/assets/ItArrowUpCircle.tsx

@@ -0,0 +1,9 @@
+import * as React from 'react';
+export const component = (props: React.SVGProps<SVGSVGElement>) => {
+  return (
+    <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' {...props}>
+      <path d='M12 5.8l4.3 4.3-.7.7-3.1-3.1V17h-1V7.8l-3.1 3-.7-.7zM22 12A10 10 0 1112 2a10 10 0 0110 10zm-1 0a9 9 0 10-9 9 9 9 0 009-9z' />
+      <path fill='none' d='M0 0h24v24H0z' />
+    </svg>
+  );
+};

package/src/Icon/assets/ItArrowUpTriangle.tsx

@@ -0,0 +1,9 @@
+import * as React from 'react';
+export const component = (props: React.SVGProps<SVGSVGElement>) => {
+  return (
+    <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' {...props}>
+      <path d='M14.8 12H9.2a1 1 0 01-.7-1.7L12 6.8l3.5 3.5a1 1 0 01-.7 1.7z' />
+      <path fill='none' d='M0 0h24v24H0z' />
+    </svg>
+  );
+};

package/src/Icon/assets/ItBan.tsx

@@ -0,0 +1,9 @@
+import * as React from 'react';
+export const component = (props: React.SVGProps<SVGSVGElement>) => {
+  return (
+    <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' {...props}>
+      <path d='M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10 10-4.5 10-10S17.5 2 12 2zM5.2 17.6C3.8 16 3.1 14 3.1 11.9s.7-4.1 2.1-5.7l12.7 12.7C14 22 8.3 21.4 5.2 17.6zm13.4.5L5.9 5.4c3.7-3.3 9.4-3 12.7.7 3.1 3.4 3.1 8.6 0 12z' />
+      <path fill='none' d='M0 0h24v24H0z' />
+    </svg>
+  );
+};

package/src/Icon/assets/ItBehance.tsx

@@ -0,0 +1,9 @@
+import * as React from 'react';
+export const component = (props: React.SVGProps<SVGSVGElement>) => {
+  return (
+    <svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' {...props}>
+      <path fill='none' d='M0 0h24v24H0z' />
+      <path d='M7.83 5.75a8 8 0 011.6.15 3.38 3.38 0 011.24.51c.345.233.62.554.8.93.202.456.298.952.28 1.45a2.68 2.68 0 01-.42 1.54 3.05 3.05 0 01-1.25 1 2.92 2.92 0 011.68 1.15c.393.59.59 1.29.56 2a3.39 3.39 0 01-.32 1.59 3.08 3.08 0 01-1 1.11 4.27 4.27 0 01-1.4.64A6 6 0 018 18H2V5.75h5.83zm-.35 5a2 2 0 001.19-.35c.328-.27.5-.687.46-1.11A1.47 1.47 0 009 8.54a1.16 1.16 0 00-.42-.43A1.8 1.8 0 008 7.9a3.26 3.26 0 00-.7-.06H4.74v2.87l2.74.04zm.15 5.22c.252.003.503-.02.75-.07a2 2 0 00.62-.3 1.39 1.39 0 00.44-.49 1.73 1.73 0 00.16-.8A1.64 1.64 0 009.09 13a2.33 2.33 0 00-1.41-.4H4.74v3.38l2.89-.01zm8.54-.08a2.18 2.18 0 001.58.54 2.24 2.24 0 001.25-.37 1.6 1.6 0 00.65-.79h2.15a4.06 4.06 0 01-1.58 2.29 4.64 4.64 0 01-2.58.69 5.23 5.23 0 01-1.9-.33 4 4 0 01-2.33-2.44 5.25 5.25 0 01-.32-1.89 5.12 5.12 0 01.33-1.86 4.14 4.14 0 01.93-1.49 4.48 4.48 0 011.44-1 4.59 4.59 0 011.85-.36 4.31 4.31 0 012 .44A4 4 0 0121 10.5c.37.505.636 1.08.78 1.69a6.18 6.18 0 01.17 2h-6.38a2.5 2.5 0 00.6 1.7zM19 11.22a1.83 1.83 0 00-1.38-.49 2 2 0 00-1 .2 1.8 1.8 0 00-.62.49 1.62 1.62 0 00-.33.62 2.87 2.87 0 00-.11.59h4a2.4 2.4 0 00-.56-1.41zm-3.93-4.65h4.98v1.21h-4.98V6.57z' />
+    </svg>
+  );
+};

package/src/Icon/assets/ItBookmark.tsx

@@ -0,0 +1,9 @@
+import * as React from 'react';
+export const component = (props: React.SVGProps<SVGSVGElement>) => {
+  return (
+    <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' {...props}>
+      <path d='M18 22.7l-6-6-6 6V2h12v20.7zm-6-7.4l5 5V3H7v17.3l5-5z' />
+      <path fill='none' d='M0 0h24v24H0z' />
+    </svg>
+  );
+};

package/src/Icon/assets/ItBox.tsx

@@ -0,0 +1,12 @@
+import * as React from 'react';
+export const component = (props: React.SVGProps<SVGSVGElement>) => {
+  return (
+    <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' {...props}>
+      <path d='M21 2H3v4h1v16h16V6h1V2zm-2 19H5V6h14v15zm1-16H4V3h16v2z' />
+      <path d='M8 8h8v1H8z' />
+      <g>
+        <path fill='none' d='M0 0h24v24H0z' />
+      </g>
+    </svg>
+  );
+};

package/src/Icon/assets/ItBurger.tsx

@@ -0,0 +1,9 @@
+import * as React from 'react';
+export const component = (props: React.SVGProps<SVGSVGElement>) => {
+  return (
+    <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' {...props}>
+      <path d='M22 5v1H2V5zM2 12.5h20v-1H2zM2 19h20v-1H2z' />
+      <path fill='none' d='M0 0h24v24H0z' />
+    </svg>
+  );
+};

package/src/Icon/assets/ItCalendar.tsx

@@ -0,0 +1,9 @@
+import * as React from 'react';
+export const component = (props: React.SVGProps<SVGSVGElement>) => {
+  return (
+    <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' {...props}>
+      <path d='M20.5 4H17V3h-1v1H8V3H7v1H3.5A1.5 1.5 0 002 5.5v13A1.5 1.5 0 003.5 20h17a1.5 1.5 0 001.5-1.5v-13A1.5 1.5 0 0020.5 4zm.5 14.5a.5.5 0 01-.5.5h-17a.5.5 0 01-.5-.5v-13a.5.5 0 01.5-.5H7v1h1V5h8v1h1V5h3.5a.5.5 0 01.5.5zM4 8h16v1H4z' />
+      <path fill='none' d='M0 0h24v24H0z' />
+    </svg>
+  );
+};

package/src/Icon/assets/ItCamera.tsx

@@ -0,0 +1,9 @@
+import * as React from 'react';
+export const component = (props: React.SVGProps<SVGSVGElement>) => {
+  return (
+    <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' {...props}>
+      <path d='M20.5 20h-17A1.5 1.5 0 012 18.5v-10A1.5 1.5 0 013.5 7h4.3l1.5-2.3a1.5 1.5 0 011.2-.7h3a1.5 1.5 0 011.2.7L16.2 7h4.3A1.5 1.5 0 0122 8.5v10a1.5 1.5 0 01-1.5 1.5zM3.5 8a.5.5 0 00-.5.5v10a.5.5 0 00.5.5h17a.5.5 0 00.5-.5v-10a.5.5 0 00-.5-.5h-4.8l-1.8-2.8-.4-.2h-3l-.4.2L8.3 8zM12 18a5 5 0 115-5 5 5 0 01-5 5zm0-9a4 4 0 104 4 4 4 0 00-4-4zM7 5H4v1h3z' />
+      <path fill='none' d='M0 0h24v24H0z' />
+    </svg>
+  );
+};

package/src/Icon/assets/ItCard.tsx

@@ -0,0 +1,9 @@
+import * as React from 'react';
+export const component = (props: React.SVGProps<SVGSVGElement>) => {
+  return (
+    <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' {...props}>
+      <path d='M20.5 5h-17A1.5 1.5 0 002 6.5v11A1.5 1.5 0 003.5 19h17a1.5 1.5 0 001.5-1.5v-11A1.5 1.5 0 0020.5 5zM3 9h18v3H3zm18 8.5a.5.5 0 01-.5.5h-17a.5.5 0 01-.5-.5V13h18zM3 8V6.5a.5.5 0 01.5-.5h17a.5.5 0 01.5.5V8zm5 7H4v-1h4z' />
+      <path fill='none' d='M0 0h24v24H0z' />
+    </svg>
+  );
+};

package/src/Icon/assets/ItChartLine.tsx

@@ -0,0 +1,12 @@
+import * as React from 'react';
+export const component = (props: React.SVGProps<SVGSVGElement>) => {
+  return (
+    <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' {...props}>
+      <path d='M21 20v1H3V3h1v17z' />
+      <path d='M10.5 9.2l2.5 2.5 6-6v3.8h1V4h-5.5v1h3.8L13 10.3l-2.5-2.5-4.3 4.3.6.8z' />
+      <g>
+        <path fill='none' d='M0 0h24v24H0z' />
+      </g>
+    </svg>
+  );
+};

package/src/Icon/assets/ItCheck.tsx

@@ -0,0 +1,9 @@
+import * as React from 'react';
+export const component = (props: React.SVGProps<SVGSVGElement>) => {
+  return (
+    <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' {...props}>
+      <path d='M9.6 16.9L4 11.4l.8-.7 4.8 4.8 8.5-8.4.7.7z' />
+      <path fill='none' d='M0 0h24v24H0z' />
+    </svg>
+  );
+};

package/src/Icon/assets/ItCheckCircle.tsx

@@ -0,0 +1,9 @@
+import * as React from 'react';
+export const component = (props: React.SVGProps<SVGSVGElement>) => {
+  return (
+    <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' {...props}>
+      <path d='M17.1 7.9l.7.7-7.8 7.6-4.7-4.6.7-.7 4 3.9zM22 12A10 10 0 1112 2a10 10 0 0110 10zm-1 0a9 9 0 10-9 9 9 9 0 009-9z' />
+      <path fill='none' d='M0 0h24v24H0z' />
+    </svg>
+  );
+};

package/src/Icon/assets/ItChevronLeft.tsx

@@ -0,0 +1,8 @@
+import * as React from 'react';
+export const component = (props: React.SVGProps<SVGSVGElement>) => {
+  return (
+    <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' {...props}>
+      <path d='M14.6 17.2L9 11.6 14.6 6l.8.7-4.9 4.9 4.9 4.9z' />
+    </svg>
+  );
+};

package/src/Icon/assets/ItChevronRight.tsx

@@ -0,0 +1,8 @@
+import * as React from 'react';
+export const component = (props: React.SVGProps<SVGSVGElement>) => {
+  return (
+    <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' {...props}>
+      <path d='M9.8 17.2l-.8-.7 4.9-4.9L9 6.7l.8-.7 5.6 5.6z' />
+    </svg>
+  );
+};

package/src/Icon/assets/ItClip.tsx

@@ -0,0 +1,9 @@
+import * as React from 'react';
+export const component = (props: React.SVGProps<SVGSVGElement>) => {
+  return (
+    <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' {...props}>
+      <path d='M11 22a2.9 2.9 0 01-3-3V6a4 4 0 018 0v10h-1V6a3 3 0 00-6 0v13a2 2 0 004 0V8a1 1 0 00-2 0v8h-1V8a2 2 0 014 0v11a2.9 2.9 0 01-3 3z' />
+      <path fill='none' d='M0 0h24v24H0z' />
+    </svg>
+  );
+};

package/src/Icon/assets/ItClock.tsx

@@ -0,0 +1,9 @@
+import * as React from 'react';
+export const component = (props: React.SVGProps<SVGSVGElement>) => {
+  return (
+    <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' {...props}>
+      <path d='M11.5 5h1v7.5H7v-1h4.5zM22 12A10 10 0 1112 2a10 10 0 0110 10zm-1 0a9 9 0 10-9 9 9 9 0 009-9z' />
+      <path fill='none' d='M0 0h24v24H0z' />
+    </svg>
+  );
+};

package/src/Icon/assets/ItClose.tsx

@@ -0,0 +1,9 @@
+import * as React from 'react';
+export const component = (props: React.SVGProps<SVGSVGElement>) => {
+  return (
+    <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' {...props}>
+      <path d='M12.7 12l3.7 3.6-.8.8-3.6-3.7-3.6 3.7-.8-.8 3.7-3.6-3.7-3.6.8-.8 3.6 3.7 3.6-3.7.8.8z' />
+      <path fill='none' d='M0 0h24v24H0z' />
+    </svg>
+  );
+};

package/src/Icon/assets/ItCloseBig.tsx

@@ -0,0 +1,9 @@
+import * as React from 'react';
+export const component = (props: React.SVGProps<SVGSVGElement>) => {
+  return (
+    <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' {...props}>
+      <path d='M12.7 12l6.7 6.6-.8.8-6.6-6.7-6.6 6.7-.8-.8 6.7-6.6-6.7-6.6.8-.8 6.6 6.7 6.6-6.7.8.8z' />
+      <path fill='none' d='M0 0h24v24H0z' />
+    </svg>
+  );
+};

package/src/Icon/assets/ItCloseCircle.tsx

@@ -0,0 +1,9 @@
+import * as React from 'react';
+export const component = (props: React.SVGProps<SVGSVGElement>) => {
+  return (
+    <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' {...props}>
+      <path d='M16.3 8.3L12.6 12l3.7 3.6-.7.7-3.7-3.6-3.6 3.6-.7-.7 3.6-3.6-3.6-3.7.7-.7 3.6 3.7 3.7-3.7zM22 12A10 10 0 1112 2a10 10 0 0110 10zm-1 0a9 9 0 10-9 9 9 9 0 009-9z' />
+      <path fill='none' d='M0 0h24v24H0z' />
+    </svg>
+  );
+};

package/src/Icon/assets/ItCodeCircle.tsx

@@ -0,0 +1,9 @@
+import * as React from 'react';
+export const component = (props: React.SVGProps<SVGSVGElement>) => {
+  return (
+    <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' {...props}>
+      <path d='M19 12l-2.9 2.9-.7-.8 2.1-2.1-2.1-2.1.7-.8zM7.9 9.1L5 12l2.9 2.9.7-.8L6.5 12l2.1-2.1zM22 12A10 10 0 1112 2a10 10 0 0110 10zm-1 0a9 9 0 10-9 9 9 9 0 009-9zM9.6 16.5l1 .3 3.7-9.3-.9-.3z' />
+      <path fill='none' d='M0 0h24v24H0z' />
+    </svg>
+  );
+};

package/src/Icon/assets/ItCollapse.tsx

@@ -0,0 +1,8 @@
+import * as React from 'react';
+export const component = (props: React.SVGProps<SVGSVGElement>) => {
+  return (
+    <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' {...props}>
+      <path d='M16.5 15.4l-4.9-4.9-4.9 4.9-.7-.8L11.6 9l5.6 5.6z' />
+    </svg>
+  );
+};

package/src/Icon/assets/ItComment.tsx

@@ -0,0 +1,9 @@
+import * as React from 'react';
+export const component = (props: React.SVGProps<SVGSVGElement>) => {
+  return (
+    <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' {...props}>
+      <path d='M19 3H5a2 2 0 00-2 2v10a2 2 0 002 2h2v5.4l1.7-1.7 3.7-3.7H19a2 2 0 002-2V5a2 2 0 00-2-2zm1 12a.9.9 0 01-1 1h-7l-4 4v-4H5a.9.9 0 01-1-1V5a.9.9 0 011-1h14a.9.9 0 011 1zM9 10a.9.9 0 01-1 1 .9.9 0 01-1-1 .9.9 0 011-1 .9.9 0 011 1zm4 0a1 1 0 01-2 0 1 1 0 012 0zm4 0a1 1 0 01-2 0 1 1 0 012 0z' />
+      <path fill='none' d='M0 0h24v24H0z' />
+    </svg>
+  );
+};

package/src/Icon/assets/ItCopy.tsx

@@ -0,0 +1,9 @@
+import * as React from 'react';
+export const component = (props: React.SVGProps<SVGSVGElement>) => {
+  return (
+    <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' {...props}>
+      <path d='M19.5 4H18v-.6A1.5 1.5 0 0016.5 2h-11A1.5 1.5 0 004 3.4v15.2A1.5 1.5 0 005.5 20H7v.6A1.5 1.5 0 008.5 22h11a1.5 1.5 0 001.5-1.4V5.4A1.5 1.5 0 0019.5 4zM5 18.6V3.4a.5.5 0 01.5-.4h11a.5.5 0 01.5.4v15.2a.5.5 0 01-.5.4h-11a.5.5 0 01-.5-.4zm15 2a.5.5 0 01-.5.4h-11a.5.5 0 01-.5-.4V20h8.5a1.5 1.5 0 001.5-1.4V5h1.5a.5.5 0 01.5.4z' />
+      <path fill='none' d='M0 0h24v24H0z' />
+    </svg>
+  );
+};

package/src/Icon/assets/ItDelete.tsx

@@ -0,0 +1,12 @@
+import * as React from 'react';
+export const component = (props: React.SVGProps<SVGSVGElement>) => {
+  return (
+    <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' {...props}>
+      <path d='M15.5 4v-.5c0-.8-.7-1.5-1.5-1.5h-4c-.8 0-1.5.7-1.5 1.5V4H3v1h2v15.5c0 .8.7 1.5 1.5 1.5h11c.8 0 1.5-.7 1.5-1.5V5h2V4h-5.5zm-6-.5c0-.3.2-.5.5-.5h4c.3 0 .5.2.5.5V4h-5v-.5zm8.5 17c0 .3-.2.5-.5.5h-11c-.3 0-.5-.2-.5-.5V5h12v15.5z' />
+      <path d='M11.5 8h1v10h-1zM8 8h1v10H8zM15 8h1v10h-1z' />
+      <g>
+        <path fill='none' d='M0 0h24v24H0z' />
+      </g>
+    </svg>
+  );
+};

package/src/Icon/assets/ItDesignersItalia.tsx

@@ -0,0 +1,9 @@
+import * as React from 'react';
+export const component = (props: React.SVGProps<SVGSVGElement>) => {
+  return (
+    <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' {...props}>
+      <path d='M8.7 20.2v-13h3.6v13.1l-3.6-.1zM23 10.1h-3.3v6.5c0 .2.1.4.3.6s.4.2.8.2h2.1l.2 2.8c-1.2.3-2.1.4-2.8.4-1.6 0-2.7-.3-3.3-1.1-.6-.7-.9-2-.9-3.9v-12h3.6v3.6H23v2.9zm-19.8 1c-.6 0-1.2-.2-1.6-.6-.4-.4-.6-.9-.6-1.5s.2-1.1.6-1.5c.4-.5.9-.7 1.6-.7s1.1.2 1.5.6c.4.5.6 1 .6 1.6s-.2 1.1-.6 1.5c-.4.4-.9.6-1.5.6z' />
+      <path fill='none' d='M0 0h24v24H0z' />
+    </svg>
+  );
+};

package/src/Icon/assets/ItDownload.tsx

@@ -0,0 +1,9 @@
+import * as React from 'react';
+export const component = (props: React.SVGProps<SVGSVGElement>) => {
+  return (
+    <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' {...props}>
+      <path d='M12 14.2L7.7 9.9l.7-.7 3.1 3.1V3h1v9.2l3.1-3 .7.7zm7-2.2v7.5a.5.5 0 01-.5.5h-13a.5.5 0 01-.5-.5V12H4v7.5A1.5 1.5 0 005.5 21h13a1.5 1.5 0 001.5-1.5V12z' />
+      <path fill='none' d='M0 0h24v24H0z' />
+    </svg>
+  );
+};

package/src/Icon/assets/ItError.tsx

@@ -0,0 +1,9 @@
+import * as React from 'react';
+export const component = (props: React.SVGProps<SVGSVGElement>) => {
+  return (
+    <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' {...props}>
+      <path d='M11.5 14.2V5.7h1.2v8.5zm-.1 4.1h1.2v-1.8h-1.2zM22 7.9v8.3L16.1 22H7.9L2 16.2V7.9L7.9 2h8.2zm-1 .4L15.7 3H8.3L3 8.3v7.5L8.3 21h7.4l5.3-5.2z' />
+      <path fill='none' d='M0 0h24v24H0z' />
+    </svg>
+  );
+};

package/src/Icon/assets/ItExchangeCircle.tsx

@@ -0,0 +1,9 @@
+import * as React from 'react';
+export const component = (props: React.SVGProps<SVGSVGElement>) => {
+  return (
+    <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' {...props}>
+      <path d='M12 2a10 10 0 1010 10A10 10 0 0012 2zm0 19a9 9 0 119-9 9 9 0 01-9 9zm5.1-8.9l.8.8-4.3 4.3a1.5 1.5 0 01-1.1.4 1.5 1.5 0 01-1.1-.4L9 14.7V17H8v-4h4v1H9.7l2.4 2.5h.8zm-6-4.6l-4.2 4.4-.8-.8 4.3-4.3a1.5 1.5 0 011.1-.4 1.5 1.5 0 011.1.4L15 9.3V7h1v4h-4v-1h2.3l-2.4-2.5h-.8z' />
+      <path fill='none' d='M0 0h24v24H0z' />
+    </svg>
+  );
+};

package/src/Icon/assets/ItExpand.tsx

@@ -0,0 +1,8 @@
+import * as React from 'react';
+export const component = (props: React.SVGProps<SVGSVGElement>) => {
+  return (
+    <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' {...props}>
+      <path d='M11.6 15.4L6 9.8l.7-.8 4.9 4.9L16.5 9l.7.8z' />
+    </svg>
+  );
+};

package/src/Icon/assets/ItExternalLink.tsx

@@ -0,0 +1,9 @@
+import * as React from 'react';
+export const component = (props: React.SVGProps<SVGSVGElement>) => {
+  return (
+    <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' {...props}>
+      <path d='M21 3v6h-1V4.7l-7.6 7.7-.8-.8L19.3 4H15V3zm-4 16.5a.5.5 0 01-.5.5h-12a.5.5 0 01-.5-.5v-12a.5.5 0 01.5-.5H12V6H4.5A1.5 1.5 0 003 7.5v12A1.5 1.5 0 004.5 21h12a1.5 1.5 0 001.5-1.5V12h-1z' />
+      <path fill='none' d='M0 0h24v24H0z' />
+    </svg>
+  );
+};

package/src/Icon/assets/ItFacebook.tsx

@@ -0,0 +1,9 @@
+import * as React from 'react';
+export const component = (props: React.SVGProps<SVGSVGElement>) => {
+  return (
+    <svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' {...props}>
+      <path fill='none' d='M0 0h24v24H0z' />
+      <path d='M13.55 22v-9.11h3.07l.46-3.56h-3.53V7.05c0-1 .29-1.73 1.77-1.73h1.87V2.14A25.14 25.14 0 0014.45 2c-2.72 0-4.58 1.66-4.58 4.7v2.62H6.81v3.57h3.06V22h3.68z' />
+    </svg>
+  );
+};

package/src/Icon/assets/ItFacebookSquare.tsx

@@ -0,0 +1,9 @@
+import * as React from 'react';
+export const component = (props: React.SVGProps<SVGSVGElement>) => {
+  return (
+    <svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' {...props}>
+      <path fill='none' d='M0 0h24v24H0z' />
+      <path d='M20 3H4a1 1 0 00-1 1v16a1 1 0 001 1h8.63v-6.95h-2.37v-2.74h2.34v-2a3.28 3.28 0 013.5-3.6c.705 0 1.41.04 2.11.12v2.44h-1.44c-1.13 0-1.34.53-1.34 1.32v1.74h2.7l-.35 2.72h-2.35v7H20a1 1 0 001-1V4a1 1 0 00-1-1z' />
+    </svg>
+  );
+};

package/src/Icon/assets/ItFile.tsx

@@ -0,0 +1,9 @@
+import * as React from 'react';
+export const component = (props: React.SVGProps<SVGSVGElement>) => {
+  return (
+    <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' {...props}>
+      <path d='M14.7 2H6.5A1.5 1.5 0 005 3.5v17A1.5 1.5 0 006.5 22h11a1.5 1.5 0 001.5-1.5V6.3zm.3 1.7L17.3 6h-1.8a.5.5 0 01-.5-.5zM17.5 21h-11a.5.5 0 01-.5-.5v-17a.5.5 0 01.5-.5H14v2.5A1.5 1.5 0 0015.5 7H18v13.5a.5.5 0 01-.5.5zM8 9h8v1H8zm0 2h8v1H8zm0 2h4v1H8z' />
+      <path fill='none' d='M0 0h24v24H0z' />
+    </svg>
+  );
+};

package/src/Icon/assets/ItFiles.tsx

@@ -0,0 +1,9 @@
+import * as React from 'react';
+export const component = (props: React.SVGProps<SVGSVGElement>) => {
+  return (
+    <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' {...props}>
+      <path d='M15.7 2H7.5A1.5 1.5 0 006 3.5V4h-.5A1.5 1.5 0 004 5.5v15A1.5 1.5 0 005.5 22h11a1.5 1.5 0 001.5-1.5V20h.5a1.5 1.5 0 001.5-1.5V6.3zm.3 1.7L18.3 6h-1.8a.5.5 0 01-.5-.5zm1 16.8a.5.5 0 01-.5.5h-11a.5.5 0 01-.5-.5v-15a.5.5 0 01.5-.5H6v13.5A1.5 1.5 0 007.5 20H17zm1.5-1.5h-11a.5.5 0 01-.5-.5v-15a.5.5 0 01.5-.5H15v2.5A1.5 1.5 0 0016.5 7H19v11.5a.5.5 0 01-.5.5zM9 9h8v1H9zm0 2h8v1H9zm0 2h4v1H9z' />
+      <path fill='none' d='M0 0h24v24H0z' />
+    </svg>
+  );
+};

package/src/Icon/assets/ItFlag.tsx

@@ -0,0 +1,9 @@
+import * as React from 'react';
+export const component = (props: React.SVGProps<SVGSVGElement>) => {
+  return (
+    <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' {...props}>
+      <path d='M17.1 8l3.3-5H5V2H4v20h1v-9h15.4l-3.3-5zM5 4h13.6l-2.7 4 2.7 4H5V4z' />
+      <path fill='none' d='M0 0h24v24H0z' />
+    </svg>
+  );
+};