@pagopa/io-app-design-system 1.15.0 → 1.16.1

package/src/components/buttons/ButtonLink.tsx

@@ -28,8 +28,8 @@ import {
 import { HSpacer } from "../spacer/Spacer";
 import { buttonTextFontSize } from "../typography";
 
-type ColorButtonLink = "primary";
-export type ButtonLink = WithTestID<{
+export type ColorButtonLink = "primary";
+export type ButtonLinkProps = WithTestID<{
   color?: ColorButtonLink;
   label: string;
   disabled?: boolean;
@@ -51,7 +51,10 @@ type ColorStates = {
   };
 };
 
-const mapColorStates: Record<NonNullable<ButtonLink["color"]>, ColorStates> = {
+const mapColorStates: Record<
+  NonNullable<ButtonLinkProps["color"]>,
+  ColorStates
+> = {
   // Primary button
   primary: {
     label: {
@@ -64,7 +67,7 @@ const mapColorStates: Record<NonNullable<ButtonLink["color"]>, ColorStates> = {
 
 // TODO: Remove this when legacy look is deprecated https://pagopa.atlassian.net/browse/IOPLT-153
 const mapLegacyColorStates: Record<
-  NonNullable<ButtonLink["color"]>,
+  NonNullable<ButtonLinkProps["color"]>,
   ColorStates
 > = {
   // Primary button
@@ -104,7 +107,7 @@ export const ButtonLink = React.memo(
     accessibilityLabel,
     accessibilityHint,
     testID
-  }: ButtonLink) => {
+  }: ButtonLinkProps) => {
     const isPressed = useSharedValue(0);
     const { isExperimental } = useIOExperimentalDesign();
 

package/src/components/buttons/ButtonSolid.tsx

@@ -1,5 +1,6 @@
 import React, { useCallback } from "react";
 import { GestureResponderEvent, Pressable, StyleSheet } from "react-native";
+import ReactNativeHapticFeedback from "react-native-haptic-feedback";
 import Animated, {
   Extrapolate,
   interpolate,
@@ -9,11 +10,6 @@ import Animated, {
   useSharedValue,
   withSpring
 } from "react-native-reanimated";
-import ReactNativeHapticFeedback from "react-native-haptic-feedback";
-import { IOIconSizeScale, IOIcons, Icon } from "../icons";
-import { WithTestID } from "../../utils/types";
-import { HSpacer } from "../spacer/Spacer";
-import { ButtonText } from "../typography/ButtonText";
 import {
   IOButtonLegacyStyles,
   IOButtonStyles,
@@ -25,9 +21,13 @@ import {
   exitTransitionInnerContent,
   useIOExperimentalDesign
 } from "../../core";
+import { WithTestID } from "../../utils/types";
+import { IOIconSizeScale, IOIcons, Icon } from "../icons";
 import { LoadingSpinner } from "../loadingSpinner";
+import { HSpacer } from "../spacer/Spacer";
+import { ButtonText } from "../typography/ButtonText";
 
-type ButtonSolidColor = "primary" | "danger" | "contrast";
+export type ButtonSolidColor = "primary" | "danger" | "contrast";
 
 type ColorStates = {
   default: string;

package/src/components/buttons/IconButton.tsx

@@ -15,15 +15,22 @@ import {
   IOIconButtonStyles,
   IOScaleValues,
   IOSpringValues,
+  IOStyles,
   hexToRgba,
   useIOExperimentalDesign
 } from "../../core";
 import { WithTestID } from "../../utils/types";
-import { AnimatedIcon, IOIcons, IconClassComponent } from "../icons";
+import {
+  AnimatedIcon,
+  IOIconSizeScale,
+  IOIcons,
+  IconClassComponent
+} from "../icons";
 
 export type IconButton = WithTestID<{
   color?: "primary" | "neutral" | "contrast";
   icon: IOIcons;
+  iconSize?: IOIconSizeScale;
   disabled?: boolean;
   accessibilityLabel: string;
   accessibilityHint?: string;
@@ -102,6 +109,7 @@ const AnimatedIconClassComponent =
 export const IconButton = ({
   color = "primary",
   icon,
+  iconSize = 24,
   disabled = false,
   onPress,
   accessibilityLabel,
@@ -181,17 +189,24 @@ export const IconButton = ({
       <Animated.View
         style={[
           IOIconButtonStyles.buttonSizeSmall,
+          IOStyles.alignCenter,
+          IOStyles.centerJustified,
           !disabled && pressedAnimationStyle
         ]}
       >
         {!disabled ? (
           <AnimatedIconClassComponent
             name={icon}
+            size={iconSize}
             animatedProps={animatedColor}
             color={colorMap[color]?.icon?.default}
           />
         ) : (
-          <AnimatedIcon name={icon} color={colorMap[color]?.icon?.disabled} />
+          <AnimatedIcon
+            name={icon}
+            size={iconSize}
+            color={colorMap[color]?.icon?.disabled}
+          />
         )}
       </Animated.View>
     </Pressable>

package/src/components/buttons/__test__/__snapshots__/button.test.tsx.snap

@@ -532,6 +532,12 @@ exports[`Test Buttons Components IconButton Snapshot 1`] = `
           "height": 24,
           "width": 24,
         },
+        {
+          "alignItems": "center",
+        },
+        {
+          "justifyContent": "center",
+        },
         {
           "transform": [
             {

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;