@pagopa/io-app-design-system 1.0.0-0

package/src/components/common/AnimatedTick.tsx

@@ -0,0 +1,55 @@
+import React, { useState } from "react";
+import Animated, {
+  useAnimatedProps,
+  useAnimatedRef
+} from "react-native-reanimated";
+import Svg, { Path, PathProps } from "react-native-svg";
+
+const AnimatedPath = Animated.createAnimatedComponent(Path);
+
+interface AnimatedTickProps extends PathProps {
+  progress: Animated.SharedValue<number>;
+  onLayout?: () => void;
+}
+
+// Tick is designed to be within a 24x24 box
+const TickSVGPath = "m7 12 4 4 7-7";
+
+/**
+ * Animated tick used as a small brick for the selection components (e.g: Checkbox, Radio, etc…)
+ * It comes without any state logic.
+ *
+ */
+export const AnimatedTick = ({ progress, ...pathProps }: AnimatedTickProps) => {
+  const [length, setLength] = useState(0);
+  const ref = useAnimatedRef();
+
+  // SVG trick to animate the checkmark
+  // Ref: https://github.com/craftzdog/react-native-checkbox-reanimated/blob/master/src/animated-stroke.tsx
+  const animatedProps = useAnimatedProps(() => ({
+    strokeDashoffset: Math.max(0, length - length * progress.value - 0.1)
+  }));
+
+  const onLayout = () => {
+    // "as any" to fix an annoying TS error.
+    // I honestly don't know which type to use
+    const currentRef = ref.current as any;
+    setLength(currentRef.getTotalLength());
+  };
+
+  return (
+    <Svg viewBox="0 0 24 24">
+      <AnimatedPath
+        ref={ref}
+        onLayout={onLayout}
+        d={TickSVGPath}
+        animatedProps={animatedProps}
+        strokeDasharray={length}
+        strokeWidth={2}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        {...pathProps}
+      />
+    </Svg>
+  );
+};

package/src/components/contentWrapper/ContentWrapper.tsx

@@ -0,0 +1,27 @@
+import React from "react";
+import { View } from "react-native";
+import type { IOAppMargin } from "../../core";
+import { IOVisualCostants } from "../../core/IOStyles";
+
+type IOContentWrapperProps = {
+    margin?: IOAppMargin;
+    children: React.ReactNode;
+};
+
+/**
+`ContentWrapper` is the main wrapper of the application. It automatically sets side margins,
+depending on the size value
+@param {IOContentWrapper} margin
+ */
+export const ContentWrapper = ({
+    margin = IOVisualCostants.appMarginDefault,
+    children
+}: IOContentWrapperProps) => (
+    <View
+        style={{
+            paddingHorizontal: margin
+        }}
+    >
+        {children}
+    </View>
+);

package/src/components/contentWrapper/index.tsx

@@ -0,0 +1 @@
+export * from "./ContentWrapper";

package/src/components/divider/Divider.tsx

@@ -0,0 +1,35 @@
+import React from "react";
+import { View, StyleSheet } from "react-native";
+import { IOColors, IOThemeContext } from "../../core";
+
+type DividerOrientation = "vertical" | "horizontal";
+
+type DividerProps = {
+  orientation: DividerOrientation;
+};
+
+const DEFAULT_BORDER_SIZE = StyleSheet.hairlineWidth;
+
+/**
+Native `Divider` component
+@param  {DividerOrientation} orientation
+ */
+const BaseDivider = React.memo(({ orientation }: DividerProps) => {
+  const theme = React.useContext(IOThemeContext);
+  const baseStyle = {
+    backgroundColor: IOColors[theme["divider-default"]],
+    ...(orientation === "vertical"
+      ? { width: DEFAULT_BORDER_SIZE }
+      : { height: DEFAULT_BORDER_SIZE })
+  };
+  return <View style={baseStyle} />;
+});
+
+/**
+Horizontal Divider component
+ */
+export const Divider = () => <BaseDivider orientation={"horizontal"} />;
+/**
+Vertical Divider component
+ */
+export const VDivider = () => <BaseDivider orientation={"vertical"} />;

