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';