remove icons from core package

Author: rivka-ungar

packages/core/.storybook/preview.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import * as VibeComponents from "../src/components";
 import * as VibeComponentsNext from "../src/components/next";
 import * as VibeHooks from "../src/hooks";
-import * as VibeIcons from "../src/components/Icon/Icons";
+import * as VibeIcons from "@vibe/core";
 import { Preview } from "@storybook/react";
 import isChromatic from "chromatic/isChromatic";
 import { DocsContainer, DocsPage, Unstyled } from "@storybook/blocks";

packages/core/package.json

@@ -11,11 +11,6 @@
       "import": "./dist/src/index.js",
       "default": "./dist/src/index.js"
     },
-    "./icons": {
-      "types": "./dist/components/Icon/Icons/index.d.ts",
-      "import": "./dist/src/components/Icon/Icons/icons.js",
-      "default": "./dist/src/components/Icon/Icons/icons.js"
-    },
     "./interactionsTests": {
       "types": "./dist/tests/interactions-utils.d.ts",
       "import": "./dist/src/tests/interactionsTests.js",
@@ -39,9 +34,6 @@
   },
   "typesVersions": {
     "*": {
-      "icons": [
-        "./dist/components/Icon/Icons/index.d.ts"
-      ],
       "interactionsTests": [
         "./dist/tests/interactions-utils.d.ts"
       ],
@@ -58,11 +50,10 @@
     "test:watch": "jest --watch",
     "test:update": "yarn test -u",
     "test:coverage": "yarn test -- --coverage",
-    "start": "yarn build:react-icons && yarn build:esm -- --watch",
-    "build": "yarn build:react-icons && yarn build:esm && yarn build:esm:mock-classnames",
+    "start": "yarn build:esm -- --watch",
+    "build": "&& yarn build:esm && yarn build:esm:mock-classnames",
     "build:esm": "rollup -c",
     "build:esm:mock-classnames": "mock_classnames=on rollup -c",
-    "build:react-icons": "svg2react-icon --typescript --keep-colors ../../node_modules/monday-ui-style/src/Icons src/components/Icon/Icons",
     "storybook": "storybook dev -p 7008",
     "build-storybook": "storybook build -o static_storybook",
     "deploy-storybook": "storybook-to-ghpages",
@@ -89,6 +80,7 @@
   "homepage": "https://github.com/mondaycom/vibe#readme",
   "dependencies": {
     "@popperjs/core": "2.11.6",
+    "@vibe/icons": "^0.0.4",
     "a11y-dialog": "^7.5.2",
     "body-scroll-lock": "^4.0.0-beta.0",
     "browserslist-config-monday": "1.0.6",
@@ -248,7 +240,6 @@
     "stylelint-config-recommended-scss": "^6.0.0",
     "stylelint-config-standard": "^24.0.0",
     "stylelint-config-standard-scss": "^3.0.0",
-    "svg2react-icon": "^3.1.178",
     "ts-jest": "^29.1.2",
     "ts-loader": "^9.3.1",
     "ts-node": "^10.9.2",

packages/core/rollup.config.js

@@ -67,7 +67,6 @@ export default {
   },
   input: {
     index: path.join(SRC_PATH, "index.ts"),
-    icons: path.join(SRC_PATH, "components/Icon/Icons/index.ts"),
     interactionsTests: path.join(SRC_PATH, "tests/interactions-utils.ts"),
     testIds: path.join(SRC_PATH, "tests/test-ids-utils.ts"),
     next: path.join(SRC_PATH, "components/next.ts")

packages/core/src/components/AlertBanner/AlertBanner.tsx

@@ -2,7 +2,7 @@ import { getStyle } from "../../helpers/typesciptCssModulesHelper";
 import cx from "classnames";
 import React, { ForwardedRef, forwardRef, ReactElement, useMemo } from "react";
 import IconButton from "../../components/IconButton/IconButton";
-import CloseSmall from "../../components/Icon/Icons/components/CloseSmall";
+import { CloseSmall } from "@vibe/icons";
 import { AlertBannerBackgroundColor as AlertBannerBackgroundColorEnum } from "./AlertBannerConstants";
 import { AlertBannerBackgroundColor } from "./AlertBanner.types";
 import { NOOP } from "../../utils/function-utils";

packages/core/src/components/AttentionBox/AttentionBox.tsx

@@ -5,9 +5,7 @@ import { getStyle } from "../../helpers/typesciptCssModulesHelper";
 import { ComponentDefaultTestId, getTestId } from "../../tests/test-ids-utils";
 import Icon from "../Icon/Icon";
 import IconButton from "../IconButton/IconButton";
-import CloseSmall from "../Icon/Icons/components/CloseSmall";
-import AlertIcon from "../Icon/Icons/components/Alert";
-import InfoIcon from "../Icon/Icons/components/Info";
+import { CloseSmall, Alert as AlertIcon, Info as InfoIcon } from "@vibe/icons";
 import { IconType as IconTypeEnum } from "../Icon/IconConstants";
 import { AttentionBoxType as AttentionBoxTypeEnum } from "./AttentionBoxConstants";
 import { AttentionBoxType } from "./AttentionBox.types";

packages/core/src/components/AttentionBox/__stories__/AttentionBox.mdx

@@ -1,7 +1,7 @@
 import { Canvas, Meta } from "@storybook/blocks";
 import AttentionBox from "../AttentionBox";
 import { Link } from "vibe-storybook-components";
-import { Info } from "../../Icon/Icons";
+import { Info } from "@vibe/icons";
 import {
   ALERT_BANNER,
   TOAST,

packages/core/src/components/AttentionBox/__stories__/AttentionBox.stories.tsx

@@ -4,13 +4,12 @@ import AttentionBox from "../AttentionBox";
 import { createStoryMetaSettingsDecorator } from "../../../storybook";
 import { createComponentTemplate, StoryDescription } from "vibe-storybook-components";
 import DialogContentContainer from "../../DialogContentContainer/DialogContentContainer";
-import { Info, Invite, ThumbsUp } from "../../Icon/Icons";
+import { Info, Invite, ThumbsUp, Favorite } from "@vibe/icons";
 import Icon from "../../Icon/Icon";
 import Search from "../../Search/Search";
 import Avatar from "../../Avatar/Avatar";
 import person from "./assets/person.png";
 import Flex from "../../Flex/Flex";
-import Favorite from "../../Icon/Icons/components/Favorite";
 import AttentionBoxLink from "../AttentionBoxLink/AttentionBoxLink";
 import "./AttentionBox.stories.scss";
 

packages/core/src/components/Avatar/__stories__/Avatar.stories.tsx

@@ -5,7 +5,7 @@ import { createStoryMetaSettingsDecorator } from "../../../storybook";
 import { createComponentTemplate, StoryDescription } from "vibe-storybook-components";
 import { Counter, Flex } from "../..";
 import { guest, home, minus, owner, person1, person2, person3 } from "./assets";
-import { WhatsNew } from "../../Icon/Icons";
+import { WhatsNew } from "@vibe/icons";
 import { useCallback, useState } from "react";
 import "./Avatar.stories.scss";
 

packages/core/src/components/Avatar/__tests__/Avatar.snapshot.test.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import renderer from "react-test-renderer";
 import Avatar from "../Avatar";
-import { WhatsNew } from "../../Icon/Icons";
+import { WhatsNew } from "@vibe/icons";
 
 jest.mock("../../Icon/Icon", () => ({ icon }: { icon: string | null }) => <div data-testid="icon-mock">{icon}</div>);
 jest.mock("../../Icon/CustomSvgIcon/CustomSvgIcon", () => () => <div data-testid="custom-icon-mock" />);

packages/core/src/components/Badge/__stories__/Badge.mdx

@@ -1,7 +1,7 @@
 import Badge from "../Badge";
 import { Canvas, Meta } from "@storybook/blocks";
 import person from "./assets/person.png";
-import { WhatsNew } from "../../Icon/Icons";
+import { WhatsNew } from "@vibe/icons";
 import Link from "../../Link/Link";
 import Button from "../../Button/Button";
 import Avatar from "../../Avatar/Avatar";