package/src/components/divider/index.tsx

@@ -0,0 +1 @@
+export * from "./Divider";

package/src/components/icons/Icon.tsx

@@ -0,0 +1,473 @@
+import React from "react";
+import { ColorValue, StyleProp } from "react-native";
+import { IOColors } from "../../core/IOColors";
+
+/* Icons */
+import IconSpid from "./svg/IconSpid";
+import IconCie from "./svg/IconCie";
+import IconQrCode from "./svg/IconQrCode";
+import IconBell from "./svg/IconBell";
+import IconHome from "./svg/IconHome";
+import IconHomeFill from "./svg/IconHomeFill";
+import IconCopy from "./svg/IconCopy";
+import IconSelfCertification from "./svg/IconSelfCertification";
+import IconInstitution from "./svg/IconInstitution";
+import IconHourglass from "./svg/IconHourglass";
+import IconPEC from "./svg/IconPEC";
+import IconMessageLegal from "./svg/IconMessageLegal";
+import IconShareiOs from "./svg/IconShareiOs";
+import IconShareAndroid from "./svg/IconShareAndroid";
+import IconLockOn from "./svg/IconLockOn";
+import IconLockOff from "./svg/IconLockOff";
+import IconInitiatives from "./svg/IconInitiatives";
+import IconAnalytics from "./svg/IconAnalytics";
+import IconFornitori from "./svg/IconFornitori";
+import IconEyeShow from "./svg/IconEyeShow";
+import IconEyeHide from "./svg/IconEyeHide";
+import IconPinOff from "./svg/IconPinOff";
+import IconPinOn from "./svg/IconPinOn";
+import IconEmojiSad from "./svg/IconEmojiSad";
+import IconEmojiHappy from "./svg/IconEmojiHappy";
+import IconPhone from "./svg/IconPhone";
+import IconEmail from "./svg/IconEmail";
+import IconEmailFill from "./svg/IconEmailFill";
+import IconMessage from "./svg/IconMessage";
+import IconDocument from "./svg/IconDocument";
+import IconDocumentSign from "./svg/IconDocumentSign";
+import IconGiacenza from "./svg/IconGiacenza";
+import IconChat from "./svg/IconChat";
+import IconAgreement from "./svg/IconAgreement";
+import IconSave from "./svg/IconSave";
+import IconCompleted from "./svg/IconCompleted";
+import IconSuccess from "./svg/IconSuccess";
+import IconOk from "./svg/IconOk";
+import IconFiscalCodeIndividual from "./svg/IconFiscalCodeIndividual";
+import IconCreditCard from "./svg/IconCreditCard";
+import IconBonus from "./svg/IconBonus";
+import IconTransactions from "./svg/IconTransactions";
+import IconAmount from "./svg/IconAmount";
+import IconPSP from "./svg/IconPSP";
+import IconAdd from "./svg/IconAdd";
+import IconCoggle from "./svg/IconCoggle";
+import IconInfo from "./svg/IconInfo";
+import IconInfoFilled from "./svg/IconInfoFilled";
+import IconNotice from "./svg/IconNotice";
+import IconNoticeFilled from "./svg/IconNoticeFilled";
+import IconRefund from "./svg/IconRefund";
+import IconReload from "./svg/IconReload";
+import IconHistory from "./svg/IconHistory";
+import IconEdit from "./svg/IconEdit";
+import IconBattery from "./svg/IconBattery";
+import IconTrashcan from "./svg/IconTrashcan";
+import IconCalendar from "./svg/IconCalendar";
+import IconLightbulb from "./svg/IconLightbulb";
+import IconMagicWand from "./svg/IconMagicWand";
+import IconProfile from "./svg/IconProfile";
+import IconProfileFilled from "./svg/IconProfileFilled";
+import IconProfileAlt from "./svg/IconProfileAlt";
+import IconStarFilled from "./svg/IconStarFilled";
+import IconStarEmpty from "./svg/IconStarEmpty";
+import IconAbacus from "./svg/IconAbacus";
+import IconSwitchOff from "./svg/IconSwitchOff";
+import IconDevice from "./svg/IconDevice";
+import IconDotMenu from "./svg/IconDotMenu";
+import IconBarcode from "./svg/IconBarcode";
+import IconLogin from "./svg/IconLogin";
+import IconLogout from "./svg/IconLogout";
+import IconLadybug from "./svg/IconLadybug";
+import IconTag from "./svg/IconTag";
+import IconGallery from "./svg/IconGallery";
+import IconCancel from "./svg/IconCancel";
+import IconQuestion from "./svg/IconQuestion";
+import IconSearch from "./svg/IconSearch";
+import IconCloseLarge from "./svg/IconCloseLarge";
+import IconCloseSmall from "./svg/IconCloseSmall";
+import IconDocumentAttachment from "./svg/IconDocumentAttachment";
+import IconDocumentAttachmentPDF from "./svg/IconDocumentAttachmentPDF";
+import IconAttachment from "./svg/IconAttachment";
+import IconLocationiOS from "./svg/IconLocationiOS";
+import IconLocationiOSFilled from "./svg/IconLocationiOSFilled";
+import IconLocationAndroid from "./svg/IconLocationAndroid";
+import IconExternalLink from "./svg/IconExternalLink";
+import IconWarningFilled from "./svg/IconWarningFilled";
+import IconCanceled from "./svg/IconCanceled";
+import IconErrorFilled from "./svg/IconErrorFilled";
+import IconLegalValue from "./svg/IconLegalValue";
+import IconChevronRight from "./svg/IconChevronRight";
+import IconChevronTop from "./svg/IconChevronTop";
+import IconChevronBottom from "./svg/IconChevronBottom";
+import IconChevronLeft from "./svg/IconChevronLeft";
+import IconChevronRightListItem from "./svg/IconChevronRightListItem";
+import IconArrowBottom from "./svg/IconArrowBottom";
+import IconArrowLeft from "./svg/IconArrowLeft";
+import IconArrowTop from "./svg/IconArrowTop";
+import IconArrowRight from "./svg/IconArrowRight";
+import IconBackiOS from "./svg/IconBackiOS";
+import IconBackAndroid from "./svg/IconBackAndroid";
+import IconNavMessages from "./svg/IconNavMessages";
+import IconNavWallet from "./svg/IconNavWallet";
+import IconNavScan from "./svg/IconNavScan";
+import IconNavServices from "./svg/IconNavServices";
+import IconNavProfile from "./svg/IconNavProfile";
+import IconNavMessagesFocused from "./svg/IconNavMessagesFocused";
+import IconNavWalletFocused from "./svg/IconNavWalletFocused";
+import IconNavServicesFocused from "./svg/IconNavServicesFocused";
+import IconNavProfileFocused from "./svg/IconNavProfileFocused";
+import IconBiomFingerprint from "./svg/IconBiomFingerprint";
+import IconBiomFaceID from "./svg/IconBiomFaceID";
+import IconCategCulture from "./svg/IconCategCulture";
+import IconCategWellness from "./svg/IconCategWellness";
+import IconCategLearning from "./svg/IconCategLearning";
+import IconCategSport from "./svg/IconCategSport";
+import IconCategHome from "./svg/IconCategHome";
+import IconCategTelco from "./svg/IconCategTelco";
+import IconCategFinance from "./svg/IconCategFinance";
+import IconCategTravel from "./svg/IconCategTravel";
+import IconCategMobility from "./svg/IconCategMobility";
+import IconCategJobOffers from "./svg/IconCategJobOffers";
+import IconCategShopping from "./svg/IconCategShopping";
+import IconCategSustainability from "./svg/IconCategSustainability";
+import IconProductIOApp from "./svg/IconProductIOApp";
+import IconProductIOAppBlueBg from "./svg/IconProductIOAppBlueBg";
+import IconProductPagoPA from "./svg/IconProductPagoPA";
+import IconWebsite from "./svg/IconWebsite";
+import IconSecurity from "./svg/IconSecurity";
+import LegIconSearch from "./svg/LegIconSearch";
+import LegIconChevronLeft from "./svg/LegIconChevronLeft";
+import LegIconRadioOn from "./svg/LegIconRadioOn";
+import LegIconRadioOff from "./svg/LegIconRadioOff";
+import LegIconCheckOn from "./svg/LegIconCheckOn";
+import LegIconCheckOff from "./svg/LegIconCheckOff";
+import IconCloseMedium from "./svg/IconCloseMedium";
+
+export const IOIcons = {
+  spid: IconSpid,
+  cie: IconCie /* io-cie */,
+  qrCode: IconQrCode,
+  bell: IconBell,
+  website: IconWebsite,
+  abacus: IconAbacus,
+  home: IconHome,
+  homeFill: IconHomeFill,
+  copy: IconCopy,
+  selfCert: IconSelfCertification,
+  institution: IconInstitution,
+  hourglass: IconHourglass,
+  shareiOs: IconShareiOs,
+  shareAndroid: IconShareAndroid,
+  locked: IconLockOn /* io-lucchetto */,
+  unlocked: IconLockOff,
+  initiatives: IconInitiatives,
+  analytics: IconAnalytics,
+  fornitori: IconFornitori,
+  eyeShow: IconEyeShow,
+  eyeHide: IconEyeHide,
+  pinOff: IconPinOff,
+  pinOn: IconPinOn,
+  emojiSad: IconEmojiSad,
+  emojiHappy: IconEmojiHappy,
+  phone: IconPhone /* io-phone */,
+  email: IconEmail /* io-envelope */,
+  emailFill: IconEmailFill,
+  pec: IconPEC,
+  messageLegal: IconMessageLegal,
+  message: IconMessage,
+  chat: IconChat,
+  doc: IconDocument,
+  docSign: IconDocumentSign,
+  docAgree: IconAgreement,
+  security: IconSecurity,
+  docGiacenza: IconGiacenza,
+  docAttach: IconDocumentAttachment,
+  docAttachPDF: IconDocumentAttachmentPDF,
+  attachment: IconAttachment,
+  add: IconAdd,
+  completed: IconCompleted,
+  success: IconSuccess,
+  ok: IconOk,
+  fiscalCodeIndividual: IconFiscalCodeIndividual,
+  creditCard: IconCreditCard /* io-carta */,
+  bonus: IconBonus,
+  transactions: IconTransactions,
+  amount: IconAmount,
+  psp: IconPSP,
+  locationiOS: IconLocationiOS,
+  locationiOSFilled: IconLocationiOSFilled,
+  locationAndroid: IconLocationAndroid,
+  coggle: IconCoggle,
+  warningFilled: IconWarningFilled,
+  notice: IconNotice /* io-warning */,
+  noticeFilled: IconNoticeFilled,
+  info: IconInfo,
+  infoFilled: IconInfoFilled,
+  canceled: IconCanceled,
+  errorFilled: IconErrorFilled,
+  legalValue: IconLegalValue,
+  refund: IconRefund,
+  reload: IconReload,
+  history: IconHistory,
+  edit: IconEdit,
+  battery: IconBattery,
+  trashcan: IconTrashcan,
+  calendar: IconCalendar /* io-calendar */ /* io-calendario */,
+  profile: IconProfile,
+  profileFilled: IconProfileFilled,
+  profileAlt: IconProfileAlt /* io-titolare */,
+  lightbulb: IconLightbulb,
+  magicWand: IconMagicWand,
+  starFilled: IconStarFilled,
+  starEmpty: IconStarEmpty,
+  switchOff: IconSwitchOff,
+  device: IconDevice,
+  dotMenu: IconDotMenu,
+  barcode: IconBarcode,
+  save: IconSave,
+  login: IconLogin,
+  logout: IconLogout,
+  ladybug: IconLadybug,
+  tag: IconTag,
+  gallery: IconGallery,
+  externalLink: IconExternalLink,
+  cancel: IconCancel,
+  help: IconQuestion /* io-question */,
+  search: IconSearch /* io-search */,
+  legSearch: LegIconSearch,
+  chevronRight: IconChevronRight,
+  chevronLeft: IconChevronLeft,
+  chevronBottom: IconChevronBottom,
+  chevronTop: IconChevronTop,
+  chevronRightListItem: IconChevronRightListItem,
+  legChevronLeft: LegIconChevronLeft,
+  closeLarge: IconCloseLarge /* io-close */,
+  closeMedium: IconCloseMedium,
+  closeSmall: IconCloseSmall,
+  arrowBottom: IconArrowBottom,
+  arrowLeft: IconArrowLeft,
+  arrowTop: IconArrowTop,
+  arrowRight: IconArrowRight,
+  backiOS: IconBackiOS,
+  backAndroid: IconBackAndroid,
+  navMessages: IconNavMessages /* io-messaggi */,
+  navMessagesFocused: IconNavMessagesFocused,
+  navWallet: IconNavWallet /* io-portafoglio */,
+  navWalletFocused: IconNavWalletFocused,
+  navScan: IconNavScan,
+  navServices: IconNavServices,
+  navServicesFocused: IconNavServicesFocused,
+  navProfile: IconNavProfile,
+  navProfileFocused: IconNavProfileFocused,
+  legRadioOn: LegIconRadioOn,
+  legRadioOff: LegIconRadioOff,
+  legCheckOn: LegIconCheckOn,
+  legCheckOff: LegIconCheckOff,
+  biomFingerprint: IconBiomFingerprint /* io-fingerprint */,
+  biomFaceID: IconBiomFaceID /* io-face-id */,
+  categCulture: IconCategCulture,
+  categWellness: IconCategWellness,
+  categLearning: IconCategLearning,
+  categSport: IconCategSport,
+  categHome: IconCategHome,
+  categTelco: IconCategTelco,
+  categFinance: IconCategFinance,
+  categTravel: IconCategTravel,
+  categMobility: IconCategMobility,
+  categJobOffers: IconCategJobOffers,
+  categShopping: IconCategShopping,
+  categSustainability: IconCategSustainability,
+  productIOApp: IconProductIOApp,
+  productPagoPA: IconProductPagoPA /* io-pagopa */,
+  productIOAppBlueBg: IconProductIOAppBlueBg
+} as const;
+
+export type IOIcons = keyof typeof IOIcons;
+
+/* The following values should be deleted: 12, 30 */
+/* 96 is too big for an icon, it should be replaced
+with a Pictogram instead */
+export type IOIconSizeScale = 12 | 16 | 20 | 24 | 30 | 32 | 48 | 96;
+/* Sizes used exclusively for the Checkbox component */
+export type IOIconSizeScaleCheckbox = 14 | 18;
+
+export type IOIconsProps = {
+  name: IOIcons;
+  color?: IOColors;
+  size?: IOIconSizeScale | IOIconSizeScaleCheckbox | "100%";
+  testID?: string;
+  accessible?: boolean;
+  accessibilityLabel?: string;
+};
+
+export type SVGIconProps = {
+  size: number | "100%";
+  style: StyleProp<any>;
+  accessible: boolean;
+  accessibilityElementsHidden: boolean;
+  accessibilityLabel: string;
+  importantForAccessibility:
+    | "auto"
+    | "yes"
+    | "no"
+    | "no-hide-descendants"
+    | undefined;
+};
+
+/*
+Static icon component. Use it when you need an ion that doesn't
+change its color values. It accepts `IOColors` values only.
+*/
+export const Icon = ({
+  name,
+  color = "bluegrey",
+  size = 24,
+  accessible = false,
+  accessibilityLabel = "",
+  ...props
+}: IOIconsProps) => {
+  const IconElement = IOIcons[name];
+  return (
+    <IconElement
+      {...props}
+      style={{ color: IOColors[color] }}
+      size={size}
+      accessible={accessible}
+      accessibilityElementsHidden={true}
+      accessibilityLabel={accessibilityLabel}
+      importantForAccessibility={"no-hide-descendants"}
+    />
+  );
+};
+
+/*
+Animated icon component. Use it when you need a color
+transition between different states.
+*/
+
+type IOAnimatedIconsProps = {
+  name: IOIcons;
+  color?: ColorValue;
+  size?: IOIconSizeScale | "100%";
+  accessible?: boolean;
+};
+
+export const AnimatedIcon = ({
+  name,
+  color = IOColors.bluegrey,
+  size = 24,
+  accessible = false,
+  ...props
+}: IOAnimatedIconsProps) => {
+  const IconElement = IOIcons[name];
+  return (
+    <IconElement
+      {...props}
+      style={{ color }}
+      size={size}
+      accessible={accessible}
+      accessibilityElementsHidden={true}
+      accessibilityLabel={""}
+      importantForAccessibility={"no-hide-descendants"}
+    />
+  );
+};
+
+/* Make <Icon> component animatable. Reanimated supports class components only,
+so we need to convert <Icon> into a class component first.
+https://github.com/software-mansion/react-native-reanimated/discussions/1527  */
+export class IconClassComponent extends React.Component<IOAnimatedIconsProps> {
+  constructor(props: IOAnimatedIconsProps) {
+    super(props);
+  }
+  render() {
+    return <AnimatedIcon {...this.props} />;
+  }
+}
+
+/*
+░░░ VARIOUS SETS ░░░
+*/
+
+/* New icons */
+// const {} = IOIcons;
+
+// export const IOIconsNew = {};
+
+/* Navigation */
+const {
+  navMessages,
+  navWallet,
+  navScan,
+  navServices,
+  navProfile,
+  navMessagesFocused,
+  navWalletFocused,
+  navServicesFocused,
+  navProfileFocused
+} = IOIcons;
+
+export const IONavIcons = {
+  navMessages,
+  navWallet,
+  navScan,
+  navServices,
+  navProfile,
+  navMessagesFocused,
+  navWalletFocused,
+  navServicesFocused,
+  navProfileFocused
+} as const;
+
+export type IONavIcons = keyof typeof IONavIcons;
+
+/* Biometric */
+const { biomFingerprint, biomFaceID } = IOIcons;
+
+export const IOBiometricIcons = {
+  biomFingerprint,
+  biomFaceID
+} as const;
+
+export type IOBiometricIcons = keyof typeof IOBiometricIcons;
+
+/* Categories (used by CGN) */
+const {
+  categCulture,
+  categWellness,
+  categLearning,
+  categSport,
+  categHome,
+  categTelco,
+  categFinance,
+  categTravel,
+  categMobility,
+  categJobOffers,
+  categShopping,
+  categSustainability
+} = IOIcons;
+
+export const IOCategoryIcons = {
+  categCulture,
+  categWellness,
+  categLearning,
+  categSport,
+  categHome,
+  categTelco,
+  categFinance,
+  categTravel,
+  categMobility,
+  categJobOffers,
+  categShopping,
+  categSustainability
+} as const;
+
+export type IOCategoryIcons = keyof typeof IOCategoryIcons;
+
+/* Product Logos */
+const { productIOApp, productPagoPA, productIOAppBlueBg } = IOIcons;
+
+export const IOProductIcons = {
+  productIOApp,
+  productPagoPA,
+  productIOAppBlueBg
+} as const;
+
+export type IOProductIcons = keyof typeof IOProductIcons;

