chore: [IAI-269] Add the new IconButton and IconButtonSolid compo…

…nents (pagopa#4375) ### ⚠️ This PR depends on pagopa#4363 ## Short description This PR adds the new `IconButton` component. For the underlying architecture, consider the pagopa#4356 as a reference. The configuration for the single variant is shown below: ```ts // Primary button primary: { background: { default: hexToRgba(IOColors.blue, 0), pressed: hexToRgba(IOColors.blue, 0.15), disabled: "transparent" }, icon: { default: IOColors.blue, pressed: IOColors.blue, disabled: hexToRgba(IOColors.blue, 0.25) } }, ``` ## List of changes proposed in this pull request - Add the new `IconButton` component - Add the new `AnimatedIcon` component, which accepts generic `ColorValue` values instead of the original `Icon` component's `IOColorType` - Refactor the various Icon components to set a color through the parent `Svg` container (using `fill="currentColor"` instead of `fill={color}` with the `color` prop). This change is necessary to allow color transitions between different states - Wrap the functional `AnimatedIcon` component to turn it into a class component. The class component can be turned into an animatable component, manageable through Reanimated library ### Preview https://user-images.githubusercontent.com/1255491/220594790-3295719a-9851-4fe9-a1ed-df2b6784b08e.mov ## How to test Go to the `Profile → Design System → Buttons` --------- Co-authored-by: Fabio Bombardi <[email protected]>
dvisionlab · Feb 24, 2023 · 7771cf9 · 7771cf9
1 parent efb9a0b
commit 7771cf9
Show file tree

Hide file tree

Showing 152 changed files with 1,621 additions and 598 deletions.
diff --git a/README.md b/README.md
@@ -526,20 +526,22 @@ Once you understand which group you must put the asset in, you must take into co
 3. Delete `width` and `height` attributes and leave the original `viewBox` attribute. You could easily process the image using online editors like [SVGOmg](https://jakearchibald.github.io/svgomg/) (enable `Prefer viewBox to width/height`)
 4. To easily preview the available SVG assets, include the original SVG in the `originals` subfolder **with the same filename of your corresponding React component**.
 5. If your asset is part of one of the subset, make sure to use the same prefix of the corresponding set. *E.g*: If you want to add a new pictogram related to a section, you should use the `PictogramSection…` prefix.
-6. Copy all the `<path>` elements into a new React component and replace the original `<path>` with the element `<Path>` (capital P) from the `react-native-svg` package
+6. Copy all the `<path>` elements into a new React component and replace the original `<path>` with the element `<Path>` (capital P) from the `react-native-svg` package. Replace all the harcoded fill values with the generic `currentColor` value.
 7. Add the dynamic size and colour (if required), replacing the hardcoded values with the corresponding props:
 ```jsx
 import { Svg, Path } from "react-native-svg";
 
-const IconSpid = ({ size, color }: SVGIconProps) => (
-  <Svg width={size} height={size} viewBox="0 0 24 24">
+const IconSpid = ({ size, style }: SVGIconProps) => (
+  <Svg width={size} height={size} viewBox="0 0 24 24" style={style}>
     <Path
       d="M13.615 …"
-      fill={color}
+      fill="currentColor"
     />
   </Svg>
 );
 ```
+**Note:** The icon inherit the color from the parent `Svg` container
+
 8. Add the key associated to the single pictogram/icon in the corresponding set. If you want to learn more, read the contextual documentation:
     * [Pictograms](ts/components/core/pictograms)
     * [Icons](ts/components/core/icons)

diff --git a/ts/components/core/icons/Icon.tsx b/ts/components/core/icons/Icon.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { ColorValue } from "react-native";
+import { ColorValue, StyleProp } from "react-native";
 import { IOColors, IOColorType } from "../variables/IOColors";
 
 /* Icons */
@@ -86,10 +86,6 @@ import IconGallery from "./svg/IconGallery";
 import IconCancel from "./svg/IconCancel";
 import IconQuestion from "./svg/IconQuestion";
 import IconSearch from "./svg/IconSearch";
-import IconArrowRight from "./svg/IconArrowRight";
-import IconArrowLeft from "./svg/IconArrowLeft";
-import IconArrowDown from "./svg/IconArrowDown";
-import IconArrowUp from "./svg/IconArrowUp";
 import IconClose from "./svg/IconClose";
 import IconCloseSmall from "./svg/IconCloseSmall";
 import IconEmailLegal from "./svg/IconEmailLegal";
@@ -101,9 +97,16 @@ import IconUnknownGdo from "./svg/IconUnknownGdo";
 import IconArrowCircleUp from "./svg/IconArrowCircleUp";
 import IconWarningFilled from "./svg/IconWarningFilled";
 import IconErrorFilled from "./svg/IconErrorFilled";
+import IconChevronRight from "./svg/IconChevronRight";
+import IconChevronTop from "./svg/IconChevronTop";
+import IconChevronBottom from "./svg/IconChevronBottom";
+import IconChevronLeft from "./svg/IconChevronLeft";
+import IconArrowBottom from "./svg/IconArrowBottom";
+import IconArrowLeft from "./svg/IconArrowLeft";
+import IconArrowTop from "./svg/IconArrowTop";
+import IconArrowRight from "./svg/IconArrowRight";
 
 export const IOIcons = {
-  arrowCircleUp: IconArrowCircleUp,
   spid: IconSpid,
   cie: IconCie /* io-cie */,
   qrCode: IconQrCode /* io-qr */,
@@ -195,35 +198,108 @@ export const IOIcons = {
   cancel: IconCancel /* io-cancel */,
   help: IconQuestion /* io-question */,
   search: IconSearch /* io-search */,
-  arrowRight: IconArrowRight /* io-right */,
-  arrowLeft: IconArrowLeft /* io-back */,
-  arrowDown: IconArrowDown,
-  arrowUp: IconArrowUp,
+  chevronRight: IconChevronRight /* io-right */,
+  chevronLeft: IconChevronLeft /* io-back */,
+  chevronBottom: IconChevronBottom,
+  chevronTop: IconChevronTop,
   close: IconClose /* io-close */,
-  closeSmall: IconCloseSmall
+  closeSmall: IconCloseSmall,
+  arrowBottom: IconArrowBottom,
+  arrowLeft: IconArrowLeft,
+  arrowTop: IconArrowTop,
+  arrowRight: IconArrowRight,
+  arrowCircleUp: IconArrowCircleUp
 } as const;
 
 export type IOIconType = keyof typeof IOIcons;
 
-type IOIconsProps = {
+export type IOIconsProps = {
   name: IOIconType;
   color?: IOColorType;
   size?: number | "100%";
 };
 
 export type SVGIconProps = {
   size: number | "100%";
-  color: ColorValue;
+  style: StyleProp<any>;
 };
 
-const Icon = ({
+/*
+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,
   ...props
 }: IOIconsProps) => {
   const IconElement = IOIcons[name];
-  return <IconElement {...props} size={size} color={IOColors[color]} />;
+  return (
+    <IconElement {...props} style={{ color: IOColors[color] }} size={size} />
+  );
+};
+
+/*
+Animated icon component. Use it when you need a color
+transition between different states.
+*/
+
+type IOAnimatedIconsProps = {
+  name: IOIconType;
+  color?: ColorValue;
+  size?: number | "100%";
 };
 
-export default Icon;
+export const AnimatedIcon = ({
+  name,
+  color = IOColors.bluegrey,
+  size = 24,
+  ...props
+}: IOAnimatedIconsProps) => {
+  const IconElement = IOIcons[name];
+  return <IconElement {...props} style={{ color }} size={size} />;
+};
+
+/* 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 {
+  success,
+  errorFilled,
+  warningFilled,
+  info,
+  infoFilled,
+  arrowBottom,
+  arrowLeft,
+  arrowTop,
+  arrowRight,
+  arrowCircleUp
+} = IOIcons;
+
+export const IOIconsNew = {
+  success,
+  errorFilled,
+  warningFilled,
+  infoFilled,
+  info,
+  arrowBottom,
+  arrowLeft,
+  arrowTop,
+  arrowRight,
+  arrowCircleUp
+};
diff --git a/ts/components/core/icons/IconBiometric.tsx b/ts/components/core/icons/IconBiometric.tsx
@@ -25,7 +25,9 @@ const IconBiometric = ({
   ...props
 }: IOBiometricIconsProps) => {
   const IconElement = IOBiometricIcons[name];
-  return <IconElement {...props} size={size} color={IOColors[color]} />;
+  return (
+    <IconElement {...props} size={size} style={{ color: IOColors[color] }} />
+  );
 };
 
 export default IconBiometric;
diff --git a/ts/components/core/icons/IconCategory.tsx b/ts/components/core/icons/IconCategory.tsx
@@ -45,7 +45,9 @@ const IconCategory = ({
   ...props
 }: IOCategoryIconsProps) => {
   const IconElement = IOCategoryIcons[name];
-  return <IconElement {...props} size={size} color={IOColors[color]} />;
+  return (
+    <IconElement {...props} size={size} style={{ color: IOColors[color] }} />
+  );
 };
 
 export default IconCategory;
diff --git a/ts/components/core/icons/IconNav.tsx b/ts/components/core/icons/IconNav.tsx
@@ -31,7 +31,9 @@ const IconNav = ({
   ...props
 }: IONavIconsProps) => {
   const IconElement = IONavIcons[name];
-  return <IconElement {...props} size={size} color={IOColors[color]} />;
+  return (
+    <IconElement {...props} size={size} style={{ color: IOColors[color] }} />
+  );
 };
 
 export default IconNav;
diff --git a/ts/components/core/icons/IconProduct.tsx b/ts/components/core/icons/IconProduct.tsx
@@ -25,7 +25,9 @@ const IconProduct = ({
   ...props
 }: IOProductIconsProps) => {
   const IconElement = IOProductIcons[name];
-  return <IconElement {...props} size={size} color={IOColors[color]} />;
+  return (
+    <IconElement {...props} size={size} style={{ color: IOColors[color] }} />
+  );
 };
 
 export default IconProduct;
diff --git a/ts/components/core/icons/index.tsx b/ts/components/core/icons/index.tsx
@@ -1,5 +1,5 @@
-export { default as Icon } from "./Icon";
 export * from "./Icon";
+export { Icon, AnimatedIcon } from "./Icon";
 export { default as IconNav } from "./IconNav";
 export * from "./IconNav";
 export { default as IconBiometric } from "./IconBiometric";

diff --git a/ts/components/core/icons/svg/IconAbacus.tsx b/ts/components/core/icons/svg/IconAbacus.tsx
@@ -2,19 +2,19 @@ import React from "react";
 import { Svg, Path } from "react-native-svg";
 import { SVGIconProps } from "../Icon";
 
-const IconAbacus = ({ size, color }: SVGIconProps) => (
-  <Svg width={size} height={size} viewBox="0 0 24 24">
+const IconAbacus = ({ size, style }: SVGIconProps) => (
+  <Svg width={size} height={size} viewBox="0 0 24 24" style={style}>
     <Path
       fillRule="evenodd"
       clipRule="evenodd"
       d="M22.914 20.2h.543c.3 0 .543.242.543.542v2.715c0 .3-.243.543-.543.543H.543A.543.543 0 0 1 0 23.457v-2.715c0-.3.243-.543.543-.543h.543V1.412C1.086.633 1.719 0 2.498 0c.586 0 1.09.36 1.303.869h16.398c.213-.51.717-.869 1.303-.869.779 0 1.412.633 1.412 1.412v18.787ZM21.828 1.411a.326.326 0 0 0-.651 0v18.787h.651V1.412ZM3.91 20.199v-4.778h1.085v.259c0 .875.712 1.587 1.587 1.587.4 0 .765-.149 1.044-.393.28.244.644.393 1.044.393.875 0 1.587-.712 1.587-1.587v-.26h3.486v.26c0 .875.712 1.587 1.587 1.587.4 0 .765-.149 1.044-.393.28.244.644.393 1.044.393.875 0 1.587-.712 1.587-1.587v-.26h1.086v4.78H3.91Zm11.42-6.624c-.276 0-.5.225-.5.5v1.605a.501.501 0 0 0 1 0v-1.604c0-.277-.224-.501-.5-.501Zm1.587.5a.501.501 0 0 1 1.002 0v1.605a.501.501 0 0 1-1.002 0v-1.604Zm-.543-1.193a1.58 1.58 0 0 1 1.044-.393c.875 0 1.587.712 1.587 1.587v.259h1.086V9.557h-1.086v.259c0 .875-.712 1.587-1.587 1.587-.4 0-.765-.15-1.044-.394a1.58 1.58 0 0 1-2.088 0 1.58 1.58 0 0 1-1.044.394 1.589 1.589 0 0 1-1.587-1.587v-.26H8.17v.26c0 .875-.712 1.587-1.587 1.587a1.589 1.589 0 0 1-1.587-1.587v-.26H3.91v4.779h1.086v-.26c0-.874.712-1.586 1.587-1.586.4 0 .765.148 1.044.393a1.58 1.58 0 0 1 1.044-.393c.875 0 1.587.712 1.587 1.587v.259h3.486v-.26c0-.874.712-1.586 1.587-1.586.4 0 .765.148 1.044.393ZM6.08 14.076a.501.501 0 0 1 1.002 0v1.604a.501.501 0 0 1-1.002 0v-1.604Zm2.589-.501c-.276 0-.5.225-.5.5v1.605a.501.501 0 0 0 1 0v-1.604c0-.277-.224-.501-.5-.501ZM20.09 8.47h-1.085v-.26c0-.875-.712-1.586-1.587-1.586-.4 0-.765.148-1.044.393a1.58 1.58 0 0 0-2.088 0 1.58 1.58 0 0 0-1.044-.393c-.875 0-1.587.711-1.587 1.586v.26H8.17v-.26c0-.875-.712-1.586-1.587-1.586s-1.587.711-1.587 1.586v.26H3.91V3.692H20.09v4.779Zm-7.348.543v.802a.501.501 0 0 0 1.001 0V8.21a.501.501 0 0 0-1.002 0v.803Zm2.087-.803a.501.501 0 0 1 1.002 0v1.605a.501.501 0 0 1-1.002 0V8.21Zm2.589-.5c-.276 0-.501.224-.501.5v1.605a.501.501 0 0 0 1.002 0V8.21c0-.276-.225-.5-.501-.5Zm-11.337.5a.501.501 0 0 1 1.002 0v1.605a.501.501 0 0 1-1.002 0V8.21ZM3.91 2.606H20.09v-.651H3.91v.651ZM2.172 1.412a.326.326 0 0 1 .652 0v18.787h-.652V1.412ZM1.086 22.914h21.828v-1.629H1.086v1.629Z"
-      fill={color}
+      fill="currentColor"
     />
     <Path
       fillRule="evenodd"
       clipRule="evenodd"
       d="M22.914 20.2h.543c.3 0 .543.242.543.542v2.715c0 .3-.243.543-.543.543H.543A.543.543 0 0 1 0 23.457v-2.715c0-.3.243-.543.543-.543h.543V1.412C1.086.633 1.719 0 2.498 0c.586 0 1.09.36 1.303.869h16.398c.213-.51.717-.869 1.303-.869.779 0 1.412.633 1.412 1.412v18.787ZM21.828 1.411a.326.326 0 0 0-.651 0v18.787h.651V1.412ZM3.91 20.199v-4.778h1.085v.259c0 .875.712 1.587 1.587 1.587.4 0 .765-.149 1.044-.393.28.244.644.393 1.044.393.875 0 1.587-.712 1.587-1.587v-.26h3.486v.26c0 .875.712 1.587 1.587 1.587.4 0 .765-.149 1.044-.393.28.244.644.393 1.044.393.875 0 1.587-.712 1.587-1.587v-.26h1.086v4.78H3.91Zm11.42-6.624c-.276 0-.5.225-.5.5v1.605a.501.501 0 0 0 1 0v-1.604c0-.277-.224-.501-.5-.501Zm1.587.5a.501.501 0 0 1 1.002 0v1.605a.501.501 0 0 1-1.002 0v-1.604Zm-.543-1.193a1.58 1.58 0 0 1 1.044-.393c.875 0 1.587.712 1.587 1.587v.259h1.086V9.557h-1.086v.259c0 .875-.712 1.587-1.587 1.587-.4 0-.765-.15-1.044-.394a1.58 1.58 0 0 1-2.088 0 1.58 1.58 0 0 1-1.044.394 1.589 1.589 0 0 1-1.587-1.587v-.26H8.17v.26c0 .875-.712 1.587-1.587 1.587a1.589 1.589 0 0 1-1.587-1.587v-.26H3.91v4.779h1.086v-.26c0-.874.712-1.586 1.587-1.586.4 0 .765.148 1.044.393a1.58 1.58 0 0 1 1.044-.393c.875 0 1.587.712 1.587 1.587v.259h3.486v-.26c0-.874.712-1.586 1.587-1.586.4 0 .765.148 1.044.393ZM6.08 14.076a.501.501 0 0 1 1.002 0v1.604a.501.501 0 0 1-1.002 0v-1.604Zm2.589-.501c-.276 0-.5.225-.5.5v1.605a.501.501 0 0 0 1 0v-1.604c0-.277-.224-.501-.5-.501ZM20.09 8.47h-1.085v-.26c0-.875-.712-1.586-1.587-1.586-.4 0-.765.148-1.044.393a1.58 1.58 0 0 0-2.088 0 1.58 1.58 0 0 0-1.044-.393c-.875 0-1.587.711-1.587 1.586v.26H8.17v-.26c0-.875-.712-1.586-1.587-1.586s-1.587.711-1.587 1.586v.26H3.91V3.692H20.09v4.779Zm-7.348.543v.802a.501.501 0 0 0 1.001 0V8.21a.501.501 0 0 0-1.002 0v.803Zm2.087-.803a.501.501 0 0 1 1.002 0v1.605a.501.501 0 0 1-1.002 0V8.21Zm2.589-.5c-.276 0-.501.224-.501.5v1.605a.501.501 0 0 0 1.002 0V8.21c0-.276-.225-.5-.501-.5Zm-11.337.5a.501.501 0 0 1 1.002 0v1.605a.501.501 0 0 1-1.002 0V8.21ZM3.91 2.606H20.09v-.651H3.91v.651ZM2.172 1.412a.326.326 0 0 1 .652 0v18.787h-.652V1.412ZM1.086 22.914h21.828v-1.629H1.086v1.629Z"
-      fill={color}
+      fill="currentColor"
     />
   </Svg>
 );

diff --git a/ts/components/core/icons/svg/IconAdd.tsx b/ts/components/core/icons/svg/IconAdd.tsx
@@ -2,15 +2,15 @@ import React from "react";
 import { Svg, Path } from "react-native-svg";
 import { SVGIconProps } from "../Icon";
 
-const IconAdd = ({ size, color }: SVGIconProps) => (
-  <Svg width={size} height={size} viewBox="0 0 24 24">
+const IconAdd = ({ size, style }: SVGIconProps) => (
+  <Svg width={size} height={size} viewBox="0 0 24 24" style={style}>
     <Path
       d="M13.615 5h-3.23v5.385H5v3.23h5.385V19h3.23v-5.385H19v-3.23h-5.385V5Z"
-      fill={color}
+      fill="currentColor"
     />
     <Path
       d="M13.615 5h-3.23v5.385H5v3.23h5.385V19h3.23v-5.385H19v-3.23h-5.385V5Z"
-      fill={color}
+      fill="currentColor"
     />
   </Svg>
 );

diff --git a/ts/components/core/icons/svg/IconAddAlt.tsx b/ts/components/core/icons/svg/IconAddAlt.tsx
@@ -2,27 +2,27 @@ import React from "react";
 import { Svg, Path } from "react-native-svg";
 import { SVGIconProps } from "../Icon";
 
-const IconAddAlt = ({ size, color }: SVGIconProps) => (
-  <Svg width={size} height={size} viewBox="0 0 24 24">
+const IconAddAlt = ({ size, style }: SVGIconProps) => (
+  <Svg width={size} height={size} viewBox="0 0 24 24" style={style}>
     <Path
       d="M12 17.546c.602 0 1.09-.448 1.09-1V13.09h3.455c.553 0 1-.489 1-1.091s-.447-1.09-1-1.09h-3.454V7.544c0-.552-.489-1-1.091-1s-1.09.448-1.09 1v3.364H7.544c-.552 0-1 .489-1 1.091s.448 1.09 1 1.09h3.364v3.455c0 .553.489 1 1.091 1Z"
-      fill={color}
+      fill="currentColor"
     />
     <Path
       fillRule="evenodd"
       clipRule="evenodd"
       d="M0 12C0 5.373 5.373 0 12 0s12 5.373 12 12-5.373 12-12 12S0 18.627 0 12Zm21.818 0c0-5.422-4.396-9.818-9.818-9.818S2.182 6.578 2.182 12 6.578 21.818 12 21.818s9.818-4.396 9.818-9.818Z"
-      fill={color}
+      fill="currentColor"
     />
     <Path
       d="M12 17.546c.602 0 1.09-.448 1.09-1V13.09h3.455c.553 0 1-.489 1-1.091s-.447-1.09-1-1.09h-3.454V7.544c0-.552-.489-1-1.091-1s-1.09.448-1.09 1v3.364H7.544c-.552 0-1 .489-1 1.091s.448 1.09 1 1.09h3.364v3.455c0 .553.489 1 1.091 1Z"
-      fill={color}
+      fill="currentColor"
     />
     <Path
       fillRule="evenodd"
       clipRule="evenodd"
       d="M0 12C0 5.373 5.373 0 12 0s12 5.373 12 12-5.373 12-12 12S0 18.627 0 12Zm21.818 0c0-5.422-4.396-9.818-9.818-9.818S2.182 6.578 2.182 12 6.578 21.818 12 21.818s9.818-4.396 9.818-9.818Z"
-      fill={color}
+      fill="currentColor"
     />
   </Svg>
 );

diff --git a/ts/components/core/icons/svg/IconAgreement.tsx b/ts/components/core/icons/svg/IconAgreement.tsx
@@ -2,15 +2,15 @@ import React from "react";
 import { Svg, Path } from "react-native-svg";
 import { SVGIconProps } from "../Icon";
 
-const IconAgreement = ({ size, color }: SVGIconProps) => (
-  <Svg width={size} height={size} viewBox="0 0 24 24">
+const IconAgreement = ({ size, style }: SVGIconProps) => (
+  <Svg width={size} height={size} viewBox="0 0 24 24" style={style}>
     <Path
       d="M20.778 18.628V3.021A3.024 3.024 0 0 0 17.757 0H3.288a3.024 3.024 0 0 0-3.02 3.02v2.352h4.635v15.607A3.024 3.024 0 0 0 7.923 24h12.789a3.024 3.024 0 0 0 3.02-3.02v-2.352h-2.954ZM4.903 3.965H1.674v-.944c0-.89.724-1.615 1.614-1.615.89 0 1.615.724 1.615 1.615v.944ZM9.538 20.98c0 .89-.725 1.614-1.615 1.614S6.31 21.87 6.31 20.98V3.02c0-.593-.173-1.146-.47-1.614h11.918c.89 0 1.614.724 1.614 1.615v15.607H9.538v2.352Zm12.788 0c0 .89-.724 1.614-1.614 1.614H10.475a3.003 3.003 0 0 0 .469-1.614v-.945h11.382v.945Z"
-      fill={color}
+      fill="currentColor"
     />
     <Path
       d="M17.965 4.635H7.715v1.406h10.25V4.635ZM17.965 7.828H7.715v1.406h10.25V7.828ZM12.84 11.02c-1.39 0-2.52 1.131-2.52 2.521 0 1.146.768 2.115 1.817 2.42v1.315h1.406v-1.315a2.525 2.525 0 0 0 1.818-2.42c0-1.39-1.131-2.52-2.52-2.52Zm0 3.635c-.614 0-1.114-.5-1.114-1.114 0-.614.5-1.114 1.114-1.114.614 0 1.114.5 1.114 1.114 0 .614-.5 1.114-1.114 1.114Z"
-      fill={color}
+      fill="currentColor"
     />
   </Svg>
 );

diff --git a/ts/components/core/icons/svg/IconAmount.tsx b/ts/components/core/icons/svg/IconAmount.tsx
@@ -2,15 +2,15 @@ import React from "react";
 import { Svg, Path } from "react-native-svg";
 import { SVGIconProps } from "../Icon";
 
-const IconAmount = ({ size, color }: SVGIconProps) => (
-  <Svg width={size} height={size} viewBox="0 0 24 24">
+const IconAmount = ({ size, style }: SVGIconProps) => (
+  <Svg width={size} height={size} viewBox="0 0 24 24" style={style}>
     <Path
       d="M12 0C5.383 0 0 5.383 0 12s5.383 12 12 12 12-5.383 12-12S18.617 0 12 0Zm0 22C6.23 22 2 17.77 2 12S6.23 2 12 2s10 4.23 10 10-4.23 10-10 10Z"
-      fill={color}
+      fill="currentColor"
     />
     <Path
       d="M12.172 7.782c1.262 0 2.448.794 3.098 2.073a.768.768 0 0 0 1.37-.696c-.914-1.796-2.626-2.913-4.468-2.913-2.085 0-3.884 1.398-4.69 3.4H6.249a.768.768 0 0 0 0 1.537h.837a6.454 6.454 0 0 0-.026 1.4H5.921a.768.768 0 1 0 0 1.537h1.473c.755 2.127 2.612 3.635 4.778 3.635 1.843 0 3.555-1.117 4.468-2.914a.768.768 0 0 0-1.37-.695c-.65 1.278-1.837 2.073-3.098 2.073-1.327 0-2.49-.845-3.114-2.1h3.28a.768.768 0 1 0-.001-1.535H8.603a4.945 4.945 0 0 1 .034-1.401h4.026a.769.769 0 0 0 0-1.536h-3.48c.648-1.124 1.746-1.865 2.99-1.865Z"
-      fill={color}
+      fill="currentColor"
     />
   </Svg>
 );

diff --git a/ts/components/core/icons/svg/IconAnalytics.tsx b/ts/components/core/icons/svg/IconAnalytics.tsx
@@ -2,13 +2,13 @@ import React from "react";
 import { Svg, Path } from "react-native-svg";
 import { SVGIconProps } from "../Icon";
 
-const IconAnalytics = ({ size, color }: SVGIconProps) => (
-  <Svg width={size} height={size} viewBox="0 0 24 24">
+const IconAnalytics = ({ size, style }: SVGIconProps) => (
+  <Svg width={size} height={size} viewBox="0 0 24 24" style={style}>
     <Path
       fillRule="evenodd"
       clipRule="evenodd"
       d="M2.07 5.442C1.32 5.442.75 6.1.75 6.861v14.97c0 .76.57 1.419 1.32 1.419h4.098c.748 0 1.318-.658 1.318-1.42V6.86c0-.76-.57-1.418-1.318-1.418H2.069Zm.072 16.332V6.918h3.952v14.856H2.142ZM9.95 10.646c-.746 0-1.316.658-1.316 1.418v9.767c0 .76.57 1.42 1.317 1.42h4.098c.749 0 1.32-.659 1.32-1.42v-9.766c0-.762-.571-1.419-1.32-1.419H9.951Zm.076 11.128v-9.652h3.95v9.652h-3.95ZM17.834.75c-.748 0-1.32.658-1.32 1.419v19.662c0 .761.572 1.419 1.32 1.419h4.098c.748 0 1.318-.658 1.318-1.42V2.17c0-.76-.57-1.419-1.318-1.419h-4.098Zm.073 21.024V2.226h3.95v19.548h-3.95Z"
-      fill={color}
+      fill="currentColor"
     />
   </Svg>
 );

diff --git a/ts/components/core/icons/svg/IconArrowBottom.tsx b/ts/components/core/icons/svg/IconArrowBottom.tsx
@@ -0,0 +1,14 @@
+import React from "react";
+import { Svg, Path } from "react-native-svg";
+import { SVGIconProps } from "../Icon";
+
+const IconArrowBottom = ({ size, style }: SVGIconProps) => (
+  <Svg width={size} height={size} viewBox="0 0 24 24" style={style}>
+    <Path
+      d="M6.49 17.383a1 1 0 1 0-1.281 1.536l5.36 4.467a2 2 0 0 0 2.56 0l5.36-4.467a1 1 0 1 0-1.28-1.536l-4.36 3.633V1.15a1 1 0 1 0-2 0v19.865l-4.36-3.633Z"
+      fill="currentColor"
+    />
+  </Svg>
+);
+
+export default IconArrowBottom;
diff --git a/ts/components/core/icons/svg/IconArrowCircleUp.tsx b/ts/components/core/icons/svg/IconArrowCircleUp.tsx
@@ -2,13 +2,13 @@ import React from "react";
 import { Svg, Path } from "react-native-svg";
 import { SVGIconProps } from "../Icon";
 
-const IconArrowCircleUp = ({ size, color }: SVGIconProps) => (
-  <Svg width={size} height={size} viewBox="0 0 24 24">
+const IconArrowCircleUp = ({ size, style }: SVGIconProps) => (
+  <Svg width={size} height={size} viewBox="0 0 24 24" style={style}>
     <Path
       fillRule="evenodd"
       clipRule="evenodd"
       d="M12 21.6c-5.292 0-9.6-4.308-9.6-9.6S6.708 2.4 12 2.4s9.6 4.308 9.6 9.6-4.308 9.6-9.6 9.6Zm0 2.4c6.624 0 12-5.376 12-12S18.624 0 12 0 0 5.376 0 12s5.376 12 12 12Zm-1.2-12v4.8h2.4V12h3.6L12 7.2 7.2 12h3.6Z"
-      fill={color}
+      fill="currentColor"
     />
   </Svg>
 );