feat: add icons

Author: pczeglik-iohk

.eslintignore

@@ -1,3 +1,4 @@
 !.storybook
 dist/**
 storybook-static/**
+src/icons/**

.prettierignore

@@ -1,3 +1,4 @@
 dist
 node_modules
 .yarn
+src/icons/**

.storybook/main.js

@@ -1,3 +1,5 @@
+const path = require('path');
+
 const { VanillaExtractPlugin } = require('@vanilla-extract/webpack-plugin');
 
 module.exports = {
@@ -59,6 +61,11 @@ module.exports = {
     });
 
     config.resolve.extensions.push('.svg');
+    config.resolve.alias = {
+      ...config.resolve.alias,
+      // '@icons/$': resolve.resolve(__dirname, '../src/icons/'),
+      '@icons': path.resolve(__dirname, '../src/icons/'),
+    };
 
     return config;
   },

package.json

@@ -16,7 +16,8 @@
   "module": "dist/index.esm.js",
   "typings": "dist/index.d.ts",
   "scripts": {
-    "build": "rollup -c rollup.config.js",
+    "build": "yarn build:icons && rollup -c rollup.config.js",
+    "build:icons": "svgr ./src/icons/raw --out-dir ./src/icons --typescript",
     "build-storybook": "NODE_OPTIONS=--openssl-legacy-provider; build-storybook",
     "cleanup": "yarn exec rm -rf dist node_modules",
     "format": "yarn prettier --write .",
@@ -31,7 +32,6 @@
     "watch": "yarn build --watch"
   },
   "dependencies": {
-    "@lace/icons": "file:.yalc/@lace/icons",
     "@radix-ui/react-alert-dialog": "^1.0.4",
     "@radix-ui/react-avatar": "^1.0.2",
     "@radix-ui/react-checkbox": "^1.0.4",
@@ -62,6 +62,7 @@
     "recharts": "^2.6.2"
   },
   "devDependencies": {
+    "@babel/cli": "^7.22.10",
     "@babel/core": "^7.21.0",
     "@rollup/plugin-commonjs": "20.0.0",
     "@rollup/plugin-image": "2.1.1",
@@ -77,6 +78,7 @@
     "@storybook/react": "^6.5.16",
     "@storybook/test-runner": "^0.10.0",
     "@storybook/testing-library": "^0.0.13",
+    "@svgr/cli": "^8.1.0",
     "@svgr/rollup": "^6.1.2",
     "@svgr/webpack": "^6.5.1",
     "@types/react": "^18.3.3",

src/design-system/action-card/action-card.stories.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { ReactComponent as RefreshIcon } from '@lace/icons/dist/RefreshComponent';
+import RefreshIcon from '@icons/RefreshComponent';
 import type { Meta } from '@storybook/react';
 
 import { Box } from '../box';

src/design-system/asset-input/ticker-button.component.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { ReactComponent as ChevronRight } from '@lace/icons/dist/ChevronRightComponent';
+import ChevronRight from '@icons/ChevronRightComponent';
 
 import { Text } from '../text';
 

src/design-system/auto-suggest-box/auto-suggest-box-close-button.component.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { ReactComponent as CloseIcon } from '@lace/icons/dist/CloseComponent';
+import CloseIcon from '@icons/CloseComponent';
 
 import * as cx from './auto-suggest-box-button.css';
 

src/design-system/auto-suggest-box/auto-suggest-box-icon.component.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
-import { ReactComponent as CheckIcon } from '@lace/icons/dist/CheckFileUploadComponent';
-import { ReactComponent as LoadingIcon } from '@lace/icons/dist/LoadingComponent';
+import CheckIcon from '@icons/CheckFileUploadComponent';
+import LoadingIcon from '@icons/LoadingComponent';
 import cn from 'classnames';
 
 import { Box } from '../box';

src/design-system/auto-suggest-box/auto-suggest-box-open-button.component.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { ReactComponent as BookIcon } from '@lace/icons/dist/BookComponent';
+import BookIcon from '@icons/BookComponent';
 
 import * as cx from './auto-suggest-box-button.css';
 

src/design-system/bundle-input/bundle-input.component.tsx

@@ -1,7 +1,7 @@
 import React, { Fragment } from 'react';
 import type { PropsWithChildren } from 'react';
 
-import { ReactComponent as PlusSmall } from '@lace/icons/dist/PlusSmallComponent';
+import PlusSmall from '@icons/PlusSmallComponent';
 
 import { AssetInput } from '../asset-input';
 import { Box } from '../box';

src/design-system/bundle-input/remove-button.component.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { ReactComponent as CloseIcon } from '@lace/icons/dist/CloseComponent';
+import CloseIcon from '@icons/CloseComponent';
 import classNames from 'classnames';
 
 import * as cx from './remove-button.css';

src/design-system/buttons/buttons.stories.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { ReactComponent as QuestionMark } from '@lace/icons/dist/QuestionMarkComponent';
+import QuestionMark from '@icons/QuestionMarkComponent';
 import type { Meta } from '@storybook/react';
 
 import { Variants, Section, page, UIStateTable } from '../decorators';

src/design-system/checkbox/checkbox.component.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import type { ReactNode } from 'react';
 
-import { ReactComponent as CheckIcon } from '@lace/icons/dist/CheckBoxComponent';
+import CheckIcon from '@icons/CheckBoxComponent';
 import * as RadixCheckbox from '@radix-ui/react-checkbox';
 import cn from 'classnames';
 

src/design-system/control-buttons/control-buttons.stories.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { ReactComponent as PlusCircle } from '@lace/icons/dist/PlusCircleComponent';
+import PlusCircle from '@icons/PlusCircleComponent';
 import type { Meta } from '@storybook/react';
 
 import { page, Variants, Section, UIStateTable } from '../decorators';

src/design-system/dapp-transaction-summary/dapp-transaction-summary.component.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
-import { ReactComponent as CardanoLogoComponent } from '@lace/icons/dist/CardanoLogoComponent';
-import { ReactComponent as InfoIcon } from '@lace/icons/dist/InfoComponent';
+import CardanoLogoComponent from '@icons/CardanoLogoComponent';
+import InfoIcon from '@icons/InfoComponent';
 
 import { Box } from '../box';
 import { Flex } from '../flex';

src/design-system/dapp-transaction-summary/dapp-transaction-text-field.component.tsx

@@ -1,7 +1,7 @@
 import type { ReactNode } from 'react';
 import React from 'react';
 
-import { ReactComponent as InfoIcon } from '@lace/icons/dist/InfoComponent';
+import InfoIcon from '@icons/InfoComponent';
 
 import { Box } from '../box';
 import { Flex } from '../flex';

src/design-system/educational-card/educational-card.stories.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { ReactComponent as ShieldIcon } from '@lace/icons/dist/ShieldGradientComponent';
+import ShieldIcon from '@icons/ShieldGradientComponent';
 import type { Meta } from '@storybook/react';
 
 import { Box } from '../box';

src/design-system/file-upload/file-upload.component.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
-import { ReactComponent as CheckFileUploadIcon } from '@lace/icons/dist/CheckFileUploadComponent';
-import { ReactComponent as UploadIcon } from '@lace/icons/dist/UploadGradientComponent';
+import CheckFileUploadIcon from '@icons/CheckFileUploadComponent';
+import UploadIcon from '@icons/UploadGradientComponent';
 
 import { Box } from '../box';
 import { Divider } from '../divider';

src/design-system/icon-buttons/caret-button.component.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { ReactComponent as CaretIcon } from '@lace/icons/dist/CaretComponent';
+import CaretIcon from '@icons/CaretComponent';
 import cn from 'classnames';
 
 import * as cx from './caret-button.css';

src/design-system/icon-buttons/icon-buttons.stories.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
-import { ReactComponent as PlainCircle } from '@lace/icons/dist/PlainCircleComponent';
-import { ReactComponent as PlusCircleIcon } from '@lace/icons/dist/PlusCircleComponent';
+import PlainCircle from '@icons/PlainCircleComponent';
+import PlusCircleIcon from '@icons/PlusCircleComponent';
 import type { Meta } from '@storybook/react';
 
 import { page, Variants, Section, UIStateTable } from '../decorators';

src/design-system/icon-buttons/secondary-button.component.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { ReactComponent as LaceGradient } from '@lace/icons/dist/LaceGradientComponent';
+import LaceGradient from '@icons/LaceGradientComponent';
 import classNames from 'classnames';
 
 import { NavigationSkeletonButton } from './icon-skeleton-button.component';

src/design-system/info-bar/info-bar.stories.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { ReactComponent as InfoIcon } from '@lace/icons/dist/InfoComponent';
+import InfoIcon from '@icons/InfoComponent';
 
 import { LocalThemeProvider, ThemeColorScheme } from '../../design-tokens';
 import { page, Section, Variants } from '../decorators';

src/design-system/loader/loader.component.tsx

@@ -1,8 +1,8 @@
 import type { SVGProps } from 'react';
 import React from 'react';
 
-import { ReactComponent as LoaderDarkIcon } from '@lace/icons/dist/LoaderDarkGradientComponent';
-import { ReactComponent as LoaderLightIcon } from '@lace/icons/dist/LoaderLightGradientComponent';
+import LoaderDarkIcon from '@icons/LoaderDarkGradientComponent';
+import LoaderLightIcon from '@icons/LoaderLightGradientComponent';
 import cn from 'classnames';
 
 import { ThemeColorScheme, sx, useTheme } from '../../design-tokens';

src/design-system/message/message.component.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { ReactComponent as HappyEmoji } from '@lace/icons/dist/HappyEmojiComponent';
+import HappyEmoji from '@icons/HappyEmojiComponent';
 
 import { Box } from '../box';
 import { Flex } from '../flex';

src/design-system/navigation-buttons/back-button.component.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { ReactComponent as ArrowLeftIcon } from '@lace/icons/dist/ArrowLeftComponent';
+import ArrowLeftIcon from '@icons/ArrowLeftComponent';
 
 import * as cx from './back-button.css';
 import { NavigationSkeletonButton } from './navigation-skeleton-button.component';

src/design-system/navigation-buttons/close-button.component.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { ReactComponent as CloseIcon } from '@lace/icons/dist/CloseComponent';
+import CloseIcon from '@icons/CloseComponent';
 
 import * as cx from './close-button.css';
 import { NavigationSkeletonButton } from './navigation-skeleton-button.component';

src/design-system/password-box/password-box-button.component.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
-import { ReactComponent as CloseEye } from '@lace/icons/dist/EyeCloseComponent';
-import { ReactComponent as OpenEye } from '@lace/icons/dist/EyeOpenComponent';
+import CloseEye from '@icons/EyeCloseComponent';
+import OpenEye from '@icons/EyeOpenComponent';
 import cn from 'classnames';
 
 import * as cx from './password-box-button.css';

src/design-system/profile-dropdown/profile-dropdown-trigger.component.tsx

@@ -1,8 +1,8 @@
 import type { ComponentPropsWithoutRef } from 'react';
 import React from 'react';
 
-import { ReactComponent as ChevronDown } from '@lace/icons/dist/ChevronDownComponent';
-import { ReactComponent as ChevronUp } from '@lace/icons/dist/ChevronUpComponent';
+import ChevronDown from '@icons/ChevronDownComponent';
+import ChevronUp from '@icons/ChevronUpComponent';
 import classNames from 'classnames';
 
 import { Box } from '../box';

src/design-system/profile-dropdown/profile-dropdown-wallet-icon.component.tsx

@@ -1,9 +1,9 @@
 import type { FC } from 'react';
 import React from 'react';
 
-import { ReactComponent as ColdWallet } from '@lace/icons/dist/HardwareWalletComponent';
-import { ReactComponent as SharedWallet } from '@lace/icons/dist/UserGroupComponent';
-import { ReactComponent as HotWallet } from '@lace/icons/dist/WalletComponent';
+import ColdWallet from '@icons/HardwareWalletComponent';
+import SharedWallet from '@icons/UserGroupComponent';
+import HotWallet from '@icons/WalletComponent';
 
 import { Flex } from '../flex';
 

src/design-system/profile-dropdown/profile-dropdown-wallet-option.component.tsx

@@ -1,7 +1,7 @@
 import type { ComponentPropsWithoutRef } from 'react';
 import React from 'react';
 
-import { ReactComponent as ChevronRight } from '@lace/icons/dist/ChevronRightThinComponent';
+import ChevronRight from '@icons/ChevronRightThinComponent';
 import classNames from 'classnames';
 
 import { Box } from '../box';

src/design-system/radio-button/radio-button.stories.tsx

@@ -1,7 +1,7 @@
 import type { ReactElement } from 'react';
 import React, { useMemo, useState } from 'react';
 
-import { ReactComponent as DocumentDownload } from '@lace/icons/dist/DocumentDownload';
+import DocumentDownload from '@icons/DocumentDownload';
 import type { Meta } from '@storybook/react';
 import { v4 as uuid } from 'uuid';
 

src/design-system/search-box/search-box-clear-button.component.tsx

@@ -1,7 +1,7 @@
 import React, { forwardRef } from 'react';
 import type { MouseEvent, Ref } from 'react';
 
-import { ReactComponent as CloseIcon } from '@lace/icons/dist/CloseComponent';
+import CloseIcon from '@icons/CloseComponent';
 import classNames from 'classnames';
 
 import * as cx from './search-box-clear-button.css';

src/design-system/search-box/search-box-icon.component.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { ReactComponent as Search } from '@lace/icons/dist/SearchComponent';
+import Search from '@icons/SearchComponent';
 
 import { Flex } from '../flex';
 

src/design-system/select/select-item/select-item-indicator.component.tsx

@@ -1,6 +1,6 @@
 import React, { forwardRef } from 'react';
 
-import { ReactComponent as CheckIcon } from '@lace/icons/dist/CheckComponent';
+import CheckIcon from '@icons/CheckComponent';
 import * as Select from '@radix-ui/react-select';
 
 import * as cx from './select-item-indicator.css';

src/design-system/select/select-root.component.tsx

@@ -1,7 +1,7 @@
 import type { ReactNode } from 'react';
 import React from 'react';
 
-import { ReactComponent as ChevronDownIcon } from '@lace/icons/dist/ChevronDownComponent';
+import ChevronDownIcon from '@icons/ChevronDownComponent';
 import * as Select from '@radix-ui/react-select';
 
 import { Item, ItemRoot } from './select-item';

src/design-system/summary-expander/summary-expander-trigger.component.tsx

@@ -1,8 +1,8 @@
 import type { PropsWithChildren } from 'react';
 import React from 'react';
 
-import { ReactComponent as ChevronDown } from '@lace/icons/dist/ChevronDownComponent';
-import { ReactComponent as ChevronUp } from '@lace/icons/dist/ChevronUpComponent';
+import ChevronDown from '@icons/ChevronDownComponent';
+import ChevronUp from '@icons/ChevronUpComponent';
 
 import { Flex } from '../flex';
 

src/design-system/toast-bar/toast-bar-root.component.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import type { ComponentProps, ReactNode } from 'react';
 
-import { ReactComponent as CloseIcon } from '@lace/icons/dist/CloseComponent';
+import CloseIcon from '@icons/CloseComponent';
 import * as Toast from '@radix-ui/react-toast';
 import classNames from 'classnames';
 

src/design-system/toast-bar/toast-bar.stories.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { ReactComponent as PlainCircle } from '@lace/icons/dist/PlainCircleComponent';
+import PlainCircle from '@icons/PlainCircleComponent';
 import * as Toast from '@radix-ui/react-toast';
 import { expect } from '@storybook/jest';
 import type { ComponentStory, Meta } from '@storybook/react';

src/design-system/toggle-switch/toggle-switch.stories.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { ReactComponent as InfoIcon } from '@lace/icons/dist/InfoComponent';
+import InfoIcon from '@icons/InfoComponent';
 import type { Meta } from '@storybook/react';
 
 import { ThemeColorScheme, LocalThemeProvider } from '../../design-tokens';

src/design-system/transaction-summary/transaction-summary-amount.component.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { ReactComponent as InfoIcon } from '@lace/icons/dist/InfoComponent';
+import InfoIcon from '@icons/InfoComponent';
 
 import { Box } from '../box';
 import { Flex } from '../flex';