package/src/components/icons/README.md

@@ -0,0 +1,55 @@
+# Icons
+There are different sets:
+* **General** 
+* **Navigation**: Icons used in the main Tab bar
+* **Biometric**: Icons used for the biometric identification
+* **Categories**: Icons used for the different sectors available in the Carta Giovani Nazionale
+* **Product**: PagoPA products' icons 
+
+## Prefixes
+- **General**: `Icon…`
+- **Navigation**: `IconNav…`
+- **Biometric**: `IconBiometric…`
+- **Categories**: `IconCateg…`
+- **Product**: `IconProduct…`
+
+## Add a new icon
+First of all, follow the instructions stated in the main README (`Vector graphics` section).
+
+If you want to add a new icon in the `General` set, open the `Icon.tsx` file and import the React component:
+```jsx
+[…]
+import IconSpid from "./svg/IconSpid";
+[…]
+```
+Add the desired key to the `IOIcons` object with the corresponding component reference:
+```jsx
+export const IOIcons = {
+  spid: IconSpid,
+  …
+}
+```
+Add the key to the relative icon set:
+```ts
+export const IONavIcons = {
+  navMessages,
+  navWallet,
+  navDocuments,
+  navServices,
+  navProfile,
+  // New icon
+  navNewIcon
+} as const;
+```
+
+You can add the recently added icon with the following declaration:
+```jsx
+// Default size: 24×24px
+// Default color: Bluegrey
+<Icon name="spid">
+```
+
+## View all the available icons
+There are two ways:
+- In the app, go to the `Profile → Design System → Icons` (you must enable `Debug Mode`)
+- In the repository, go to the `svg/originals` subfolder

