@pagopa/io-app-design-system 1.14.0 → 1.16.0

package/src/components/icons/Icon.tsx

@@ -70,7 +70,6 @@ import IconEyeShow from "./svg/IconEyeShow";
 import IconFiscalCodeIndividual from "./svg/IconFiscalCodeIndividual";
 import IconFornitori from "./svg/IconFornitori";
 import IconGallery from "./svg/IconGallery";
-import IconGiacenza from "./svg/IconGiacenza";
 import IconHistory from "./svg/IconHistory";
 import IconHome from "./svg/IconHome";
 import IconHomeFill from "./svg/IconHomeFill";
@@ -160,9 +159,39 @@ import IconHealthCard from "./svg/IconHealthCard";
 import IconDocPaymentCode from "./svg/IconDocPaymentCode";
 import IconNotes from "./svg/IconNotes";
 import IconEntityCode from "./svg/IconEntityCode";
+import IconFolder from "./svg/IconFolder";
+import IconReceiptOn from "./svg/IconReceiptOn";
+import IconFingerprint from "./svg/IconFingerprint";
+import IconAddSmall from "./svg/IconAddSmall";
+import IconArchiveFilled from "./svg/IconArchiveFilled";
+import IconCode from "./svg/IconCode";
+import IconCompare from "./svg/IconCompare";
+import IconCreditCardOff from "./svg/IconCreditCardOff";
+import IconDeviceVibration from "./svg/IconDeviceVibration";
+import IconDocPaymentTitle from "./svg/IconDocPaymentTitle";
+import IconDocGiacenza from "./svg/IconDocGiacenza";
+import IconExternalLinkSmall from "./svg/IconExternalLinkSmall";
+import IconFamilySharing from "./svg/IconFamilySharing";
+import IconFilterOniOS from "./svg/IconFilterOniOS";
+import IconFilterOffiOS from "./svg/IconFilterOffiOS";
+import IconFilterAndroid from "./svg/IconFilterAndroid";
+import IconForward from "./svg/IconForward";
+import IconHearthEmpty from "./svg/IconHearthEmpty";
+import IconHearthFilled from "./svg/IconHearthFilled";
+import IconInboxEmpty from "./svg/IconInboxEmpty";
+import IconInboxFilled from "./svg/IconInboxFilled";
+import IconInstruction from "./svg/IconInstruction";
+import IconTerms from "./svg/IconTerms";
+import IconKeyboardDown from "./svg/IconKeyboardDown";
+import IconMapPin from "./svg/IconMapPin";
+import IconNoticePlain from "./svg/IconNoticePlain";
+import IconPrint from "./svg/IconPrint";
+import IconRead from "./svg/IconRead";
+import IconReceiptOff from "./svg/IconReceiptOff";
+import IconSignal from "./svg/IconSignal";
+import IconTouch from "./svg/IconTouch";
 
 export const IOIcons = {
-  archive: IconArchive,
   spid: IconSpid,
   cie: IconCie /* io-cie */,
   qrCode: IconQrCode,
@@ -178,6 +207,9 @@ export const IOIcons = {
   hourglass: IconHourglass,
   shareiOs: IconShareiOs,
   shareAndroid: IconShareAndroid,
+  filterOniOS: IconFilterOniOS,
+  filterOffiOS: IconFilterOffiOS,
+  filterAndroid: IconFilterAndroid,
   locked: IconLockOn,
   unlocked: IconLockOff,
   initiatives: IconInitiatives,
@@ -196,29 +228,41 @@ export const IOIcons = {
   messageLegal: IconMessageLegal,
   message: IconMessage,
   chat: IconChat,
+  archive: IconArchive,
+  archiveFilled: IconArchiveFilled,
+  inbox: IconInboxEmpty,
+  inboxFilled: IconInboxFilled,
   doc: IconDocument,
   docSign: IconDocumentSign,
   docAgree: IconAgreement,
   security: IconSecurity,
   option: IconOption,
   key: IconKey,
-  docGiacenza: IconGiacenza,
+  docGiacenza: IconDocGiacenza,
+  docPaymentTitle: IconDocPaymentTitle,
   docPaymentCode: IconDocPaymentCode,
   docAttach: IconDocumentAttachment,
   docAttachPDF: IconDocumentAttachmentPDF,
+  folder: IconFolder,
+  receiptOn: IconReceiptOn,
+  receiptOff: IconReceiptOff,
   notes: IconNotes,
   attachment: IconAttachment,
+  print: IconPrint,
   add: IconAdd,
+  addSmall: IconAddSmall,
   success: IconSuccess,
   ok: IconOk,
   fiscalCodeIndividual: IconFiscalCodeIndividual,
   entityCode: IconEntityCode,
   creditCard: IconCreditCard,
+  creditCardOff: IconCreditCardOff,
   bonus: IconBonus,
   transactionsBoxed: IconTransactionsBoxed,
   transactions: IconTransactions,
   amount: IconAmount,
   psp: IconPSP,
+  mapPin: IconMapPin,
   locationiOS: IconLocationiOS,
   locationiOSFilled: IconLocationiOSFilled,
   locationAndroid: IconLocationAndroid,
@@ -226,6 +270,7 @@ export const IOIcons = {
   warningFilled: IconWarningFilled,
   notice: IconNotice,
   noticeFilled: IconNoticeFilled,
+  noticePlain: IconNoticePlain,
   info: IconInfo,
   infoFilled: IconInfoFilled,
   canceled: IconCanceled,
@@ -241,15 +286,23 @@ export const IOIcons = {
   profile: IconProfile,
   profileFilled: IconProfileFilled,
   profileAlt: IconProfileAlt,
+  familySharing: IconFamilySharing,
   lightbulb: IconLightbulb,
   magicWand: IconMagicWand,
   starFilled: IconStarFilled,
   starEmpty: IconStarEmpty,
+  hearthEmpty: IconHearthEmpty,
+  hearthFilled: IconHearthFilled,
   switchOff: IconSwitchOff,
+  fingerprint: IconFingerprint,
+  touch: IconTouch,
   device: IconDevice,
+  deviceVibration: IconDeviceVibration,
   contactless: IconContactless,
+  signal: IconSignal,
   notification: IconNotification,
   keyboard: IconKeyboard,
+  keyboardDown: IconKeyboardDown,
   dotMenu: IconDotMenu,
   barcode: IconBarcode,
   save: IconSave,
@@ -259,7 +312,12 @@ export const IOIcons = {
   tag: IconTag,
   gallery: IconGallery,
   externalLink: IconExternalLink,
+  externalLinkSmall: IconExternalLinkSmall,
+  forward: IconForward,
   cancel: IconCancel,
+  compare: IconCompare,
+  instruction: IconInstruction,
+  terms: IconTerms,
   help: IconQuestion,
   search: IconSearch,
   disabilityCard: IconDisabilityCard,
@@ -280,6 +338,12 @@ export const IOIcons = {
   change: IconChange,
   backiOS: IconBackiOS,
   backAndroid: IconBackAndroid,
+  checkTick: IconCheckTick,
+  checkTickBig: IconCheckTickBig,
+  read: IconRead,
+  light: IconLight,
+  lightFilled: IconLightFilled,
+  code: IconCode,
   navMessages: IconNavMessages,
   navMessagesFocused: IconNavMessagesFocused,
   navWallet: IconNavWallet,
@@ -311,10 +375,6 @@ export const IOIcons = {
   productIOApp: IconProductIOApp,
   productPagoPA: IconProductPagoPA,
   productIOAppBlueBg: IconProductIOAppBlueBg,
-  checkTick: IconCheckTick,
-  checkTickBig: IconCheckTickBig,
-  light: IconLight,
-  lightFilled: IconLightFilled,
   systemSettingsAndroid: IconSystemSettingsAndroid,
   systemSettingsiOS: IconSystemSettingsiOS,
   systemToggleInstructions: IconSystemToggleInstructions,
@@ -430,9 +490,73 @@ export class IconClassComponent extends React.Component<IOAnimatedIconsProps> {
 */
 
 /* New icons */
-// const {} = IOIcons;
+const {
+  filterOniOS,
+  filterOffiOS,
+  filterAndroid,
+  archiveFilled,
+  inbox,
+  inboxFilled,
+  docGiacenza,
+  docPaymentTitle,
+  folder,
+  receiptOn,
+  receiptOff,
+  print,
+  addSmall,
+  creditCardOff,
+  mapPin,
+  noticePlain,
+  familySharing,
+  hearthEmpty,
+  hearthFilled,
+  fingerprint,
+  touch,
+  deviceVibration,
+  signal,
+  keyboardDown,
+  externalLinkSmall,
+  forward,
+  compare,
+  instruction,
+  terms,
+  read,
+  code
+} = IOIcons;
 
-// export const IOIconsNew = {};
+export const IOIconsNew = {
+  filterOniOS,
+  filterOffiOS,
+  filterAndroid,
+  archiveFilled,
+  inbox,
+  inboxFilled,
+  docGiacenza,
+  docPaymentTitle,
+  folder,
+  receiptOn,
+  receiptOff,
+  print,
+  addSmall,
+  creditCardOff,
+  mapPin,
+  noticePlain,
+  familySharing,
+  hearthEmpty,
+  hearthFilled,
+  fingerprint,
+  touch,
+  deviceVibration,
+  signal,
+  keyboardDown,
+  externalLinkSmall,
+  forward,
+  compare,
+  instruction,
+  terms,
+  read,
+  code
+};
 
 /* Navigation */
 const {

package/src/components/icons/generateNewIcons.js

@@ -0,0 +1,186 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
+/* eslint-disable no-console */
+/* eslint-disable @typescript-eslint/restrict-plus-operands */
+
+/**
+DRAFT for an AUTOMATIC process to generate new icon components 
+(`Icon....tsx`) from the SVG files exported from Figma.
+
+Prerequisites:
+- The icon must be exported from the 24 × 24 frame
+- The icon must be saved with the final name
+  - To learn more about naming conventions, please read the local README
+*/
+
+// STEPS:
+
+/**
+ * 1. Only process the newly added files
+ *
+ * Suggested path:
+ * 1. Files that need to be processed must be in the `svg/originals` folder.
+ * 2. Add a new file with the timestamp of the last process run.
+ *    The file must be committed along with others.
+ * 3. Only files added after that timestamp value will be processed.
+ * 4. After the process run, update the new file with the current timestamp.
+ */
+
+/**
+ * 2. Optimize SVG files with SVGO package (https://github.com/svg/svgo)
+ *
+ * Suggested path:
+ * 1. Add `svgo` to the `package.json` to use it as an executable
+ * 2. Configure it with the following parameters:
+ *   - removeDimensions
+ *   - removeRasterImages
+ *   - removeScriptElement
+ *   - removeViewBox (disabled)
+ * 3. Overwrite the original files
+ * 4. Optionally save the old ones in a `tmp` folder, which may be useful
+ *    for debugging purposes.
+ *    - Consider adding a `--debug' flag to the
+ *      command to enable this behavior.
+ *    - Add the `tmp` folder to `.gitignore` to keep the folder clean
+ *  5. Check the files after the optimizations
+ */
+
+/**
+ * 3. Create the relative React component (with .tsx)
+ *
+ * Suggested path:
+ * - For every new SVG file:
+ *   1. Copy all the code contained in the `<svg>` tag
+ *   2. Use the file `_IconTemplate.tsx` as component template
+ *      - Replace `IconTemplate` with the original SVG name
+ *      - Remove all the comments inserted in the component file
+ *   3. Replace the `{SVGContent}` placeholder with the code copied
+ *      in the step 1, replacing all the tags with the appropriate
+ *      React ones. E.g: `path` becomes `Path` and so on…
+ *   4. Replace all the color values, set in hexadecimal format, with the
+ *      `currentColor` attribute.
+ *      E.g: fill="#CCCCCC" -> fill="currentColor"
+ *   5. Save a new file in the `svg` folder with the same filename
+ *      of the relative SVG file and extension `.tsx`.
+ *      E.g: svg/originals/IconProfile.svg -> svg/IconProfile.tsx
+ *   6. Save the list of processed SVG files and corresponding generated
+ *      React components to a separate file. Add it to the `.gitignore`
+ *      to keep the folder clean.
+ */
+
+const path = require("path");
+const join = path.join;
+const { optimize } = require("svgo");
+const prettier = require("prettier");
+const fs = require("fs-extra");
+const { transform } = require("@svgr/core");
+
+const svgDir = join(__dirname, "svg/originals");
+const tsxDir = join(__dirname, "svg");
+const templateFilePath = join(__dirname, "svg/_IconTemplate.tsx");
+const timestampFilePath = join(__dirname, "timestamp.txt");
+
+const convertTimestampToReadableFormat = timestamp =>
+  new Date(timestamp).toLocaleString("it-IT", {
+    timeZone: "Europe/Rome"
+  });
+
+fs.readFile(timestampFilePath, "utf8", (err, timestamp) => {
+  if (err) {
+    console.log("Timestamp file not found.");
+    throw err;
+  }
+
+  console.log(
+    "Last processed timestamp:",
+    convertTimestampToReadableFormat(timestamp)
+  );
+  console.log(`————————————————`);
+
+  fs.readdir(svgDir, (err, files) => {
+    if (err) {
+      throw err;
+    }
+
+    files.forEach(file => {
+      const filePath = join(svgDir, file);
+      const fileStats = fs.statSync(filePath);
+
+      /* Only process files with a more recent creation
+      date later than the timestamp value */
+      if (fileStats.mtime > new Date(timestamp)) {
+        const data = fs.readFileSync(filePath, "utf8");
+
+        // Check if the file is an SVG
+        if (!file.endsWith(".svg")) {
+          return;
+        }
+
+        // Using SVGO to optimize the SVG
+        const result = optimize(data, {
+          path: filePath,
+          plugins: [
+            "removeDimensions",
+            "removeRasterImages",
+            "removeScriptElement",
+            "removeViewBox"
+          ]
+        });
+        // Overwrite original SVG file with optimized code
+        fs.writeFileSync(filePath, result.data);
+
+        // Convert SVG to JSX using `svgr`
+        const jsxCode = transform.sync(result.data, {
+          // Optimize SVG code using SVGO
+          svgo: true,
+          svgoConfig: {
+            removeRasterImages: true,
+            removeScriptElement: true,
+            removeUselessDefs: true
+          },
+          // Transform tags in Capital Case for React Native
+          native: true,
+          // Remove `width` and `height` attrs
+          dimensions: false,
+          /* Prettify the result */
+          plugins: ["@svgr/plugin-jsx"]
+        });
+
+        /* Replace hardcoded color value with `currentColor` */
+        const jsxCodeWithoutHardcodedColors = jsxCode.replace(
+          /fill="[^"]*"/g,
+          'fill="currentColor"'
+        );
+
+        // Extract only the Path tags from the JSX code
+        const pathTagRegex = /<Path[^>]*\/>/g;
+        const pathTags = jsxCodeWithoutHardcodedColors.match(pathTagRegex);
+        const jsxCodeWithPathOnly = pathTags.join("");
+
+        const template = fs.readFileSync(templateFilePath, "utf8");
+        const componentData = template
+          .replace(/IconTemplate/g, file.replace(".svg", ""))
+          .replace(/\/\/.*\n/g, "") // Remove lines starting with //
+          .replace(`{/* SVGContent */}`, jsxCodeWithPathOnly);
+
+        const fileWithTsxExtension = file.replace(".svg", ".tsx");
+        const tsxFilePath = join(tsxDir, fileWithTsxExtension);
+        fs.writeFileSync(
+          tsxFilePath,
+          prettier.format(componentData, { parser: "typescript" })
+        );
+
+        console.log(`${file} → ${fileWithTsxExtension}`);
+      }
+    });
+
+    const newTimestamp = new Date();
+    const convertedISOTimestamp = newTimestamp.toISOString();
+    fs.writeFileSync(timestampFilePath, convertedISOTimestamp);
+
+    const readableUpdatedTimestamp =
+      convertTimestampToReadableFormat(newTimestamp);
+
+    console.log(`————————————————`);
+    console.log("Updated timestamp:", readableUpdatedTimestamp);
+  });
+});

package/src/components/icons/generateNewTimestamp.js

@@ -0,0 +1,7 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
+const fs = require("fs-extra");
+
+const timestampFilePath = "./timestamp.txt";
+const currentTimestamp = new Date().toISOString();
+
+fs.writeFileSync(timestampFilePath, currentTimestamp);

package/src/components/icons/svg/IconAddSmall.tsx

@@ -0,0 +1,16 @@
+import React from "react";
+import { Svg, Path } from "react-native-svg";
+import { SVGIconProps } from "../Icon";
+
+const IconAddSmall = ({ size, style, ...props }: SVGIconProps) => (
+  <Svg width={size} height={size} viewBox="0 0 24 24" style={style} {...props}>
+    <Path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M12.9999 6C12.9999 5.44772 12.5522 5 11.9999 5C11.4477 5 10.9999 5.44772 10.9999 6V11L6.00098 11C5.44869 11 5.00098 11.4477 5.00098 12C5.00098 12.5523 5.44869 13 6.00098 13L10.9999 13V18.0008C10.9999 18.553 11.4477 19.0008 11.9999 19.0008C12.5522 19.0008 12.9999 18.553 12.9999 18.0008V13L17.9998 13C18.5521 13 18.9998 12.5523 18.9998 12C18.9998 11.4477 18.5521 11 17.9998 11L12.9999 11V6Z"
+      fill="currentColor"
+    />
+  </Svg>
+);
+
+export default IconAddSmall;

package/src/components/icons/svg/IconArchiveFilled.tsx

@@ -0,0 +1,16 @@
+import React from "react";
+import { Svg, Path } from "react-native-svg";
+import { SVGIconProps } from "../Icon";
+
+const IconArchiveFilled = ({ size, style, ...props }: SVGIconProps) => (
+  <Svg width={size} height={size} viewBox="0 0 24 24" style={style} {...props}>
+    <Path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M2 2C0.895431 2 0 2.89543 0 4V6C0 7.10457 0.89543 8 2 8H22C23.1046 8 24 7.10457 24 6V4C24 2.89543 23.1046 2 22 2H2ZM2 8H22V20C22 22.2091 20.2091 24 18 24H6C3.79086 24 2 22.2091 2 20L2 8ZM8 13C8 12.4477 8.44772 12 9 12H15C15.5523 12 16 12.4477 16 13C16 13.5523 15.5523 14 15 14H9C8.44772 14 8 13.5523 8 13Z"
+      fill="currentColor"
+    />
+  </Svg>
+);
+
+export default IconArchiveFilled;

package/src/components/icons/svg/IconCode.tsx

@@ -0,0 +1,16 @@
+import React from "react";
+import { Svg, Path } from "react-native-svg";
+import { SVGIconProps } from "../Icon";
+
+const IconCode = ({ size, style, ...props }: SVGIconProps) => (
+  <Svg width={size} height={size} viewBox="0 0 24 24" style={style} {...props}>
+    <Path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M9.03896 18.726L13.039 4.72601C13.071 4.5954 13.129 4.47258 13.2095 4.36491C13.2901 4.25724 13.3916 4.16692 13.5078 4.09936C13.6241 4.0318 13.7528 3.98838 13.8862 3.97171C14.0197 3.95503 14.1551 3.96544 14.2844 4.00231C14.4137 4.03919 14.5343 4.10176 14.6389 4.1863C14.7435 4.27084 14.8299 4.3756 14.8931 4.49432C14.9562 4.61304 14.9948 4.74328 15.0065 4.87725C15.0181 5.01122 15.0027 5.14616 14.961 5.27401L10.961 19.274C10.9014 19.483 10.7754 19.6669 10.602 19.7979C10.4286 19.9289 10.2173 19.9999 9.99996 20C9.90702 19.9995 9.81455 19.9868 9.72496 19.962C9.47015 19.889 9.25477 19.7178 9.12613 19.486C8.9975 19.2542 8.96615 18.9809 9.03896 18.726ZM1.29279 12.707L5.29279 16.707C5.38503 16.8025 5.49538 16.8787 5.61738 16.9311C5.73939 16.9835 5.87061 17.0111 6.00339 17.0122C6.13617 17.0134 6.26784 16.9881 6.39074 16.9378C6.51364 16.8875 6.62529 16.8132 6.71918 16.7194C6.81308 16.6255 6.88733 16.5138 6.93761 16.3909C6.98789 16.268 7.01319 16.1363 7.01204 16.0036C7.01088 15.8708 6.9833 15.7396 6.93089 15.6176C6.87848 15.4956 6.8023 15.3852 6.70679 15.293L3.41379 12L6.70679 8.70696C6.8023 8.61471 6.87848 8.50437 6.93089 8.38236C6.9833 8.26036 7.01088 8.12914 7.01204 7.99636C7.01319 7.86358 6.98789 7.7319 6.93761 7.609C6.88733 7.48611 6.81308 7.37446 6.71918 7.28056C6.62529 7.18667 6.51364 7.11242 6.39074 7.06214C6.26784 7.01186 6.13617 6.98655 6.00339 6.98771C5.87061 6.98886 5.73939 7.01645 5.61738 7.06886C5.49538 7.12127 5.38503 7.19745 5.29279 7.29296L1.29279 11.293C1.10532 11.4805 1 11.7348 1 12C1 12.2651 1.10532 12.5194 1.29279 12.707ZM18.7071 7.29296C18.6148 7.19745 18.5045 7.12127 18.3825 7.06886C18.2605 7.01645 18.1293 6.98886 17.9965 6.98771C17.8637 6.98655 17.732 7.01186 17.6091 7.06214C17.4862 7.11242 17.3746 7.18667 17.2807 7.28056C17.1868 7.37446 17.1125 7.48611 17.0623 7.609C17.012 7.7319 16.9867 7.86358 16.9878 7.99636C16.989 8.12914 17.0166 8.26036 17.069 8.38236C17.1214 8.50437 17.1976 8.61471 17.2931 8.70696L20.5861 12L17.2931 15.293C17.1976 15.3852 17.1214 15.4956 17.069 15.6176C17.0166 15.7396 16.989 15.8708 16.9878 16.0036C16.9867 16.1363 17.012 16.268 17.0623 16.3909C17.1125 16.5138 17.1868 16.6255 17.2807 16.7194C17.3746 16.8132 17.4862 16.8875 17.6091 16.9378C17.732 16.9881 17.8637 17.0134 17.9965 17.0122C18.1293 17.0111 18.2605 16.9835 18.3825 16.9311C18.5045 16.8787 18.6148 16.8025 18.7071 16.707L22.7071 12.707C22.8946 12.5194 22.9999 12.2651 22.9999 12C22.9999 11.7348 22.8946 11.4805 22.7071 11.293L18.7071 7.29296Z"
+      fill="currentColor"
+    />
+  </Svg>
+);
+
+export default IconCode;

package/src/components/icons/svg/IconCompare.tsx

@@ -0,0 +1,16 @@
+import React from "react";
+import { Svg, Path } from "react-native-svg";
+import { SVGIconProps } from "../Icon";
+
+const IconCompare = ({ size, style, ...props }: SVGIconProps) => (
+  <Svg width={size} height={size} viewBox="0 0 24 24" style={style} {...props}>
+    <Path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M13.0567 1.97175C13.0567 1.40396 12.5959 0.943665 12.0281 0.943665C11.4603 0.943665 11 1.40396 11 1.97175V3H7C4.23858 3 2 5.23858 2 8V18C2 20.7614 4.23858 23 7 23H11V23.9763C11 24.5441 11.4608 25.0044 12.0286 25.0044C12.5964 25.0044 13.0567 24.5441 13.0567 23.9763V23H17C19.7614 23 22 20.7614 22 18V8C22 5.23858 19.7614 3 17 3H13.0567V1.97175ZM11 5H7C5.34315 5 4 6.34315 4 8V18C4 19.6569 5.34315 21 7 21H11V5ZM13.0567 21V5H17C18.6569 5 20 6.34315 20 8V18C20 19.6569 18.6569 21 17 21H13.0567Z"
+      fill="currentColor"
+    />
+  </Svg>
+);
+
+export default IconCompare;

package/src/components/icons/svg/IconCreditCardOff.tsx

@@ -0,0 +1,16 @@
+import React from "react";
+import { Svg, Path } from "react-native-svg";
+import { SVGIconProps } from "../Icon";
+
+const IconCreditCardOff = ({ size, style, ...props }: SVGIconProps) => (
+  <Svg width={size} height={size} viewBox="0 0 24 24" style={style} {...props}>
+    <Path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M1.70711 0.292893C1.31658 -0.0976311 0.683417 -0.0976311 0.292893 0.292893C-0.0976311 0.683417 -0.0976311 1.31658 0.292893 1.70711L1.76944 3.18365C0.687055 4.10081 1.49012e-08 5.47017 1.49012e-08 7V17C1.49012e-08 19.7614 2.23858 22 5 22H19C19.4823 22 19.9487 21.9317 20.39 21.8042L22.2929 23.7071C22.6834 24.0976 23.3166 24.0976 23.7071 23.7071C24.0976 23.3166 24.0976 22.6834 23.7071 22.2929L1.70711 0.292893ZM18.5858 20L14.9974 16.4117C14.9991 16.4409 15 16.4703 15 16.5C15 17.3284 14.3284 18 13.5 18H10.5C9.67157 18 9 17.3284 9 16.5C9 15.6716 9.67157 15 10.5 15H13.5C13.5297 15 13.5591 15.0009 13.5883 15.0026L8.58579 10H2V17C2 18.6569 3.34315 20 5 20H18.5858ZM6.58579 8L3.19177 4.60598C2.46779 5.15368 2 6.02221 2 7V8H6.58579ZM22 8H12.214L14.214 10H22V17C22 17.2421 21.9713 17.4776 21.9171 17.7031L23.4656 19.2516C23.8074 18.5749 24 17.8099 24 17V7C24 4.23858 21.7614 2 19 2H6.21402L8.21402 4H19C20.6569 4 22 5.34315 22 7V8ZM4 16.5C4 15.6716 4.67157 15 5.5 15C6.32843 15 7 15.6716 7 16.5C7 17.3284 6.32843 18 5.5 18C4.67157 18 4 17.3284 4 16.5Z"
+      fill="currentColor"
+    />
+  </Svg>
+);
+
+export default IconCreditCardOff;

package/src/components/icons/svg/IconDeviceVibration.tsx

@@ -0,0 +1,16 @@
+import React from "react";
+import { Svg, Path } from "react-native-svg";
+import { SVGIconProps } from "../Icon";
+
+const IconDeviceVibration = ({ size, style, ...props }: SVGIconProps) => (
+  <Svg width={size} height={size} viewBox="0 0 24 24" style={style} {...props}>
+    <Path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M9 0C6.23858 0 4 2.23858 4 5V19C4 21.7614 6.23858 24 9 24H15C17.7614 24 20 21.7614 20 19V5C20 2.23858 17.7614 0 15 0H9ZM6 5C6 3.34315 7.34315 2 9 2H15C16.6569 2 18 3.34315 18 5V19C18 20.6569 16.6569 22 15 22H9C7.34315 22 6 20.6569 6 19V5ZM12 20C12.5523 20 13 19.5523 13 19C13 18.4477 12.5523 18 12 18C11.4477 18 11 18.4477 11 19C11 19.5523 11.4477 20 12 20ZM0 8C0 7.44772 0.447715 7 1 7C1.55228 7 2 7.44772 2 8V16C2 16.5523 1.55228 17 1 17C0.447715 17 0 16.5523 0 16V8ZM23 7C22.4477 7 22 7.44772 22 8V16C22 16.5523 22.4477 17 23 17C23.5523 17 24 16.5523 24 16V8C24 7.44772 23.5523 7 23 7Z"
+      fill="currentColor"
+    />
+  </Svg>
+);
+
+export default IconDeviceVibration;

package/src/components/icons/svg/IconDocGiacenza.tsx

@@ -0,0 +1,16 @@
+import React from "react";
+import { Svg, Path } from "react-native-svg";
+import { SVGIconProps } from "../Icon";
+
+const IconDocGiacenza = ({ size, style, ...props }: SVGIconProps) => (
+  <Svg width={size} height={size} viewBox="0 0 24 24" style={style} {...props}>
+    <Path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M2 5C2 3.34315 3.34315 2 5 2H14V7C14 8.65685 15.3431 10 17 10H22V19C22 20.6569 20.6569 22 19 22H5C3.34315 22 2 20.6569 2 19V5ZM21.501 8C21.3911 7.83409 21.2641 7.67835 21.1213 7.53553L16.4645 2.87868C16.3216 2.73586 16.1659 2.60893 16 2.49902V7C16 7.55229 16.4477 8 17 8H21.501ZM5 0C2.23858 0 0 2.23858 0 5V19C0 21.7614 2.23858 24 5 24H19C21.7614 24 24 21.7614 24 19V9.65685C24 8.33077 23.4732 7.059 22.5355 6.12132L17.8787 1.46447C16.941 0.526784 15.6692 0 14.3431 0H5ZM8.02809 19.5C8.87203 19.5 9.55618 18.8159 9.55618 17.9719C9.55618 17.128 8.87203 16.4438 8.02809 16.4438C7.18415 16.4438 6.5 17.128 6.5 17.9719C6.5 18.8159 7.18415 19.5 8.02809 19.5ZM8.02809 4.44385H8.02863C8.59643 4.44385 9.05672 4.90414 9.05672 5.47194V13.4765C9.05672 14.0443 8.59643 14.5046 8.02863 14.5046H8.02809C7.46029 14.5046 7 14.0443 7 13.4765V5.47194C7 4.90414 7.46029 4.44385 8.02809 4.44385Z"
+      fill="currentColor"
+    />
+  </Svg>
+);
+
+export default IconDocGiacenza;

package/src/components/icons/svg/IconDocPaymentTitle.tsx

@@ -0,0 +1,16 @@
+import React from "react";
+import { Svg, Path } from "react-native-svg";
+import { SVGIconProps } from "../Icon";
+
+const IconDocPaymentTitle = ({ size, style, ...props }: SVGIconProps) => (
+  <Svg width={size} height={size} viewBox="0 0 24 24" style={style} {...props}>
+    <Path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M5 2C3.34315 2 2 3.34315 2 5V19C2 20.6569 3.34315 22 5 22H19C20.6569 22 22 20.6569 22 19V10H17C15.3431 10 14 8.65685 14 7V2H5ZM16 2.49902V7C16 7.55229 16.4477 8 17 8H21.501C21.3911 7.83409 21.2641 7.67835 21.1213 7.53553L16.4645 2.87868C16.3216 2.73586 16.1659 2.60893 16 2.49902ZM0 5C0 2.23858 2.23858 0 5 0H14.3431C15.6692 0 16.941 0.526784 17.8787 1.46447L22.5355 6.12132C23.4732 7.059 24 8.33077 24 9.65685V19C24 21.7614 21.7614 24 19 24H5C2.23858 24 0 21.7614 0 19V5ZM5 6.5C5 5.67157 5.67157 5 6.5 5H9.5C10.3284 5 11 5.67157 11 6.5C11 7.32843 10.3284 8 9.5 8H6.5C5.67157 8 5 7.32843 5 6.5ZM6 13C5.44772 13 5 13.4477 5 14C5 14.5523 5.44772 15 6 15H18C18.5523 15 19 14.5523 19 14C19 13.4477 18.5523 13 18 13H6ZM5 18C5 17.4477 5.44772 17 6 17H18C18.5523 17 19 17.4477 19 18C19 18.5523 18.5523 19 18 19H6C5.44772 19 5 18.5523 5 18Z"
+      fill="currentColor"
+    />
+  </Svg>
+);
+
+export default IconDocPaymentTitle;

package/src/components/icons/svg/IconExternalLinkSmall.tsx

@@ -0,0 +1,16 @@
+import React from "react";
+import { Svg, Path } from "react-native-svg";
+import { SVGIconProps } from "../Icon";
+
+const IconExternalLinkSmall = ({ size, style, ...props }: SVGIconProps) => (
+  <Svg width={size} height={size} viewBox="0 0 24 24" style={style} {...props}>
+    <Path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M7 8C7 7.44772 7.44772 7 8 7H8.75C9.30228 7 9.75 6.55228 9.75 6C9.75 5.44772 9.30228 5 8.75 5H8C6.34315 5 5 6.34315 5 8V16C5 17.6569 6.34315 19 8 19H16C17.6569 19 19 17.6569 19 16V15.25C19 14.6977 18.5523 14.25 18 14.25C17.4477 14.25 17 14.6977 17 15.25V16C17 16.5523 16.5523 17 16 17H8C7.44772 17 7 16.5523 7 16V8ZM13 5C12.4477 5 12 5.44772 12 6C12 6.55228 12.4477 7 13 7H15.5858L12.2929 10.2929C11.9024 10.6834 11.9024 11.3166 12.2929 11.7071C12.6834 12.0976 13.3166 12.0976 13.7071 11.7071L17 8.41421V11C17 11.5523 17.4477 12 18 12C18.5523 12 19 11.5523 19 11V7C19 5.89543 18.1046 5 17 5H13Z"
+      fill="currentColor"
+    />
+  </Svg>
+);
+
+export default IconExternalLinkSmall;

package/src/components/icons/svg/IconFamilySharing.tsx

@@ -0,0 +1,16 @@
+import React from "react";
+import { Svg, Path } from "react-native-svg";
+import { SVGIconProps } from "../Icon";
+
+const IconFamilySharing = ({ size, style, ...props }: SVGIconProps) => (
+  <Svg width={size} height={size} viewBox="0 0 24 24" style={style} {...props}>
+    <Path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M9 6.5C9 7.32843 8.32843 8 7.5 8C6.67157 8 6 7.32843 6 6.5C6 5.67157 6.67157 5 7.5 5C8.32843 5 9 5.67157 9 6.5ZM11 6.5C11 8.433 9.433 10 7.5 10C5.567 10 4 8.433 4 6.5C4 4.567 5.567 3 7.5 3C9.433 3 11 4.567 11 6.5ZM18 6.5C18 7.32843 17.3284 8 16.5 8C15.6716 8 15 7.32843 15 6.5C15 5.67157 15.6716 5 16.5 5C17.3284 5 18 5.67157 18 6.5ZM20 6.5C20 8.433 18.433 10 16.5 10C14.567 10 13 8.433 13 6.5C13 4.567 14.567 3 16.5 3C18.433 3 20 4.567 20 6.5ZM15.3332 14.1252C15.4099 14.1085 15.4871 14.0935 15.5647 14.0801C16.6192 13.8981 17.704 14.0278 18.686 14.4531C19.6679 14.8785 20.5045 15.581 21.0931 16.4748C21.6818 17.3685 21.9969 18.4145 21.9999 19.4846C22.0014 20.0369 22.4504 20.4834 23.0027 20.4818C23.5549 20.4803 24.0014 20.0313 23.9999 19.4791C23.9958 18.0198 23.5661 16.5934 22.7634 15.3747C21.9607 14.156 20.82 13.1979 19.4809 12.6179C18.1418 12.0379 16.6626 11.8611 15.2246 12.1092C14.7671 12.1882 14.32 12.309 13.8887 12.4692C14.0005 12.5708 14.1101 12.6752 14.2174 12.7825C14.6327 13.1978 15.0056 13.6476 15.3332 14.1252ZM0 19.5C0 20.0523 0.447714 20.5 0.999999 20.5C1.55228 20.5 2 20.0523 2 19.5C2 18.0413 2.57946 16.6424 3.61091 15.6109C4.64236 14.5795 6.04131 14 7.5 14C8.95869 14 10.3576 14.5795 11.3891 15.6109C12.4205 16.6424 13 18.0413 13 19.5C13 20.0523 13.4477 20.5 14 20.5C14.5523 20.5 15 20.0523 15 19.5C15 17.5109 14.2098 15.6032 12.8033 14.1967C11.3968 12.7902 9.48912 12 7.5 12C5.51088 12 3.60322 12.7902 2.1967 14.1967C0.790176 15.6032 0 17.5109 0 19.5Z"
+      fill="currentColor"
+    />
+  </Svg>
+);
+
+export default IconFamilySharing;

package/src/components/icons/svg/IconFilterAndroid.tsx

@@ -0,0 +1,16 @@
+import React from "react";
+import { Svg, Path } from "react-native-svg";
+import { SVGIconProps } from "../Icon";
+
+const IconFilterAndroid = ({ size, style, ...props }: SVGIconProps) => (
+  <Svg width={size} height={size} viewBox="0 0 24 24" style={style} {...props}>
+    <Path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M6 5C6 3.89543 6.89543 3 8 3C9.10457 3 10 3.89543 10 5C10 6.10457 9.10457 7 8 7C6.89543 7 6 6.10457 6 5ZM4.12602 6H1C0.447715 6 0 5.55228 0 5C0 4.44772 0.447715 4 1 4H4.12602C4.57006 2.27477 6.13616 1 8 1C9.86384 1 11.4299 2.27477 11.874 4H23C23.5523 4 24 4.44772 24 5C24 5.55228 23.5523 6 23 6H11.874C11.4299 7.72523 9.86384 9 8 9C6.13616 9 4.57006 7.72523 4.12602 6ZM1 18C0.447715 18 0 18.4477 0 19C0 19.5523 0.447715 20 1 20H4.12602C4.57006 21.7252 6.13616 23 8 23C9.86384 23 11.4299 21.7252 11.874 20H23C23.5523 20 24 19.5523 24 19C24 18.4477 23.5523 18 23 18H11.874C11.4299 16.2748 9.86384 15 8 15C6.13616 15 4.57006 16.2748 4.12602 18H1ZM23.9995 12C23.9998 12.5523 23.5523 13.0002 23 13.0005L20.8736 13.0015C20.429 14.726 18.8633 16 17 16C15.141 16 13.5782 14.7318 13.1295 13.0134L0.998317 12.9889C0.446034 12.9878 -0.000777765 12.5392 0.000335934 11.9869C0.00144963 11.4346 0.450067 10.9878 1.00235 10.9889L13.1226 11.0134C13.562 9.28135 15.1314 8 17 8C18.8644 8 20.4309 9.27552 20.8744 11.0015L22.999 11.0005C23.5513 11.0002 23.9992 11.4477 23.9995 12ZM17 10C15.8954 10 15 10.8954 15 12C15 13.1046 15.8954 14 17 14C18.1046 14 19 13.1046 19 12C19 10.8954 18.1046 10 17 10ZM6 19C6 17.8954 6.89543 17 8 17C9.10457 17 10 17.8954 10 19C10 20.1046 9.10457 21 8 21C6.89543 21 6 20.1046 6 19Z"
+      fill="currentColor"
+    />
+  </Svg>
+);
+
+export default IconFilterAndroid;

package/src/components/icons/svg/IconFilterOffiOS.tsx

@@ -0,0 +1,16 @@
+import React from "react";
+import { Svg, Path } from "react-native-svg";
+import { SVGIconProps } from "../Icon";
+
+const IconFilterOffiOS = ({ size, style, ...props }: SVGIconProps) => (
+  <Svg width={size} height={size} viewBox="0 0 24 24" style={style} {...props}>
+    <Path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M24 12C24 18.6274 18.6274 24 12 24C5.37258 24 0 18.6274 0 12C0 5.37258 5.37258 0 12 0C18.6274 0 24 5.37258 24 12ZM22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12ZM6 8C5.44772 8 5 8.44772 5 9C5 9.55228 5.44772 10 6 10H18C18.5523 10 19 9.55228 19 9C19 8.44772 18.5523 8 18 8H6ZM7 13C7 12.4477 7.44772 12 8 12H16C16.5523 12 17 12.4477 17 13C17 13.5523 16.5523 14 16 14H8C7.44772 14 7 13.5523 7 13ZM10 16C9.44772 16 9 16.4477 9 17C9 17.5523 9.44772 18 10 18H14C14.5523 18 15 17.5523 15 17C15 16.4477 14.5523 16 14 16H10Z"
+      fill="currentColor"
+    />
+  </Svg>
+);
+
+export default IconFilterOffiOS;