= ({ size, color, style }) => {
+ const iconNames = Object.keys(Icons) as (keyof typeof Icons)[];
-const Story = {
- title: "Asorted/Icons",
- argTypes: {
- weight: {
- type: "enum",
- description: "Weight (Deprecated)",
- defaultValue: "Medium",
- control: {
- options: ["Medium"],
- control: {
- type: "select",
- },
- },
- },
- size: {
- type: "number",
- description: "Icon size for preview",
- defaultValue: 32,
- },
- color: {
- type: "string",
- description: "Color",
- control: { control: "color" },
- },
- name: {
- type: "enum",
- defaultValue: "Activity",
- description: "[Only for single icon], Icon name",
- control: {
- options: iconNames,
- control: {
- type: "select",
- },
- },
- },
- },
-};
-export default Story;
-
-const ListTemplate = (args: IconProps) => {
const theme = useTheme();
- const color = args.color || theme.colors.neutral.c100;
- const [search, setSearch] = useState("");
- const s = search.toLowerCase();
- const regexp = new RegExp(s, "i");
+ const selectedColor = color || theme.colors.neutral.c100;
return (
-
-
-
- {iconNames
- .sort((a: string, b: string) => {
- return s ? b.toLowerCase().indexOf(s) - a.toLowerCase().indexOf(s) : a.localeCompare(b);
- })
- .map(name => {
- const match = name.match(regexp);
- const active = s && match;
- const index = match?.index ?? 0;
- return (
-
-
-
-
-
- {active ? (
- <>
- {name.substr(0, index)}
- {name.substr(index, s.length)}
- {name.substr(index + s.length)}
-
- ) : (
- name
- )}
-
-
- );
- })}
-
-
+
+ {iconNames.map(iconName => {
+ const IconComponent = Icons[iconName];
+ return (
+
+
+ {iconName}
+
+ );
+ })}
+
);
};
-const IconTemplate = (args: IconProps) => {
- const theme = useTheme();
- const color = args.color || theme.colors.neutral.c100;
- return ;
+export const IconGrid: Story = (args: IconProps) => ;
+
+IconGrid.args = {
+ size: "M",
+ color: "",
+ style: {},
};
-export const List = ListTemplate.bind({});
-export const SingleIcon = IconTemplate.bind({});
+IconGrid.argTypes = {
+ size: {
+ control: {
+ type: "select",
+ options: ["XS", "S", "M", "L", "XL"],
+ },
+ },
+ color: { control: "color" },
+ style: { control: "object" },
+};
diff --git a/libs/ui/packages/react/src/components/asorted/Icon/IconsLegacy.stories.tsx b/libs/ui/packages/react/src/components/asorted/Icon/IconsLegacy.stories.tsx
new file mode 100644
index 000000000000..6dbec88de2e0
--- /dev/null
+++ b/libs/ui/packages/react/src/components/asorted/Icon/IconsLegacy.stories.tsx
@@ -0,0 +1,137 @@
+import React, { useState } from "react";
+import styled from "styled-components";
+import Icon, { iconNames, Props as IconProps } from "./Icon";
+import { useTheme } from "styled-components";
+import { Text, SearchInput, Flex, Grid } from "../../..";
+
+const ScrollArea = styled(Grid)`
+ flex: 1;
+ height: auto;
+ ${p => p.theme.overflow.y};
+`;
+
+const Container = styled(Flex).attrs({
+ flex: 1,
+ flexDirection: "column",
+ p: 4,
+})`
+ overflow: hidden;
+ height: calc(100vh - 4em);
+`;
+
+const IconContainer = styled(Flex).attrs<{ active?: boolean }>({
+ flexDirection: "column",
+ justifyContent: "flex-end",
+ alignItems: "center",
+ p: 4,
+})<{ active?: boolean }>`
+ ${p => (p.active ? `background-color: ${p.theme.colors.neutral.c20};` : ``)}
+ border-radius: 4px;
+ height: 100px;
+`;
+
+const Bold = styled.b`
+ color: ${p => p.theme.colors.primary.c80};
+`;
+
+const Story = {
+ title: "Asorted/Icons/Icons(legacy)",
+ argTypes: {
+ weight: {
+ type: "enum",
+ description: "Weight (Deprecated)",
+ defaultValue: "Medium",
+ control: {
+ options: ["Medium"],
+ control: {
+ type: "select",
+ },
+ },
+ },
+ size: {
+ type: "number",
+ description: "Icon size for preview",
+ defaultValue: 32,
+ },
+ color: {
+ type: "string",
+ description: "Color",
+ control: { control: "color" },
+ },
+ name: {
+ type: "enum",
+ defaultValue: "Activity",
+ description: "[Only for single icon], Icon name",
+ control: {
+ options: iconNames,
+ control: {
+ type: "select",
+ },
+ },
+ },
+ },
+};
+export default Story;
+
+const ListTemplate = (args: IconProps) => {
+ const theme = useTheme();
+ const color = args.color || theme.colors.neutral.c100;
+ const [search, setSearch] = useState("");
+ const s = search.toLowerCase();
+ const regexp = new RegExp(s, "i");
+
+ return (
+
+
+
+ {iconNames
+ .sort((a: string, b: string) => {
+ return s ? b.toLowerCase().indexOf(s) - a.toLowerCase().indexOf(s) : a.localeCompare(b);
+ })
+ .map(name => {
+ const match = name.match(regexp);
+ const active = s && match;
+ const index = match?.index ?? 0;
+ return (
+
+
+
+
+
+ {active ? (
+ <>
+ {name.substr(0, index)}
+ {name.substr(index, s.length)}
+ {name.substr(index + s.length)}
+
+ ) : (
+ name
+ )}
+
+
+ );
+ })}
+
+
+ );
+};
+const IconTemplate = (args: IconProps) => {
+ const theme = useTheme();
+ const color = args.color || theme.colors.neutral.c100;
+
+ return ;
+};
+
+export const List = ListTemplate.bind({});
+export const SingleIcon = IconTemplate.bind({});
diff --git a/libs/ui/packages/react/src/components/asorted/Icon/ProviderIcon.tsx b/libs/ui/packages/react/src/components/asorted/Icon/ProviderIcon.tsx
index 4f22d216ed9d..ebcdb0ced50d 100644
--- a/libs/ui/packages/react/src/components/asorted/Icon/ProviderIcon.tsx
+++ b/libs/ui/packages/react/src/components/asorted/Icon/ProviderIcon.tsx
@@ -1,5 +1,5 @@
-import * as providers from "@ledgerhq/icons-ui/react/Providers/index";
-import * as providersBoxed from "@ledgerhq/icons-ui/react/ProvidersBoxed/index";
+import * as providers from "@ledgerhq/icons-ui/reactLegacy/Providers/index";
+import * as providersBoxed from "@ledgerhq/icons-ui/reactLegacy/ProvidersBoxed/index";
import React from "react";
import FlexBox from "../../layout/Flex";
diff --git a/libs/ui/packages/react/src/components/cards/Carousel/index.tsx b/libs/ui/packages/react/src/components/cards/Carousel/index.tsx
index e6b85aec4467..d4d5d2c471f8 100644
--- a/libs/ui/packages/react/src/components/cards/Carousel/index.tsx
+++ b/libs/ui/packages/react/src/components/cards/Carousel/index.tsx
@@ -8,9 +8,9 @@ import Text from "../../asorted/Text";
import Flex from "../../layout/Flex";
import Slide, { Props as SlideProps } from "./Slide";
-import IconLeft from "@ledgerhq/icons-ui/react/ArrowLeftMedium";
-import IconRight from "@ledgerhq/icons-ui/react/ArrowRightMedium";
-import IconClose from "@ledgerhq/icons-ui/react/CloseMedium";
+import IconLeft from "@ledgerhq/icons-ui/reactLegacy/ArrowLeftMedium";
+import IconRight from "@ledgerhq/icons-ui/reactLegacy/ArrowRightMedium";
+import IconClose from "@ledgerhq/icons-ui/reactLegacy/CloseMedium";
const CarouselWrapper = styled.div`
width: 100%;
diff --git a/libs/ui/packages/react/src/components/cta/Button/Button.stories.tsx b/libs/ui/packages/react/src/components/cta/Button/Button.stories.tsx
index 6eca6f6935a1..ae8062e043e9 100644
--- a/libs/ui/packages/react/src/components/cta/Button/Button.stories.tsx
+++ b/libs/ui/packages/react/src/components/cta/Button/Button.stories.tsx
@@ -1,7 +1,7 @@
import React, { Fragment } from "react";
import Button, { ButtonExpandProps, ButtonProps, ButtonVariants, IconPosition } from "./index";
import Text from "../../asorted/Text";
-import { PlusMedium, WalletAddMedium } from "@ledgerhq/icons-ui/react/";
+import { PlusMedium, WalletAddMedium } from "@ledgerhq/icons-ui/reactLegacy/";
import { InvertTheme } from "../../../styles/InvertTheme";
import Flex from "../../layout/Flex";
import Grid from "../../layout/Grid";
diff --git a/libs/ui/packages/react/src/components/cta/Button/index.tsx b/libs/ui/packages/react/src/components/cta/Button/index.tsx
index 528b8f7d9060..c9b4ca736934 100644
--- a/libs/ui/packages/react/src/components/cta/Button/index.tsx
+++ b/libs/ui/packages/react/src/components/cta/Button/index.tsx
@@ -5,7 +5,7 @@ import { fontSize, border, BordersProps, compose } from "styled-system";
import fontFamily from "../../../styles/styled/fontFamily";
import { fontSizes } from "../../../styles/theme";
import { rgba } from "../../../styles/helpers";
-import ChevronBottom from "@ledgerhq/icons-ui/react/ChevronBottomMedium";
+import ChevronBottom from "@ledgerhq/icons-ui/reactLegacy/ChevronBottomMedium";
export type ButtonVariants = "main" | "shade" | "error" | "color" | "neutral";
export type IconPosition = "right" | "left";
diff --git a/libs/ui/packages/react/src/components/cta/Link/Link.stories.tsx b/libs/ui/packages/react/src/components/cta/Link/Link.stories.tsx
index c42953e4374d..2d30b4c3b2d7 100644
--- a/libs/ui/packages/react/src/components/cta/Link/Link.stories.tsx
+++ b/libs/ui/packages/react/src/components/cta/Link/Link.stories.tsx
@@ -1,6 +1,6 @@
import React from "react";
import Link, { LinkProps, DEFAULT_ICON_POSITION, DEFAULT_SIZE, DEFAULT_TYPE } from "./index";
-import { PlusMedium } from "@ledgerhq/icons-ui/react";
+import { PlusMedium } from "@ledgerhq/icons-ui/reactLegacy";
export default {
title: "cta/Link",
diff --git a/libs/ui/packages/react/src/components/form/BaseInput/index.tsx b/libs/ui/packages/react/src/components/form/BaseInput/index.tsx
index d3c04e621911..71b3c45e573d 100644
--- a/libs/ui/packages/react/src/components/form/BaseInput/index.tsx
+++ b/libs/ui/packages/react/src/components/form/BaseInput/index.tsx
@@ -1,7 +1,7 @@
import styled, { css } from "styled-components";
import { typography, TypographyProps } from "styled-system";
import React, { InputHTMLAttributes, useState, useMemo, useCallback } from "react";
-import CircledCrossSolidMedium from "@ledgerhq/icons-ui/react/CircledCrossSolidMedium";
+import CircledCrossSolidMedium from "@ledgerhq/icons-ui/reactLegacy/CircledCrossSolidMedium";
import FlexBox from "../../layout/Flex";
import Text from "../../asorted/Text";
import { rgba } from "../../../styles/helpers";
diff --git a/libs/ui/packages/react/src/components/form/Checkbox/Checkbox.tsx b/libs/ui/packages/react/src/components/form/Checkbox/Checkbox.tsx
index 9353a0fb5e20..64238cdf4873 100644
--- a/libs/ui/packages/react/src/components/form/Checkbox/Checkbox.tsx
+++ b/libs/ui/packages/react/src/components/form/Checkbox/Checkbox.tsx
@@ -1,7 +1,7 @@
import React from "react";
import styled from "styled-components";
import Text from "../../asorted/Text";
-import CheckAloneMedium from "@ledgerhq/icons-ui/react/CheckAloneMedium";
+import CheckAloneMedium from "@ledgerhq/icons-ui/reactLegacy/CheckAloneMedium";
import { renderToStaticMarkup } from "react-dom/server";
const Icon = () =>
diff --git a/libs/ui/packages/react/src/components/form/Dropdown/index.tsx b/libs/ui/packages/react/src/components/form/Dropdown/index.tsx
index 089a7d0f0d3f..d0e0f1d9c218 100644
--- a/libs/ui/packages/react/src/components/form/Dropdown/index.tsx
+++ b/libs/ui/packages/react/src/components/form/Dropdown/index.tsx
@@ -3,7 +3,7 @@ import { components, GroupBase, ControlProps, ValueContainerProps } from "react-
import { useTheme } from "styled-components";
import SelectInput, { Props as SelectInputProps } from "../../form/SelectInput";
import Text from "../../asorted/Text";
-import { Icons } from "../../../";
+import { IconsLegacy } from "../../../";
import { ValueContainer } from "../../form/SelectInput/ValueContainer";
import FlexBox from "../../layout/Flex";
@@ -39,7 +39,7 @@ function DropdownValueContainer(props: ValueContainerProps) {
{props.children}