package/src/components/icons/index.tsx

@@ -0,0 +1,2 @@
+export * from "./Icon";
+export { Icon, AnimatedIcon } from "../icons/Icon";

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

@@ -0,0 +1,16 @@
+import React from "react";
+import { Svg, Path } from "react-native-svg";
+import { SVGIconProps } from "../Icon";
+
+const IconAbacus = ({ size, style, ...props }: SVGIconProps) => (
+  <Svg width={size} height={size} viewBox="0 0 24 24" style={style} {...props}>
+    <Path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M2 1a1 1 0 0 1 2 0v1h8V1a1 1 0 1 1 2 0v1h2V1a1 1 0 1 1 2 0v1h2V1a1 1 0 1 1 2 0v21h1a1 1 0 1 1 0 2H1a1 1 0 1 1 0-2h1V1Zm10 3v1a1 1 0 1 0 2 0V4h2v1a1 1 0 1 0 2 0V4h2v5h-8V8a1 1 0 1 0-2 0v1H8V8a1 1 0 0 0-2 0v1H4V4h8Zm-6 8v-1H4v5h4v-1a1 1 0 1 1 2 0v1h6v-1a1 1 0 1 1 2 0v1h2v-5h-8v1a1 1 0 1 1-2 0v-1H8v1a1 1 0 1 1-2 0Zm2 6v1a1 1 0 1 0 2 0v-1h6v1a1 1 0 1 0 2 0v-1h2v4H4v-4h4Z"
+      fill="currentColor"
+    />
+  </Svg>
+);
+
+export default IconAbacus;

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

@@ -0,0 +1,16 @@
+import React from "react";
+import { Svg, Path } from "react-native-svg";
+import { SVGIconProps } from "../Icon";
+
+const IconAdd = ({ 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 1c0-.55229-.4477-1-1-1-.5522 0-1 .44771-1 1v10H1.00098c-.55229 0-1 .4477-1 1s.44771 1 1 1h9.99892v10.0008c0 .5522.4478 1 1 1 .5523 0 1-.4478 1-1V13h9.9999c.5523 0 1-.4477 1-1s-.4477-1-1-1h-9.9999V1Z"
+      fill="currentColor"
+    />
+  </Svg>
+);
+
+export default IconAdd;