♻️ Add icons package (#646)

.eslintrc.json

@@ -1,6 +1,7 @@
 {
   "extends": ["next/core-web-vitals", "turbo"],
   "plugins": ["simple-import-sort", "@typescript-eslint"],
+  "ignorePatterns": ["**/playwright-report/*.js"],
   "overrides": [
     {
       "files": ["**/*.ts", "**/*.tsx"],

apps/web/package.json

@@ -16,14 +16,15 @@
     "docker:start": "./scripts/docker-start.sh"
   },
   "dependencies": {
-    "@rallly/backend": "*",
-    "@rallly/database": "*",
-    "@rallly/languages":"*",
-    "@rallly/tailwind-config": "*",
     "@floating-ui/react-dom-interactions": "^0.13.3",
     "@headlessui/react": "^1.7.7",
     "@next/bundle-analyzer": "^12.3.4",
     "@radix-ui/react-popover": "^1.0.3",
+    "@rallly/backend": "*",
+    "@rallly/database": "*",
+    "@rallly/icons": "*",
+    "@rallly/languages": "*",
+    "@rallly/tailwind-config": "*",
     "@sentry/nextjs": "^7.33.0",
     "@svgr/webpack": "^6.5.1",
     "@tailwindcss/typography": "^0.5.9",
@@ -42,7 +43,6 @@
     "next-seo": "^5.15.0",
     "postcss": "^8.4.21",
     "posthog-js": "^1.51.3",
-    "react": "^18.2.0",
     "react-big-calendar": "^1.5.0",
     "react-dom": "^18.2.0",
     "react-hook-form": "^7.42.1",
@@ -50,11 +50,12 @@
     "react-i18next": "^12.1.4",
     "react-linkify": "^1.0.0-alpha",
     "react-use": "^17.4.0",
+    "react": "^18.2.0",
     "smoothscroll-polyfill": "^0.4.4",
     "spacetime": "^7.1.4",
     "superjson": "^1.12.2",
-    "tailwindcss": "^3.2.4",
     "tailwindcss-animate": "^1.0.5",
+    "tailwindcss": "^3.2.4",
     "timezone-soft": "^1.3.1",
     "typescript": "^4.9.4",
     "zod": "^3.20.2"

apps/web/src/components/admin-control.tsx

@@ -1,9 +1,9 @@
+import Share from "@rallly/icons/share.svg";
 import { AnimatePresence, m } from "framer-motion";
 import { useTranslation } from "next-i18next";
 import React from "react";
 
 import { Button } from "@/components/button";
-import Share from "@/components/icons/share.svg";
 
 import { useParticipants } from "./participants-provider";
 import ManagePoll from "./poll/manage-poll";

apps/web/src/components/button.tsx

@@ -1,8 +1,7 @@
+import SpinnerIcon from "@rallly/icons/spinner.svg";
 import clsx from "clsx";
 import * as React from "react";
 
-import SpinnerIcon from "@/components/icons/spinner.svg";
-
 export interface ButtonProps
   extends Omit<
     React.DetailedHTMLProps<

apps/web/src/components/crisp-chat.tsx

@@ -1,7 +1,6 @@
+import Chat from "@rallly/icons/chat.svg";
 import * as React from "react";
 
-import Chat from "@/components/icons/chat.svg";
-
 import { Button } from "./button";
 
 const crispWebsiteId = process.env.NEXT_PUBLIC_CRISP_WEBSITE_ID;

apps/web/src/components/discussion/discussion.tsx

@@ -1,4 +1,6 @@
 import { trpc } from "@rallly/backend";
+import DotsHorizontal from "@rallly/icons/dots-horizontal.svg";
+import Trash from "@rallly/icons/trash.svg";
 import clsx from "clsx";
 import { useTranslation } from "next-i18next";
 import * as React from "react";
@@ -11,8 +13,6 @@ import { requiredString } from "../../utils/form-validation";
 import { Button } from "../button";
 import CompactButton from "../compact-button";
 import Dropdown, { DropdownItem } from "../dropdown";
-import DotsHorizontal from "../icons/dots-horizontal.svg";
-import Trash from "../icons/trash.svg";
 import NameInput from "../name-input";
 import TruncatedLinkify from "../poll/truncated-linkify";
 import UserAvatar from "../poll/user-avatar";

apps/web/src/components/error-page.tsx

@@ -1,10 +1,9 @@
+import EmojiSad from "@rallly/icons/emoji-sad.svg";
 import Head from "next/head";
 import Link from "next/link";
 import { useTranslation } from "next-i18next";
 import * as React from "react";
 
-import EmojiSad from "@/components/icons/emoji-sad.svg";
-
 export interface ComponentProps {
   icon?: React.ComponentType<{ className?: string }>;
   title: string;

apps/web/src/components/feedback.tsx

@@ -1,11 +1,11 @@
 import { trpc } from "@rallly/backend";
+import CheckCircle from "@rallly/icons/check-circle.svg";
+import Speakerphone from "@rallly/icons/speakerphone.svg";
 import Link from "next/link";
 import { Trans, useTranslation } from "next-i18next";
 import { useForm } from "react-hook-form";
 
 import { Button } from "@/components/button";
-import CheckCircle from "@/components/icons/check-circle.svg";
-import Speakerphone from "@/components/icons/speakerphone.svg";
 import { Logo } from "@/components/logo";
 import { useModalState } from "@/components/modal/use-modal";
 import Tooltip from "@/components/tooltip";

apps/web/src/components/forms/poll-options-form/date-navigation-toolbar.tsx

@@ -1,9 +1,8 @@
+import ChevronLeft from "@rallly/icons/chevron-left.svg";
+import ChevronRight from "@rallly/icons/chevron-right.svg";
 import { useTranslation } from "next-i18next";
 import * as React from "react";
 
-import ChevronLeft from "../../icons/chevron-left.svg";
-import ChevronRight from "../../icons/chevron-right.svg";
-
 export interface DateNavigationToolbarProps {
   year: number;
   label: string;

apps/web/src/components/forms/poll-options-form/month-calendar/month-calendar.tsx

@@ -1,3 +1,11 @@
+import Calendar from "@rallly/icons/calendar.svg";
+import ChevronLeft from "@rallly/icons/chevron-left.svg";
+import ChevronRight from "@rallly/icons/chevron-right.svg";
+import DotsHorizontal from "@rallly/icons/dots-horizontal.svg";
+import Magic from "@rallly/icons/magic.svg";
+import PlusSm from "@rallly/icons/plus-sm.svg";
+import Trash from "@rallly/icons/trash.svg";
+import X from "@rallly/icons/x.svg";
 import clsx from "clsx";
 import { useTranslation } from "next-i18next";
 import * as React from "react";
@@ -13,14 +21,6 @@ import CompactButton from "../../../compact-button";
 import DateCard from "../../../date-card";
 import Dropdown, { DropdownItem } from "../../../dropdown";
 import { useHeadlessDatePicker } from "../../../headless-date-picker";
-import Calendar from "../../../icons/calendar.svg";
-import ChevronLeft from "../../../icons/chevron-left.svg";
-import ChevronRight from "../../../icons/chevron-right.svg";
-import DotsHorizontal from "../../../icons/dots-horizontal.svg";
-import Magic from "../../../icons/magic.svg";
-import PlusSm from "../../../icons/plus-sm.svg";
-import Trash from "../../../icons/trash.svg";
-import X from "../../../icons/x.svg";
 import Switch from "../../../switch";
 import { DateTimeOption } from "..";
 import { DateTimePickerProps } from "../types";

apps/web/src/components/forms/poll-options-form/month-calendar/time-picker.tsx

@@ -6,6 +6,7 @@ import {
   useFloating,
 } from "@floating-ui/react-dom-interactions";
 import { Listbox } from "@headlessui/react";
+import ChevronDown from "@rallly/icons/chevron-down.svg";
 import clsx from "clsx";
 import * as React from "react";
 
@@ -13,7 +14,6 @@ import { getDuration } from "@/utils/date-time-utils";
 import { stopPropagation } from "@/utils/stop-propagation";
 
 import { useDayjs } from "../../../../utils/dayjs";
-import ChevronDown from "../../../icons/chevron-down.svg";
 import { styleMenuItem } from "../../../menu-styles";
 
 export interface TimePickerProps {

apps/web/src/components/forms/poll-options-form/poll-options-form.tsx

@@ -1,3 +1,5 @@
+import Calendar from "@rallly/icons/calendar.svg";
+import Table from "@rallly/icons/table.svg";
 import clsx from "clsx";
 import { useTranslation } from "next-i18next";
 import * as React from "react";
@@ -5,8 +7,6 @@ import { Controller, useForm } from "react-hook-form";
 
 import { getBrowserTimeZone } from "../../../utils/date-time-utils";
 import FullPageLoader from "../../full-page-loader";
-import Calendar from "../../icons/calendar.svg";
-import Table from "../../icons/table.svg";
 import { useModal } from "../../modal";
 import TimeZonePicker from "../../time-zone-picker";
 import { PollFormProps } from "../types";

apps/web/src/components/full-page-loader.tsx

@@ -1,8 +1,7 @@
+import Spinner from "@rallly/icons/spinner.svg";
 import clsx from "clsx";
 import * as React from "react";
 
-import Spinner from "./icons/spinner.svg";
-
 interface FullPageLoaderProps {
   className?: string;
   children?: React.ReactNode;

apps/web/src/components/home/bonus.tsx

@@ -1,10 +1,9 @@
+import Code from "@rallly/icons/code.svg";
+import CursorClick from "@rallly/icons/cursor-click.svg";
+import Server from "@rallly/icons/server.svg";
 import { Trans, useTranslation } from "next-i18next";
 import * as React from "react";
 
-import Code from "@/components/icons/code.svg";
-import CursorClick from "@/components/icons/cursor-click.svg";
-import Server from "@/components/icons/server.svg";
-
 import Ban from "./ban-ads.svg";
 
 const Bonus: React.FunctionComponent = () => {

apps/web/src/components/home/features.tsx

@@ -1,11 +1,10 @@
+import Bell from "@rallly/icons/bell.svg";
+import Chat from "@rallly/icons/chat.svg";
+import Clock from "@rallly/icons/clock.svg";
+import DeviceMobile from "@rallly/icons/device-mobile.svg";
 import { useTranslation } from "next-i18next";
 import * as React from "react";
 
-import Bell from "@/components/icons/bell.svg";
-import Chat from "@/components/icons/chat.svg";
-import Clock from "@/components/icons/clock.svg";
-import DeviceMobile from "@/components/icons/device-mobile.svg";
-
 const Features: React.FunctionComponent = () => {
   const { t } = useTranslation("homepage");
   return (

apps/web/src/components/layouts/page-layout.tsx

@@ -1,3 +1,5 @@
+import DotsVertical from "@rallly/icons/dots-vertical.svg";
+import Github from "@rallly/icons/github.svg";
 import clsx from "clsx";
 import { domAnimation, LazyMotion } from "framer-motion";
 import Link from "next/link";
@@ -5,8 +7,6 @@ import { useRouter } from "next/router";
 import { Trans, useTranslation } from "next-i18next";
 import * as React from "react";
 
-import DotsVertical from "@/components/icons/dots-vertical.svg";
-import Github from "@/components/icons/github.svg";
 import Logo from "~//logo.svg";
 
 import { Popover, PopoverContent, PopoverTrigger } from "../popover";

apps/web/src/components/layouts/page-layout/footer.tsx

@@ -1,12 +1,12 @@
+import Discord from "@rallly/icons/discord.svg";
+import Star from "@rallly/icons/star.svg";
+import Translate from "@rallly/icons/translate.svg";
+import Twitter from "@rallly/icons/twitter.svg";
 import Link from "next/link";
 import { useRouter } from "next/router";
 import { Trans, useTranslation } from "next-i18next";
 import * as React from "react";
 
-import Discord from "@/components/icons/discord.svg";
-import Star from "@/components/icons/star.svg";
-import Translate from "@/components/icons/translate.svg";
-import Twitter from "@/components/icons/twitter.svg";
 import DigitalOcean from "~//digitalocean.svg";
 import Logo from "~//logo.svg";
 import Sentry from "~//sentry.svg";

apps/web/src/components/layouts/standard-layout/mobile-navigation.tsx

@@ -1,17 +1,17 @@
+import Adjustments from "@rallly/icons/adjustments.svg";
+import Beaker from "@rallly/icons/beaker.svg";
+import Home from "@rallly/icons/home.svg";
+import Login from "@rallly/icons/login.svg";
+import Menu from "@rallly/icons/menu.svg";
+import Pencil from "@rallly/icons/pencil.svg";
+import Support from "@rallly/icons/support.svg";
+import UserCircle from "@rallly/icons/user-circle.svg";
 import clsx from "clsx";
 import { AnimatePresence } from "framer-motion";
 import { useTranslation } from "next-i18next";
 import React from "react";
 
 import { LoginLink } from "@/components/auth/login-modal";
-import Adjustments from "@/components/icons/adjustments.svg";
-import Beaker from "@/components/icons/beaker.svg";
-import Home from "@/components/icons/home.svg";
-import Login from "@/components/icons/login.svg";
-import Menu from "@/components/icons/menu.svg";
-import Pencil from "@/components/icons/pencil.svg";
-import Support from "@/components/icons/support.svg";
-import UserCircle from "@/components/icons/user-circle.svg";
 import { Popover, PopoverContent, PopoverTrigger } from "@/components/popover";
 import Preferences from "@/components/preferences";
 import { useUser } from "@/components/user-provider";

apps/web/src/components/layouts/standard-layout/user-dropdown.tsx

@@ -1,12 +1,12 @@
+import Login from "@rallly/icons/login.svg";
+import Logout from "@rallly/icons/logout.svg";
+import Question from "@rallly/icons/question-mark-circle.svg";
+import User from "@rallly/icons/user.svg";
 import { useTranslation } from "next-i18next";
 import React from "react";
 
 import { useLoginModal } from "@/components/auth/login-modal";
 import Dropdown, { DropdownItem, DropdownProps } from "@/components/dropdown";
-import Login from "@/components/icons/login.svg";
-import Logout from "@/components/icons/logout.svg";
-import Question from "@/components/icons/question-mark-circle.svg";
-import User from "@/components/icons/user.svg";
 import { useModalContext } from "@/components/modal/modal-provider";
 import { useUser } from "@/components/user-provider";
 

apps/web/src/components/maintenance.tsx

@@ -1,7 +1,6 @@
+import Clock from "@rallly/icons/clock.svg";
 import Head from "next/head";
 
-import Clock from "@/components/icons/clock.svg";
-
 import Logo from "../../public/logo.svg";
 
 const Maintenance: React.FunctionComponent = () => {

apps/web/src/components/modal/modal.tsx

@@ -1,9 +1,8 @@
 import { Dialog } from "@headlessui/react";
+import X from "@rallly/icons/x.svg";
 import { AnimatePresence, m } from "framer-motion";
 import * as React from "react";
 
-import X from "@/components/icons/x.svg";
-
 import { Button, ButtonProps } from "../button";
 
 export interface ModalProps {

apps/web/src/components/participant-dropdown.tsx

@@ -1,4 +1,8 @@
 import { trpc } from "@rallly/backend";
+import DotsHorizontal from "@rallly/icons/dots-horizontal.svg";
+import Pencil from "@rallly/icons/pencil-alt.svg";
+import Tag from "@rallly/icons/tag.svg";
+import Trash from "@rallly/icons/trash.svg";
 import { useTranslation } from "next-i18next";
 import React from "react";
 import { SubmitHandler, useForm } from "react-hook-form";
@@ -6,10 +10,6 @@ import { useMount } from "react-use";
 
 import { Button } from "@/components/button";
 import Dropdown, { DropdownItem } from "@/components/dropdown";
-import DotsHorizontal from "@/components/icons/dots-horizontal.svg";
-import Pencil from "@/components/icons/pencil-alt.svg";
-import Tag from "@/components/icons/tag.svg";
-import Trash from "@/components/icons/trash.svg";
 import Modal from "@/components/modal/modal";
 import { useModalState } from "@/components/modal/use-modal";
 import { useDeleteParticipantModal } from "@/components/poll/use-delete-participant-modal";

apps/web/src/components/poll-context.tsx

@@ -1,9 +1,9 @@
 import { Participant, Vote, VoteType } from "@rallly/database";
+import Trash from "@rallly/icons/trash.svg";
 import { keyBy } from "lodash";
 import { useTranslation } from "next-i18next";
 import React from "react";
 
-import Trash from "@/components/icons/trash.svg";
 import {
   decodeOptions,
   getBrowserTimeZone,

apps/web/src/components/poll.tsx

@@ -1,9 +1,9 @@
+import Exclamation from "@rallly/icons/exclamation.svg";
+import LockClosed from "@rallly/icons/lock-closed.svg";
 import { useTranslation } from "next-i18next";
 import React from "react";
 
 import Discussion from "@/components/discussion";
-import Exclamation from "@/components/icons/exclamation.svg";
-import LockClosed from "@/components/icons/lock-closed.svg";
 import DesktopPoll from "@/components/poll/desktop-poll";
 import MobilePoll from "@/components/poll/mobile-poll";
 import { preventWidows } from "@/utils/prevent-widows";

apps/web/src/components/poll/desktop-poll.tsx

@@ -1,10 +1,9 @@
+import ArrowLeft from "@rallly/icons/arrow-left.svg";
+import ArrowRight from "@rallly/icons/arrow-right.svg";
 import { Trans, useTranslation } from "next-i18next";
 import * as React from "react";
 import { useMeasure } from "react-use";
 
-import ArrowLeft from "@/components/icons/arrow-left.svg";
-import ArrowRight from "@/components/icons/arrow-right.svg";
-
 import { Button } from "../button";
 import { useNewParticipantModal } from "../new-participant-modal";
 import { useParticipants } from "../participants-provider";

apps/web/src/components/poll/language-selector.tsx

@@ -1,10 +1,9 @@
+import ChevronDown from "@rallly/icons/chevron-down.svg";
 import languages from "@rallly/languages";
 import clsx from "clsx";
 import Cookies from "js-cookie";
 import { useTranslation } from "next-i18next";
 
-import ChevronDown from "@/components/icons/chevron-down.svg";
-
 export const LanguageSelect: React.FunctionComponent<{
   className?: string;
   onChange?: (language: string) => void;

apps/web/src/components/poll/legacy-poll-notice.tsx

@@ -1,8 +1,7 @@
+import Speakerphone from "@rallly/icons/speakerphone.svg";
 import Cookies from "js-cookie";
 import * as React from "react";
 
-import Speakerphone from "@/components/icons/speakerphone.svg";
-
 const cookieName = "legacy-poll-notice";
 
 const LegacyPollNotice: React.FunctionComponent<{ show?: boolean }> = ({

apps/web/src/components/poll/manage-poll.tsx

@@ -1,16 +1,16 @@
 import { Placement } from "@floating-ui/react-dom-interactions";
+import Cog from "@rallly/icons/cog.svg";
+import LockClosed from "@rallly/icons/lock-closed.svg";
+import LockOpen from "@rallly/icons/lock-open.svg";
+import Pencil from "@rallly/icons/pencil-alt.svg";
+import Save from "@rallly/icons/save.svg";
+import Table from "@rallly/icons/table.svg";
+import Trash from "@rallly/icons/trash.svg";
 import dayjs from "dayjs";
 import { Trans, useTranslation } from "next-i18next";
 import * as React from "react";
 
 import { Button } from "@/components/button";
-import Cog from "@/components/icons/cog.svg";
-import LockClosed from "@/components/icons/lock-closed.svg";
-import LockOpen from "@/components/icons/lock-open.svg";
-import Pencil from "@/components/icons/pencil-alt.svg";
-import Save from "@/components/icons/save.svg";
-import Table from "@/components/icons/table.svg";
-import Trash from "@/components/icons/trash.svg";
 import { encodeDateOption } from "@/utils/date-time-utils";
 
 import Dropdown, { DropdownItem } from "../dropdown";

apps/web/src/components/poll/manage-poll/delete-poll-form.tsx

@@ -1,11 +1,11 @@
 import { trpc } from "@rallly/backend";
+import Exclamation from "@rallly/icons/exclamation.svg";
 import clsx from "clsx";
 import { Trans, useTranslation } from "next-i18next";
 import * as React from "react";
 import { useForm } from "react-hook-form";
 
 import { Button } from "@/components/button";
-import Exclamation from "@/components/icons/exclamation.svg";
 import { usePostHog } from "@/utils/posthog";
 
 const confirmText = "delete-me";

apps/web/src/components/poll/mobile-poll.tsx

@@ -1,12 +1,12 @@
 import { Listbox } from "@headlessui/react";
+import ChevronDown from "@rallly/icons/chevron-down.svg";
+import PlusCircle from "@rallly/icons/plus-circle.svg";
 import { AnimatePresence, m } from "framer-motion";
 import { useTranslation } from "next-i18next";
 import * as React from "react";
 import { FormProvider, useForm } from "react-hook-form";
 import smoothscroll from "smoothscroll-polyfill";
 
-import ChevronDown from "@/components/icons/chevron-down.svg";
-import PlusCircle from "@/components/icons/plus-circle.svg";
 import { ParticipantDropdown } from "@/components/participant-dropdown";
 import { usePoll } from "@/components/poll-context";
 import { You } from "@/components/you";

apps/web/src/components/poll/mobile-poll/poll-option.tsx

@@ -1,11 +1,10 @@
 import { Participant, VoteType } from "@rallly/database";
+import ChevronDown from "@rallly/icons/chevron-down.svg";
 import clsx from "clsx";
 import { AnimatePresence, m } from "framer-motion";
 import { useTranslation } from "next-i18next";
 import * as React from "react";
 
-import ChevronDown from "@/components/icons/chevron-down.svg";
-
 import { useParticipants } from "../../participants-provider";
 import { ConnectedScoreSummary } from "../score-summary";
 import UserAvatar from "../user-avatar";

apps/web/src/components/poll/mobile-poll/time-slot-option.tsx

@@ -1,7 +1,6 @@
+import Clock from "@rallly/icons/clock.svg";
 import * as React from "react";
 
-import Clock from "@/components/icons/clock.svg";
-
 import PollOption, { PollOptionProps } from "./poll-option";
 
 export interface TimeSlotOptionProps extends PollOptionProps {

apps/web/src/components/poll/notifications-toggle.tsx

@@ -1,11 +1,11 @@
 import { trpc } from "@rallly/backend";
+import Bell from "@rallly/icons/bell.svg";
+import BellCrossed from "@rallly/icons/bell-crossed.svg";
 import { useTranslation } from "next-i18next";
 import * as React from "react";
 
 import { useLoginModal } from "@/components/auth/login-modal";
 import { Button } from "@/components/button";
-import Bell from "@/components/icons/bell.svg";
-import BellCrossed from "@/components/icons/bell-crossed.svg";
 import { useUser } from "@/components/user-provider";
 import { usePostHog } from "@/utils/posthog";
 import { usePollByAdmin } from "@/utils/trpc/hooks";

apps/web/src/components/poll/score-summary.tsx

@@ -1,9 +1,9 @@
+import CheckCircle from "@rallly/icons/check-circle.svg";
 import clsx from "clsx";
 import { AnimatePresence, m } from "framer-motion";
 import * as React from "react";
 import { usePrevious } from "react-use";
 
-import CheckCircle from "@/components/icons/check-circle.svg";
 import { usePoll } from "@/components/poll-context";
 
 export interface PopularityScoreProps {

apps/web/src/components/poll/vote-icon.tsx

@@ -1,12 +1,11 @@
 import { VoteType } from "@rallly/database";
+import CheckCircle from "@rallly/icons/check-circle.svg";
+import IfNeedBe from "@rallly/icons/if-need-be.svg";
+import QuestionMark from "@rallly/icons/question-mark.svg";
+import X from "@rallly/icons/x-circle.svg";
 import clsx from "clsx";
 import * as React from "react";
 
-import CheckCircle from "@/components/icons/check-circle.svg";
-import IfNeedBe from "@/components/icons/if-need-be.svg";
-import QuestionMark from "@/components/icons/question-mark.svg";
-import X from "@/components/icons/x-circle.svg";
-
 const VoteIcon: React.FunctionComponent<{
   type?: VoteType;
   size?: "sm" | "md";

apps/web/src/components/profile.tsx

@@ -1,4 +1,8 @@
 import { trpc } from "@rallly/backend";
+import Calendar from "@rallly/icons/calendar.svg";
+import LockClosed from "@rallly/icons/lock-closed.svg";
+import Pencil from "@rallly/icons/pencil.svg";
+import User from "@rallly/icons/user.svg";
 import Head from "next/head";
 import Link from "next/link";
 import { useRouter } from "next/router";
@@ -6,10 +10,6 @@ import { useTranslation } from "next-i18next";
 import * as React from "react";
 
 import Badge from "@/components/badge";
-import Calendar from "@/components/icons/calendar.svg";
-import LockClosed from "@/components/icons/lock-closed.svg";
-import Pencil from "@/components/icons/pencil.svg";
-import User from "@/components/icons/user.svg";
 import Tooltip from "@/components/tooltip";
 
 import { useDayjs } from "../utils/dayjs";

apps/web/src/components/spinner.tsx

@@ -1,7 +1,6 @@
+import SpinnerSvg from "@rallly/icons/spinner.svg";
 import clsx from "clsx";
 
-import SpinnerSvg from "@/components/icons/spinner.svg";
-
 export const Spinner = (props: { className?: string }) => {
   return (
     <SpinnerSvg

apps/web/src/components/time-zone-picker/time-zone-picker.tsx

@@ -6,12 +6,12 @@ import {
   useFloating,
 } from "@floating-ui/react-dom-interactions";
 import { Combobox } from "@headlessui/react";
+import ChevronDown from "@rallly/icons/chevron-down.svg";
 import clsx from "clsx";
 import React from "react";
 import spacetime from "spacetime";
 import soft from "timezone-soft";
 
-import ChevronDown from "../../components/icons/chevron-down.svg";
 import { styleMenuItem } from "../menu-styles";
 import timeZones from "./time-zones.json";
 

apps/web/src/pages/404.tsx

@@ -1,10 +1,10 @@
+import DocumentSearch from "@rallly/icons/document-search.svg";
 import { GetStaticProps } from "next";
 import { useTranslation } from "next-i18next";
 import { serverSideTranslations } from "next-i18next/serverSideTranslations";
 import React from "react";
 
 import ErrorPage from "@/components/error-page";
-import DocumentSearch from "@/components/icons/document-search.svg";
 import { getStandardLayout } from "@/components/layouts/standard-layout";
 import { NextPageWithLayout } from "@/types";
 

apps/web/src/pages/auth/disable-notifications.tsx

@@ -5,6 +5,7 @@ import {
 } from "@rallly/backend/next";
 import { decryptToken } from "@rallly/backend/session";
 import { prisma } from "@rallly/database";
+import Bell from "@rallly/icons/bell-crossed.svg";
 import clsx from "clsx";
 import Link from "next/link";
 import { useRouter } from "next/router";
@@ -12,7 +13,6 @@ import { Trans, useTranslation } from "next-i18next";
 import React from "react";
 import { useMount } from "react-use";
 
-import Bell from "@/components/icons/bell-crossed.svg";
 import { AuthLayout } from "@/components/layouts/auth-layout";
 import { Spinner } from "@/components/spinner";
 import { usePostHog } from "@/utils/posthog";

apps/web/src/pages/auth/login.tsx

@@ -5,6 +5,7 @@ import {
 } from "@rallly/backend/next";
 import { decryptToken } from "@rallly/backend/session";
 import { prisma } from "@rallly/database";
+import CheckCircle from "@rallly/icons/check-circle.svg";
 import clsx from "clsx";
 import { GetServerSideProps } from "next";
 import Link from "next/link";
@@ -12,7 +13,6 @@ import { useRouter } from "next/router";
 import { Trans, useTranslation } from "next-i18next";
 import React from "react";
 
-import CheckCircle from "@/components/icons/check-circle.svg";
 import { AuthLayout } from "@/components/layouts/auth-layout";
 import { Spinner } from "@/components/spinner";
 import { withPageTranslations } from "@/utils/with-page-translations";

packages/components/index.ts

@@ -0,0 +1,2 @@
+const components = {};
+export default components;

packages/components/package.json

@@ -0,0 +1,10 @@
+{
+  "name": "@rallly/components",
+  "version": "0.0.0",
+  "private": true,
+  "main": "index.ts",
+  "types": "index.ts",
+  "dependencies": {
+    "@rallly/icons": "0.0.0"
+  }
+}

packages/components/tsconfig.json

@@ -0,0 +1,24 @@
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@/components/*": ["legacy/*"],
+      "~/*": ["./*"]
+    },
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "noEmit": true,
+    "incremental": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve"
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
+  "exclude": ["node_modules", "**/*.js"]
+}

packages/icons/index.ts

@@ -0,0 +1,2 @@
+const icons = {};
+export default icons;

packages/icons/package.json

@@ -0,0 +1,7 @@
+{
+  "name": "@rallly/icons",
+  "version": "0.0.0",
+  "private": true,
+  "main": "index.ts",
+  "types": "index.ts"
+}