diff --git a/example/src/pages/Icons.tsx b/example/src/pages/Icons.tsx
index 9eaf0cb1..f720e856 100644
--- a/example/src/pages/Icons.tsx
+++ b/example/src/pages/Icons.tsx
@@ -8,6 +8,7 @@ import {
IOIcons,
IONavIcons,
IOProductIcons,
+ IOSystemIcons,
IOThemeContext,
IOVisualCostants,
Icon,
@@ -26,6 +27,7 @@ type IconSubsetObject = Record<
interface IconSetObject {
[key: string]: ({ size, style }: SVGIconProps) => JSX.Element;
}
+
const filterIconSet = (
iconSubsetObject: IconSubsetObject,
iconSetObject: IconSetObject
@@ -37,7 +39,13 @@ const filterIconSet = (
);
const filteredIOIcons = filterIconSet(
- { ...IONavIcons, ...IOCategoryIcons, ...IOProductIcons, ...IOBiometricIcons },
+ {
+ ...IONavIcons,
+ ...IOCategoryIcons,
+ ...IOProductIcons,
+ ...IOBiometricIcons,
+ ...IOSystemIcons
+ },
IOIcons
);
@@ -108,6 +116,29 @@ export const Icons = () => {
/>
))}
+
+ System
+
+
+ {Object.entries(IOSystemIcons).map(([iconItemName]) => (
+
+ }
+ />
+ ))}
+
(
-
-
- Pictograms
-
-
- {Object.entries(IOPictograms).map(([pictogramItemName]) => (
-
- }
- />
- ))}
-
-
+// Filter the main object, removing already displayed pictograms in the other sets
+type PictogramSubsetObject = Record<
+ string,
+ ({ size }: SVGPictogramProps) => JSX.Element
+>;
+interface PictogramSetObject {
+ [key: string]: ({ size }: SVGPictogramProps) => JSX.Element;
+}
+
+const filterPictogramSet = (
+ pictogramSubsetObject: PictogramSubsetObject,
+ pictogramSetObject: PictogramSetObject
+): PictogramSetObject =>
+ Object.fromEntries(
+ Object.entries(pictogramSetObject).filter(
+ ([key]) => !Object.keys(pictogramSubsetObject).includes(key)
+ )
+ );
+
+const filteredIOPictograms = filterPictogramSet(
+ {
+ ...IOPictogramsLegacy
+ },
+ IOPictograms
);
+
+export const Pictograms = () => {
+ const theme = useContext(IOThemeContext);
+ return (
+
+
+ Pictograms
+
+
+ {Object.entries(filteredIOPictograms).map(([pictogramItemName]) => (
+
+ }
+ />
+ ))}
+
+
+
+ Legacy Pictograms
+
+
+ {Object.entries(IOPictogramsLegacy).map(([pictogramItemName]) => (
+
+ }
+ />
+ ))}
+
+
+ );
+};
diff --git a/src/components/pictograms/Pictogram.tsx b/src/components/pictograms/Pictogram.tsx
index d81a668f..b7a6d1e7 100644
--- a/src/components/pictograms/Pictogram.tsx
+++ b/src/components/pictograms/Pictogram.tsx
@@ -43,8 +43,23 @@ import PictogramUnrecognized from "./svg/PictogramUnrecognized";
import PictogramUploadFile from "./svg/PictogramUploadFile";
import PictogramSuccess from "./svg/PictogramSuccess";
import PictogramFocusOn from "./svg/PictogramFocusOn";
+import PictogramITWallet from "./svg/PictogramITWallet";
+import PictogramFatalError from "./svg/PictogramFatalError";
+import PictogramUpdateOS from "./svg/PictogramUpdateOS";
+import PictogramIdentityAdd from "./svg/PictogramIdentityAdd";
+import PictogramIdentityRefresh from "./svg/PictogramIdentityRefresh";
+import PictogramIdentity from "./svg/PictogramIdentity";
+import PictogramAccessDenied from "./svg/PictogramAccessDenied";
+import PictogramTime from "./svg/PictogramTime";
+import PictogramStopSecurity from "./svg/PictogramStopSecurity";
+import PictogramPasscode from "./svg/PictogramPasscode";
+import PictogramIdentityCheck from "./svg/PictogramIdentityCheck";
+import PictogramTrash from "./svg/PictogramTrash";
+import PictogramCharity from "./svg/PictogramCharity";
+import PictogramEmpty from "./svg/PictogramEmpty";
export const IOPictograms = {
+ // Start legacy pictograms //
messages: PictogramMessages,
airBaloon: PictogramAirBaloon,
abacus: PictogramAbacus,
@@ -74,18 +89,33 @@ export const IOPictograms = {
sms: PictogramSms,
heart: PictogramHeart,
completed: PictogramCompleted,
+ // End legacy pictograms
ibanCard: PictogramIBANCard,
followMessage: PictogramFollowMessage,
manual: PictogramManual,
+ trash: PictogramTrash,
setup: PictogramSetup,
+ empty: PictogramEmpty,
donation: PictogramDonation,
+ charity: PictogramCharity,
attention: PictogramAttention,
emptyArchive: PictogramEmptyArchive,
umbrellaNew: PictogramUmbrellaNew,
feedback: PictogramFeedback,
cameraRequest: PictogramCameraRequest,
success: PictogramSuccess,
- focusOn: PictogramFocusOn
+ fatalError: PictogramFatalError,
+ focusOn: PictogramFocusOn,
+ itWallet: PictogramITWallet,
+ updateOS: PictogramUpdateOS,
+ identity: PictogramIdentity,
+ identityAdd: PictogramIdentityAdd,
+ identityRefresh: PictogramIdentityRefresh,
+ identityCheck: PictogramIdentityCheck,
+ accessDenied: PictogramAccessDenied,
+ stopSecurity: PictogramStopSecurity,
+ time: PictogramTime,
+ passcode: PictogramPasscode
};
export type IOPictograms = keyof typeof IOPictograms;
@@ -128,3 +158,71 @@ const IOPictogramsBleed = {
} as const;
export type IOPictogramsBleed = keyof typeof IOPictogramsBleed;
+
+/* Legacy pictograms */
+
+const {
+ messages,
+ airBaloon,
+ abacus,
+ emailValidation,
+ emailToValidate,
+ inbox,
+ piggyBank,
+ processing,
+ baloons,
+ places,
+ notAvailable,
+ airship,
+ search,
+ unrecognized,
+ error,
+ umbrella,
+ inProgress,
+ fireworks,
+ puzzle,
+ question,
+ pin,
+ timeout,
+ uploadFile,
+ hourglass,
+ teaBreak,
+ beerMug,
+ sms,
+ heart,
+ completed
+} = IOPictograms;
+
+export const IOPictogramsLegacy = {
+ messages,
+ airBaloon,
+ abacus,
+ emailValidation,
+ emailToValidate,
+ inbox,
+ piggyBank,
+ processing,
+ baloons,
+ places,
+ notAvailable,
+ airship,
+ search,
+ unrecognized,
+ error,
+ umbrella,
+ inProgress,
+ fireworks,
+ puzzle,
+ question,
+ pin,
+ timeout,
+ uploadFile,
+ hourglass,
+ teaBreak,
+ beerMug,
+ sms,
+ heart,
+ completed
+} as const;
+
+export type IOPictogramsLegacy = keyof typeof IOPictogramsLegacy;
diff --git a/src/components/pictograms/svg/PictogramAccessDenied.tsx b/src/components/pictograms/svg/PictogramAccessDenied.tsx
new file mode 100644
index 00000000..07aa8275
--- /dev/null
+++ b/src/components/pictograms/svg/PictogramAccessDenied.tsx
@@ -0,0 +1,46 @@
+import React from "react";
+import { Svg, Path } from "react-native-svg";
+import { SVGPictogramProps } from "../Pictogram";
+
+const PictogramAccessDenied = ({
+ size,
+ color,
+ ...props
+}: SVGPictogramProps) => (
+
+);
+
+export default PictogramAccessDenied;
diff --git a/src/components/pictograms/svg/PictogramAttention.tsx b/src/components/pictograms/svg/PictogramAttention.tsx
index 126ee49d..e836e247 100644
--- a/src/components/pictograms/svg/PictogramAttention.tsx
+++ b/src/components/pictograms/svg/PictogramAttention.tsx
@@ -3,29 +3,26 @@ import Svg, { Path } from "react-native-svg";
import { SVGPictogramProps } from "../Pictogram";
const PictogramAttention = ({ size, color, ...props }: SVGPictogramProps) => (
-