Merge pull request #4091 from LedgerHQ/feat/LIVE-8272/UILibNewIcons

feat(IconsUI, ReactUI, NativeUI): New icon pack in IconsUI

.changeset/light-news-cross.md

@@ -0,0 +1,8 @@
+---
+"live-mobile": patch
+"@ledgerhq/native-ui": patch
+"@ledgerhq/icons-ui": patch
+"@ledgerhq/react-ui": patch
+---
+
+UILib - New icons + renamed old icon set to Legacy (should not be used anymore by consumers eg LLD and LLM)

apps/ledger-live-desktop/src/renderer/components/AnalyticsConsole/index.tsx

@@ -2,7 +2,7 @@ import React, { useCallback, useState } from "react";
 import styled from "styled-components";
 import EventList from "./EventList";
 import StyleProviderV3 from "~/renderer/styles/StyleProviderV3";
-import { Divider, Flex, Icons, Switch, Text } from "@ledgerhq/react-ui";
+import { Divider, Flex, IconsLegacy, Switch, Text } from "@ledgerhq/react-ui";
 
 const Root = styled.div`
   position: fixed;
@@ -102,13 +102,13 @@ function AnalyticsConsole() {
           <Flex alignSelf={"flex-end"} flexDirection={"column"} style={{ pointerEvents: "auto" }}>
             <ButtonContainer onClick={onClickArrowButton}>
               {position === "left" ? (
-                <Icons.ArrowRightMedium size={18} color="black" />
+                <IconsLegacy.ArrowRightMedium size={18} color="black" />
               ) : (
-                <Icons.ArrowLeftMedium size={18} color="black" />
+                <IconsLegacy.ArrowLeftMedium size={18} color="black" />
               )}
             </ButtonContainer>
             <ButtonContainer onClick={onClickDebugButton}>
-              <Icons.ActivityMedium size={18} color="black" />
+              <IconsLegacy.ActivityMedium size={18} color="black" />
             </ButtonContainer>
           </Flex>
         </Container>

apps/ledger-live-desktop/src/renderer/components/ChangeDeviceLanguageAction.tsx

@@ -6,7 +6,7 @@ import { mockedEventEmitter } from "~/renderer/components/debug/DebugMock";
 import DeviceAction from "./DeviceAction";
 import { Language } from "@ledgerhq/types-live";
 import { useTranslation } from "react-i18next";
-import { BoxedIcon, Flex, Icons, Text } from "@ledgerhq/react-ui";
+import { BoxedIcon, Flex, IconsLegacy, Text } from "@ledgerhq/react-ui";
 import { withV3StyleProvider } from "~/renderer/styles/StyleProviderV3";
 
 const action = createAction(getEnv("MOCK") ? mockedEventEmitter : installLanguage);
@@ -22,7 +22,12 @@ const DeviceLanguageInstalled = ({ language }: { language: Language }) => {
       justifyContent="center"
       data-test-id="language-installed"
     >
-      <BoxedIcon Icon={Icons.CheckAloneMedium} iconColor="success.c60" size={64} iconSize={24} />
+      <BoxedIcon
+        Icon={IconsLegacy.CheckAloneMedium}
+        iconColor="success.c60"
+        size={64}
+        iconSize={24}
+      />
       <Text variant="large" alignSelf="stretch" mt={9} textAlign="center">
         {t("deviceLocalization.languageInstalled", {
           language: t(`deviceLocalization.languages.${language}`),

apps/ledger-live-desktop/src/renderer/components/ContextMenu/AccountContextMenu.tsx

@@ -18,7 +18,7 @@ import { isCurrencySupported } from "~/renderer/screens/exchange/config";
 import { setTrackingSource } from "~/renderer/analytics/TrackPage";
 import { useFeature } from "@ledgerhq/live-common/featureFlags/index";
 import { ContextMenuItemType } from "./ContextMenuWrapper";
-import { Icons } from "@ledgerhq/react-ui";
+import { IconsLegacy } from "@ledgerhq/react-ui";
 
 type Props = {
   account: AccountLike;
@@ -159,7 +159,7 @@ export default function AccountContextMenu({
     if (account.type === "TokenAccount") {
       items.push({
         label: "accounts.contextMenu.hideToken",
-        Icon: Icons.NoneMedium,
+        Icon: IconsLegacy.NoneMedium,
         id: "token-menu-hide",
         callback: () =>
           dispatch(

apps/ledger-live-desktop/src/renderer/components/ContextMenu/NFTCollectionContextMenu.tsx

@@ -6,7 +6,7 @@ import { openModal } from "~/renderer/actions/modals";
 import ContextMenuItem from "./ContextMenuItem";
 import { setDrawer } from "~/renderer/drawers/Provider";
 import { Account } from "@ledgerhq/types-live";
-import { Icons } from "@ledgerhq/react-ui";
+import { IconsLegacy } from "@ledgerhq/react-ui";
 type Props = {
   account: Account;
   collectionAddress: string;
@@ -30,7 +30,7 @@ export default function NFTCollectionContextMenu({
     {
       key: "hide",
       label: t("hideNftCollection.hideCTA"),
-      Icon: Icons.NoneMedium,
+      Icon: IconsLegacy.NoneMedium,
       callback: () =>
         dispatch(
           openModal("MODAL_HIDE_NFT_COLLECTION", {

apps/ledger-live-desktop/src/renderer/components/CustomImage/CustomImageDeviceAction.tsx

@@ -7,7 +7,7 @@ import { ImageLoadRefusedOnDevice, ImageCommitRefusedOnDevice } from "@ledgerhq/
 import withRemountableWrapper from "@ledgerhq/live-common/hoc/withRemountableWrapper";
 import { getEnv } from "@ledgerhq/live-common/env";
 import { useTranslation } from "react-i18next";
-import { Theme, Flex, Icons } from "@ledgerhq/react-ui";
+import { Theme, Flex, IconsLegacy } from "@ledgerhq/react-ui";
 import useTheme from "~/renderer/hooks/useTheme";
 import { DeviceActionDefaultRendering } from "../DeviceAction";
 import Button from "../ButtonV3";
@@ -123,7 +123,7 @@ const CustomImageDeviceAction: React.FC<Props> = withRemountableWrapper(props =>
             error,
             device: device ?? undefined,
             ...(isRefusedOnStaxError
-              ? { Icon: Icons.CircledAlertMedium, iconColor: "warning.c50" }
+              ? { Icon: IconsLegacy.CircledAlertMedium, iconColor: "warning.c50" }
               : {}),
           })}
           {inlineRetry ? (

apps/ledger-live-desktop/src/renderer/components/CustomImage/ImageCropper.tsx

@@ -1,7 +1,7 @@
 import React, { useCallback, useEffect, useRef, useState } from "react";
 import { ImageBase64Data, ImageDimensions } from "./types";
 import { useDebounce } from "@ledgerhq/live-common/hooks/useDebounce";
-import { Button, Flex, Icons } from "@ledgerhq/react-ui";
+import { Button, Flex, IconsLegacy } from "@ledgerhq/react-ui";
 import Cropper, { Area, CropperProps } from "react-easy-crop";
 import { createCanvas, getRadianAngle, rotateSize } from "./imageUtils";
 import { ImageCropError } from "@ledgerhq/live-common/customImage/errors";
@@ -256,7 +256,7 @@ const ImageCropper: React.FC<Props> = props => {
         outline
         backgroundColor="transparent"
         onClick={rotateCounterClockwise}
-        Icon={Icons.ReverseMedium}
+        Icon={IconsLegacy.ReverseMedium}
         data-test-id="custom-image-crop-rotate-button"
       >
         Rotate

apps/ledger-live-desktop/src/renderer/components/CustomImage/ImportImage.tsx

@@ -1,5 +1,5 @@
 import React, { useCallback } from "react";
-import { Icons } from "@ledgerhq/react-ui";
+import { IconsLegacy } from "@ledgerhq/react-ui";
 import {
   ImageIncorrectFileTypeError,
   ImageLoadFromFileError,
@@ -74,7 +74,7 @@ const ImportImage: React.FC<Props> = ({ setLoading, onResult, onError, onClick }
   return (
     <ImportButton
       text={t("customImage.steps.choose.upload")}
-      Icon={Icons.UploadMedium}
+      Icon={IconsLegacy.UploadMedium}
       data-test-id="custom-image-import-image-button"
       onClick={onClick}
     >

apps/ledger-live-desktop/src/renderer/components/CustomImage/ImportNFTButton.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { Icons } from "@ledgerhq/react-ui";
+import { IconsLegacy } from "@ledgerhq/react-ui";
 import ImportButton from "./ImportButton";
 import { useTranslation } from "react-i18next";
 
@@ -13,7 +13,7 @@ const ImportNFTButton: React.FC<Props> = ({ onClick }) => {
   return (
     <ImportButton
       text={t("customImage.steps.choose.chooseNft")}
-      Icon={Icons.TicketMedium}
+      Icon={IconsLegacy.TicketMedium}
       testId="custom-image-import-nft-button"
       onClick={onClick}
     />

apps/ledger-live-desktop/src/renderer/components/ErrorIcon.tsx

@@ -18,7 +18,7 @@ import {
   LanguageInstallRefusedOnDevice,
   ImageDoesNotExistOnDevice,
 } from "@ledgerhq/live-common/errors";
-import { Icons } from "@ledgerhq/react-ui";
+import { IconsLegacy } from "@ledgerhq/react-ui";
 
 export type ErrorIconProps = {
   error: unknown;
@@ -41,7 +41,7 @@ const ErrorIcon = ({ error, size = 44 }: ErrorIconProps) => {
     error instanceof ImageDoesNotExistOnDevice ||
     error instanceof UserRefusedDeviceNameChange
   ) {
-    return <Icons.InfoMedium size={size} />;
+    return <IconsLegacy.InfoMedium size={size} />;
   }
 
   if (error instanceof SwapGenericAPIError || error instanceof NoSuchAppOnProvider) {

apps/ledger-live-desktop/src/renderer/components/FirmwareUpdateBanner.tsx

@@ -10,7 +10,7 @@ import { UpdaterContext } from "~/renderer/components/Updater/UpdaterContext";
 import { shouldUpdateYet } from "~/helpers/user";
 import { useRemoteConfig } from "~/renderer/components/RemoteConfig";
 import { VISIBLE_STATUS } from "./Updater/Banner";
-import { Icons } from "@ledgerhq/react-ui";
+import { IconsLegacy } from "@ledgerhq/react-ui";
 const FirmwareUpdateBanner = ({ old, right }: { old?: boolean; right?: React.ReactNode }) => {
   const history = useHistory();
   const location = useLocation();
@@ -43,7 +43,7 @@ const FirmwareUpdateBanner = ({ old, right }: { old?: boolean; right?: React.Rea
     <TopBanner
       id={"fw-update-banner"}
       content={{
-        Icon: Icons.NanoFoldedMedium,
+        Icon: IconsLegacy.NanoFoldedMedium,
         message: (
           <Trans
             i18nKey={

apps/ledger-live-desktop/src/renderer/components/MainSideBar/index.tsx

@@ -7,7 +7,7 @@ import styled from "styled-components";
 import { useManagerBlueDot } from "@ledgerhq/live-common/manager/hooks";
 import { useRemoteLiveAppManifest } from "@ledgerhq/live-common/platform/providers/RemoteLiveAppProvider/index";
 import { FeatureToggle, useFeature } from "@ledgerhq/live-common/featureFlags/index";
-import { Icons, Tag as TagComponent } from "@ledgerhq/react-ui";
+import { IconsLegacy, Tag as TagComponent } from "@ledgerhq/react-ui";
 import { accountsSelector, starredAccountsSelector } from "~/renderer/reducers/accounts";
 import {
   sidebarCollapsedSelector,
@@ -205,7 +205,7 @@ const TagContainerFeatureFlags = ({ collapsed }: { collapsed: boolean }) => {
       }}
       onClick={() => setTrackingSource("sidebar")}
     >
-      <Icons.ChartNetworkMedium size={16} />
+      <IconsLegacy.ChartNetworkMedium size={16} />
       <TagText collapsed={collapsed}>{t("common.featureFlags")}</TagText>
     </Tag>
   ) : null;
@@ -361,7 +361,7 @@ const MainSideBar = () => {
                 <SideBarListItem
                   id={"dashboard"}
                   label={t("dashboard.title")}
-                  icon={Icons.HouseMedium}
+                  icon={IconsLegacy.HouseMedium}
                   iconSize={20}
                   iconActiveColor="wallet"
                   onClick={handleClickDashboard}
@@ -372,7 +372,7 @@ const MainSideBar = () => {
                 <SideBarListItem
                   id={"market"}
                   label={t("sidebar.market")}
-                  icon={Icons.GraphGrowMedium}
+                  icon={IconsLegacy.GraphGrowMedium}
                   iconSize={20}
                   iconActiveColor="wallet"
                   onClick={handleClickMarket}
@@ -383,7 +383,7 @@ const MainSideBar = () => {
                   <SideBarListItem
                     id="learn"
                     label={t("sidebar.learn")}
-                    icon={Icons.NewsMedium}
+                    icon={IconsLegacy.NewsMedium}
                     iconSize={20}
                     iconActiveColor="wallet"
                     isActive={location.pathname.startsWith("/learn")}
@@ -394,7 +394,7 @@ const MainSideBar = () => {
                 <SideBarListItem
                   id={"accounts"}
                   label={t("sidebar.accounts")}
-                  icon={Icons.WalletMedium}
+                  icon={IconsLegacy.WalletMedium}
                   iconSize={20}
                   iconActiveColor="wallet"
                   isActive={location.pathname.startsWith("/account")}
@@ -405,7 +405,7 @@ const MainSideBar = () => {
                 <SideBarListItem
                   id={"catalog"}
                   label={t("sidebar.catalog")}
-                  icon={Icons.PlanetMedium}
+                  icon={IconsLegacy.PlanetMedium}
                   iconSize={20}
                   iconActiveColor="wallet"
                   isActive={location.pathname.startsWith("/platform")}
@@ -415,7 +415,7 @@ const MainSideBar = () => {
                 <SideBarListItem
                   id={"send"}
                   label={t("send.title")}
-                  icon={Icons.ArrowFromBottomMedium}
+                  icon={IconsLegacy.ArrowFromBottomMedium}
                   iconSize={20}
                   iconActiveColor="wallet"
                   onClick={handleOpenSendModal}
@@ -425,7 +425,7 @@ const MainSideBar = () => {
                 <SideBarListItem
                   id={"receive"}
                   label={t("receive.title")}
-                  icon={Icons.ArrowToBottomMedium}
+                  icon={IconsLegacy.ArrowToBottomMedium}
                   iconSize={20}
                   iconActiveColor="wallet"
                   onClick={handleOpenReceiveModal}
@@ -436,7 +436,7 @@ const MainSideBar = () => {
                   <SideBarListItem
                     id={"earn"}
                     label={t("sidebar.earn")}
-                    icon={Icons.LendMedium}
+                    icon={IconsLegacy.LendMedium}
                     iconSize={20}
                     iconActiveColor="wallet"
                     onClick={handleClickEarn}
@@ -447,7 +447,7 @@ const MainSideBar = () => {
                 <SideBarListItem
                   id={"exchange"}
                   label={t("sidebar.exchange")}
-                  icon={Icons.BuyCryptoAltMedium}
+                  icon={IconsLegacy.BuyCryptoAltMedium}
                   iconSize={20}
                   iconActiveColor="wallet"
                   onClick={handleClickExchange}
@@ -458,7 +458,7 @@ const MainSideBar = () => {
                 <SideBarListItem
                   id={"swap"}
                   label={t("sidebar.swap")}
-                  icon={Icons.BuyCryptoMedium}
+                  icon={IconsLegacy.BuyCryptoMedium}
                   iconSize={20}
                   iconActiveColor="wallet"
                   onClick={handleClickSwap}
@@ -470,7 +470,7 @@ const MainSideBar = () => {
                   <SideBarListItem
                     id={"refer"}
                     label={t("sidebar.refer")}
-                    icon={Icons.GiftCardMedium}
+                    icon={IconsLegacy.GiftCardMedium}
                     iconSize={20}
                     iconActiveColor="wallet"
                     onClick={handleClickRefer}
@@ -488,7 +488,7 @@ const MainSideBar = () => {
                 <SideBarListItem
                   id={"card"}
                   label={t("sidebar.card")}
-                  icon={Icons.CardMedium}
+                  icon={IconsLegacy.CardMedium}
                   iconSize={20}
                   iconActiveColor="wallet"
                   isActive={location.pathname === "/card"}
@@ -500,7 +500,7 @@ const MainSideBar = () => {
                   <SideBarListItem
                     id={"recover"}
                     label={t("sidebar.recover")}
-                    icon={Icons.ShieldCheckMedium}
+                    icon={IconsLegacy.ShieldCheckMedium}
                     iconSize={20}
                     iconActiveColor="wallet"
                     onClick={handleClickRecover}
@@ -510,7 +510,7 @@ const MainSideBar = () => {
                 <SideBarListItem
                   id={"manager"}
                   label={t("sidebar.manager")}
-                  icon={Icons.NanoXFoldedMedium}
+                  icon={IconsLegacy.NanoXFoldedMedium}
                   iconSize={20}
                   iconActiveColor="wallet"
                   onClick={handleClickManager}

apps/ledger-live-desktop/src/renderer/components/ModalStepper/CloseButton.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { Box, Button, Icons } from "@ledgerhq/react-ui";
+import { Box, Button, IconsLegacy } from "@ledgerhq/react-ui";
 import styled from "styled-components";
 
 const CloseContainer = styled(Box).attrs(() => ({
@@ -12,7 +12,7 @@ export default function CloseButton({ onClick }: { onClick: () => void }) {
   return (
     <CloseContainer>
       <Button.Unstyled onClick={onClick}>
-        <Icons.CloseMedium size={20} />
+        <IconsLegacy.CloseMedium size={20} />
       </Button.Unstyled>
     </CloseContainer>
   );

apps/ledger-live-desktop/src/renderer/components/ModalStepper/StepLeftSide.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import styled from "styled-components";
-import { Button, Icons, Flex, Text } from "@ledgerhq/react-ui";
+import { Button, IconsLegacy, Flex, Text } from "@ledgerhq/react-ui";
 
 const Container = styled(Flex).attrs(() => ({
   flexDirection: "column",
@@ -62,7 +62,7 @@ const StepLeftSide = ({
             data-test-id={dataTestId}
             disabled={continueDisabled}
             variant="main"
-            Icon={Icons.ArrowRightMedium}
+            Icon={IconsLegacy.ArrowRightMedium}
             onClick={onClickContinue}
           >
             {continueLabel}

apps/ledger-live-desktop/src/renderer/components/Nft/CollectionName.tsx

@@ -4,7 +4,7 @@ import { Account, ProtoNFT } from "@ledgerhq/types-live";
 import NFTCollectionContextMenu from "~/renderer/components/ContextMenu/NFTCollectionContextMenu";
 import Skeleton from "~/renderer/components/Nft/Skeleton";
 import styled from "styled-components";
-import { Icons } from "@ledgerhq/react-ui";
+import { IconsLegacy } from "@ledgerhq/react-ui";
 const Dots = styled.div`
   justify-content: flex-end;
   display: flex;
@@ -42,7 +42,7 @@ const CollectionName = ({ nft, fallback, account, showHideMenu }: Props) => {
             leftClick={true}
           >
             <Dots>
-              <Icons.OthersMedium size={20} />
+              <IconsLegacy.OthersMedium size={20} />
             </Dots>
           </NFTCollectionContextMenu>
         )}