chore: import all icons from direct paths

next.config.js

@@ -94,8 +94,6 @@ const nextConfig = {
   experimental: {
     scrollRestoration: true,
     optimizePackageImports: [
-      "@phosphor-icons/react",
-      "@phosphor-icons/react/dist/ssr",
       "@fuels/react",
       "fuels",
     ],

src/app/explorer/_components/Explorer.tsx

@@ -4,7 +4,7 @@ import { walletSelectorModalAtom } from "@/components/Providers/atoms"
 import { Button } from "@/components/ui/Button"
 import { Card } from "@/components/ui/Card"
 import { useUserPublic } from "@/hooks/useUserPublic"
-import { SignIn } from "@phosphor-icons/react"
+import { SignIn } from "@phosphor-icons/react/SignIn"
 import { GuildSearchBar } from "app/explorer/_components/GuildSearchBar"
 import { YourGuilds } from "app/explorer/_components/YourGuilds"
 import useIsStuck from "hooks/useIsStuck"

src/app/explorer/_components/GuildInfiniteScroll.tsx

@@ -1,7 +1,7 @@
 "use client"
 
 import { GuildCardSkeleton, GuildCardWithLink } from "@/components/GuildCard"
-import { Spinner } from "@phosphor-icons/react"
+import { Spinner } from "@phosphor-icons/react/Spinner"
 import useUser from "components/[guild]/hooks/useUser"
 import { env } from "env"
 import { useFetcherWithSign } from "hooks/useFetcherWithSign"

src/app/explorer/_components/GuildSearchBar.tsx

@@ -1,7 +1,9 @@
 "use client"
 
 import { usePrevious } from "@/hooks/usePrevious"
-import { MagnifyingGlass, PushPin, Sparkle } from "@phosphor-icons/react"
+import { MagnifyingGlass } from "@phosphor-icons/react/MagnifyingGlass"
+import { PushPin } from "@phosphor-icons/react/PushPin"
+import { Sparkle } from "@phosphor-icons/react/Sparkle"
 import { ActiveSection } from "app/explorer/types"
 import useDebouncedState from "hooks/useDebouncedState"
 import { usePathname, useRouter, useSearchParams } from "next/navigation"

src/app/explorer/_components/StickyBar.tsx

@@ -5,7 +5,7 @@ import { Anchor } from "@/components/ui/Anchor"
 import { Button, buttonVariants } from "@/components/ui/Button"
 import { ToggleGroup, ToggleGroupItem } from "@/components/ui/ToggleGroup"
 import { cn } from "@/lib/utils"
-import { Plus } from "@phosphor-icons/react"
+import { Plus } from "@phosphor-icons/react/Plus"
 import useIsStuck from "hooks/useIsStuck"
 import useScrollspy from "hooks/useScrollSpy"
 import { useAtom, useAtomValue, useSetAtom } from "jotai"

src/components/[guild]/AccessHub/AccessHub.tsx

@@ -7,7 +7,7 @@ import {
   SimpleGrid,
   Stack,
 } from "@chakra-ui/react"
-import { StarHalf } from "@phosphor-icons/react"
+import { StarHalf } from "@phosphor-icons/react/StarHalf"
 import Card from "components/common/Card"
 import ClientOnly from "components/common/ClientOnly"
 import useMembership from "components/explorer/hooks/useMembership"

src/components/[guild]/AccessHub/components/CampaignCards/CampaignCards.tsx

@@ -6,7 +6,8 @@ import {
   Text,
   useColorModeValue,
 } from "@chakra-ui/react"
-import { ArrowRight, Plus } from "@phosphor-icons/react"
+import { ArrowRight } from "@phosphor-icons/react/ArrowRight"
+import { Plus } from "@phosphor-icons/react/Plus"
 import useGuild from "components/[guild]/hooks/useGuild"
 import useGuildPermission from "components/[guild]/hooks/useGuildPermission"
 import Button from "components/common/Button"

src/components/[guild]/AccessHub/components/CampaignCards/components/CampaignCardMenu.tsx

@@ -9,7 +9,8 @@ import {
   useColorModeValue,
   useDisclosure,
 } from "@chakra-ui/react"
-import { PencilSimple, TrashSimple } from "@phosphor-icons/react"
+import { PencilSimple } from "@phosphor-icons/react/PencilSimple"
+import { TrashSimple } from "@phosphor-icons/react/TrashSimple"
 import PlatformCardMenu from "components/[guild]/RolePlatforms/components/PlatformCard/components/PlatformCardMenu"
 import Button from "components/common/Button"
 import { Alert } from "components/common/Modal"

src/components/[guild]/AccessHub/components/EditRewardAvailabilityMenuItem.tsx

@@ -1,5 +1,5 @@
 import { MenuItem, useDisclosure } from "@chakra-ui/react"
-import { Clock } from "@phosphor-icons/react"
+import { Clock } from "@phosphor-icons/react/Clock"
 import EditRewardAvailabilityModal from "components/[guild]/RolePlatforms/components/EditRewardAvailabilityModal"
 import useGuild from "components/[guild]/hooks/useGuild"
 import useToast from "hooks/useToast"

src/components/[guild]/AccessHub/components/GuildPinRewardCard.tsx

@@ -1,5 +1,6 @@
 import { Icon, Tooltip, useColorModeValue } from "@chakra-ui/react"
-import { CircleWavyCheck, Question } from "@phosphor-icons/react"
+import { Question } from "@phosphor-icons/react/Question"
+import { SealCheck } from "@phosphor-icons/react/SealCheck"
 import { useMintGuildPinContext } from "components/[guild]/Requirements/components/GuildCheckout/MintGuildPinContext"
 import useGuild from "components/[guild]/hooks/useGuild"
 import useGuildPermission from "components/[guild]/hooks/useGuildPermission"
@@ -31,7 +32,7 @@ const GuildPinRewardCard = () => {
       data-test="guild-pin-reward-card"
       label={
         <>
-          <Icon as={CircleWavyCheck} mb="-2px" mr="1.5" />
+          <Icon as={SealCheck} mb="-2px" mr="1.5" />
           Guild.xyz
           <Tooltip label="This is a built in reward by Guild.xyz" hasArrow>
             <Icon as={Question} mb="-2px" ml="1.5" />

src/components/[guild]/AccessHub/components/PlatformAccessButton.tsx

@@ -1,5 +1,5 @@
 import { Icon } from "@chakra-ui/react"
-import { ArrowSquareOut } from "@phosphor-icons/react"
+import { ArrowSquareOut } from "@phosphor-icons/react/ArrowSquareOut"
 import Button from "components/common/Button"
 import rewards from "rewards"
 import { GuildPlatform, PlatformType } from "types"

src/components/[guild]/AccessHub/components/RemovePlatformMenuItem.tsx

@@ -1,5 +1,5 @@
 import { MenuItem, useColorModeValue, useDisclosure } from "@chakra-ui/react"
-import { TrashSimple } from "@phosphor-icons/react"
+import { TrashSimple } from "@phosphor-icons/react/TrashSimple"
 import useRemoveGuildPlatform from "components/[guild]/AccessHub/hooks/useRemoveGuildPlatform"
 import { AlreadyGrantedAccessesWillRemainInfo } from "components/[guild]/RolePlatforms/components/RemovePlatformButton/RemovePlatformButton"
 import useGuild from "components/[guild]/hooks/useGuild"

src/components/[guild]/AddAndOrderRoles/AddAndOrderRoles.tsx

@@ -9,7 +9,9 @@ import {
   MenuList,
   useDisclosure,
 } from "@chakra-ui/react"
-import { CaretDown, ListNumbers, Plus } from "@phosphor-icons/react"
+import { CaretDown } from "@phosphor-icons/react/CaretDown"
+import { ListNumbers } from "@phosphor-icons/react/ListNumbers"
+import { Plus } from "@phosphor-icons/react/Plus"
 import Button from "components/common/Button"
 import useIsStuck from "hooks/useIsStuck"
 import { useEffect, useRef } from "react"

src/components/[guild]/AddAndOrderRoles/components/DraggableRoleCard.tsx

@@ -1,5 +1,5 @@
 import { HStack, Heading, Icon, Spacer } from "@chakra-ui/react"
-import { DotsSixVertical } from "@phosphor-icons/react"
+import { DotsSixVertical } from "@phosphor-icons/react/DotsSixVertical"
 import MemberCount from "components/[guild]/RoleCard/components/MemberCount"
 import Visibility from "components/[guild]/Visibility"
 import Card from "components/common/Card"

src/components/[guild]/AddRewardAndCampaign.tsx

@@ -12,7 +12,8 @@ import {
   Text,
   useDisclosure,
 } from "@chakra-ui/react"
-import { CaretDown, Plus } from "@phosphor-icons/react"
+import { CaretDown } from "@phosphor-icons/react/CaretDown"
+import { Plus } from "@phosphor-icons/react/Plus"
 import CreateCampaignModal from "components/[guild]/CreateCampaignModal"
 import AddSolutionsButton from "solutions/components/AddSolutionsButton"
 import { useIsTabsStuck } from "./Tabs"

src/components/[guild]/AddRewardButton/AddRewardButton.tsx

@@ -1,6 +1,6 @@
 import { ModalOverlay, useDisclosure } from "@chakra-ui/react"
 import { Schemas, Visibility } from "@guildxyz/types"
-import { Plus } from "@phosphor-icons/react"
+import { Plus } from "@phosphor-icons/react/Plus"
 import Button from "components/common/Button"
 import DiscardAlert from "components/common/DiscardAlert"
 import { Modal } from "components/common/Modal"

src/components/[guild]/AddRewardButton/SelectRolePanel.tsx

@@ -13,7 +13,8 @@ import {
   useColorModeValue,
 } from "@chakra-ui/react"
 import { Visibility } from "@guildxyz/types"
-import { ArrowLeft, Info } from "@phosphor-icons/react"
+import { ArrowLeft } from "@phosphor-icons/react/ArrowLeft"
+import { Info } from "@phosphor-icons/react/Info"
 import Button from "components/common/Button"
 import useJsConfetti from "components/create-guild/hooks/useJsConfetti"
 import useCreateRRR, { SubmitData } from "hooks/useCreateRRR"

src/components/[guild]/CollapsibleRoleSection.tsx

@@ -1,6 +1,6 @@
 import { Box, Button, Collapse, Icon, Stack, useDisclosure } from "@chakra-ui/react"
 
-import { CaretDown } from "@phosphor-icons/react"
+import { CaretDown } from "@phosphor-icons/react/CaretDown"
 import capitalize from "utils/capitalize"
 
 const CollapsibleRoleSection = ({

src/components/[guild]/CreateCampaignModal/CreateCampaignModal.tsx

@@ -6,7 +6,7 @@ import {
   ModalHeader,
   ModalOverlay,
 } from "@chakra-ui/react"
-import { ArrowRight } from "@phosphor-icons/react"
+import { ArrowRight } from "@phosphor-icons/react/ArrowRight"
 import Button from "components/common/Button"
 import { Modal } from "components/common/Modal"
 import usePinata from "hooks/usePinata"

src/components/[guild]/CreateFormModal/components/FormCardEditable/FormCardEditable.tsx

@@ -14,7 +14,9 @@ import {
   Tooltip,
 } from "@chakra-ui/react"
 import { Schemas } from "@guildxyz/types"
-import { DotsSixVertical, PencilSimple, Trash } from "@phosphor-icons/react"
+import { DotsSixVertical } from "@phosphor-icons/react/DotsSixVertical"
+import { PencilSimple } from "@phosphor-icons/react/PencilSimple"
+import { Trash } from "@phosphor-icons/react/Trash"
 import { CreateForm } from "components/[guild]/RolePlatforms/components/AddRoleRewardModal/components/AddFormPanel"
 import Button from "components/common/Button"
 import Card from "components/common/Card"

src/components/[guild]/CreateFormModal/components/Setup/OptionLayout.tsx

@@ -7,7 +7,7 @@ import {
   Icon,
   useColorModeValue,
 } from "@chakra-ui/react"
-import { DotsSixVertical } from "@phosphor-icons/react"
+import { DotsSixVertical } from "@phosphor-icons/react/DotsSixVertical"
 import { Reorder, useDragControls } from "framer-motion"
 import { PropsWithChildren, ReactNode } from "react"
 import { Rest } from "types"

src/components/[guild]/CreateFormModal/components/Setup/RemoveButton.tsx

@@ -1,5 +1,5 @@
 import { IconButton, IconButtonProps } from "@chakra-ui/react"
-import { X } from "@phosphor-icons/react"
+import { X } from "@phosphor-icons/react/X"
 
 const RemoveButton = (
   props: Omit<

src/components/[guild]/CreateFormModal/formConfig.tsx

@@ -1,11 +1,9 @@
 import { Schemas } from "@guildxyz/types"
-import {
-  CheckSquare,
-  NumberCircleFive,
-  NumberSquareFive,
-  RadioButton,
-  Textbox,
-} from "@phosphor-icons/react"
+import { CheckSquare } from "@phosphor-icons/react/CheckSquare"
+import { NumberCircleFive } from "@phosphor-icons/react/NumberCircleFive"
+import { NumberSquareFive } from "@phosphor-icons/react/NumberSquareFive"
+import { RadioButton } from "@phosphor-icons/react/RadioButton"
+import { Textbox } from "@phosphor-icons/react/Textbox"
 import OptionIcon from "components/common/StyledSelect/components/CustomSelectOption/components/OptionIcon"
 import { ComponentType, ReactNode } from "react"
 import {

src/components/[guild]/DeleteButton.tsx

@@ -1,5 +1,5 @@
 import { ButtonProps, Icon, IconButton, Tooltip } from "@chakra-ui/react"
-import { Trash } from "@phosphor-icons/react"
+import { Trash } from "@phosphor-icons/react/Trash"
 import { PropsWithChildren } from "react"
 
 type Props = {

src/components/[guild]/DiscordBotPermissionsChecker.tsx

@@ -11,7 +11,8 @@ import {
   UnorderedList,
   useDisclosure,
 } from "@chakra-ui/react"
-import { ArrowSquareOut, Info } from "@phosphor-icons/react"
+import { ArrowSquareOut } from "@phosphor-icons/react/ArrowSquareOut"
+import { Info } from "@phosphor-icons/react/Info"
 import Button from "components/common/Button"
 import DiscordRoleVideo from "components/common/DiscordRoleVideo"
 import { Modal } from "components/common/Modal"

src/components/[guild]/EditGuild/EditGuildButton.tsx

@@ -1,5 +1,5 @@
 import { IconButton } from "@chakra-ui/react"
-import { GearSix } from "@phosphor-icons/react"
+import { GearSix } from "@phosphor-icons/react/GearSix"
 import { useThemeContext } from "../ThemeContext"
 import { useEditGuildDrawer } from "./EditGuildDrawerContext"
 

src/components/[guild]/EditGuild/components/Admins/components/AdminSelect.tsx

@@ -1,5 +1,5 @@
 import { HStack, Icon, forwardRef } from "@chakra-ui/react"
-import { Warning } from "@phosphor-icons/react"
+import { Warning } from "@phosphor-icons/react/Warning"
 import {
   CreatableSelect,
   GroupBase,

src/components/[guild]/EditGuild/components/BackgroundImageUploader.tsx

@@ -1,5 +1,5 @@
 import { FormControl, FormLabel, Progress, Wrap } from "@chakra-ui/react"
-import { File } from "@phosphor-icons/react"
+import { File } from "@phosphor-icons/react/File"
 import { useThemeContext } from "components/[guild]/ThemeContext"
 import Button from "components/common/Button"
 import FormErrorMessage from "components/common/FormErrorMessage"

src/components/[guild]/EditGuild/components/ColorPicker.tsx

@@ -8,7 +8,7 @@ import {
   VStack,
   useColorModeValue,
 } from "@chakra-ui/react"
-import { Palette } from "@phosphor-icons/react"
+import { Palette } from "@phosphor-icons/react/Palette"
 import Color from "color"
 import { useThemeContext } from "components/[guild]/ThemeContext"
 import FormErrorMessage from "components/common/FormErrorMessage"

src/components/[guild]/EditGuild/components/Events/Events.tsx

@@ -1,5 +1,5 @@
 import { Icon, Img, SimpleGrid, Text } from "@chakra-ui/react"
-import { Plus } from "@phosphor-icons/react"
+import { Plus } from "@phosphor-icons/react/Plus"
 import StyledSelect from "components/common/StyledSelect"
 import { useFormContext, useWatch } from "react-hook-form"
 import { EventSourcesKey, SelectOption } from "types"

src/components/[guild]/EditGuild/components/RemoveBackgroundImage.tsx

@@ -1,5 +1,5 @@
 import { Icon } from "@chakra-ui/react"
-import { X } from "@phosphor-icons/react"
+import { X } from "@phosphor-icons/react/X"
 import { useThemeContext } from "components/[guild]/ThemeContext"
 import Button from "components/common/Button"
 import { useFormContext } from "react-hook-form"

src/components/[guild]/EditGuild/components/SocialLinks.tsx

@@ -10,7 +10,7 @@ import {
   SimpleGrid,
 } from "@chakra-ui/react"
 import { SocialLinks as SocialLinksType } from "@guildxyz/types"
-import { Plus } from "@phosphor-icons/react"
+import { Plus } from "@phosphor-icons/react/Plus"
 import SocialIcon from "components/[guild]/SocialIcon"
 import FormErrorMessage from "components/common/FormErrorMessage"
 import StyledSelect from "components/common/StyledSelect"

src/components/[guild]/Events/EventCard/components/EventInfo.tsx

@@ -1,5 +1,6 @@
 import { HStack, StackProps, Tag, TagLabel, TagLeftIcon } from "@chakra-ui/react"
-import { Clock, Users } from "@phosphor-icons/react"
+import { Clock } from "@phosphor-icons/react/Clock"
+import { Users } from "@phosphor-icons/react/Users"
 
 type Props = {
   startDate: number

src/components/[guild]/Events/EventCard/components/JoinEventButton.tsx

@@ -1,6 +1,6 @@
 import { usePostHogContext } from "@/components/Providers/PostHogProvider"
 import { ButtonProps } from "@chakra-ui/react"
-import { ArrowSquareOut } from "@phosphor-icons/react"
+import { ArrowSquareOut } from "@phosphor-icons/react/ArrowSquareOut"
 import Button from "components/common/Button"
 import useColorPalette from "hooks/useColorPalette"
 import { EventSourcesKey } from "types"

src/components/[guild]/Events/FallbackFrame.tsx

@@ -1,5 +1,5 @@
 import { Icon, Spinner, Text } from "@chakra-ui/react"
-import { IconProps } from "@phosphor-icons/react"
+import type { IconProps } from "@phosphor-icons/react"
 import Card from "components/common/Card"
 import { ForwardRefExoticComponent } from "react"
 

src/components/[guild]/JoinModal/JoinModal.tsx

@@ -12,7 +12,7 @@ import {
   Text,
   VStack,
 } from "@chakra-ui/react"
-import { ArrowRight } from "@phosphor-icons/react"
+import { ArrowRight } from "@phosphor-icons/react/ArrowRight"
 import useGuild from "components/[guild]/hooks/useGuild"
 import Button from "components/common/Button"
 import { Modal } from "components/common/Modal"

src/components/[guild]/JoinModal/components/CompleteCaptchaJoinStep.tsx

@@ -1,6 +1,6 @@
 import { useWeb3ConnectionManager } from "@/components/Web3ConnectionManager/hooks/useWeb3ConnectionManager"
 import { Icon, useDisclosure } from "@chakra-ui/react"
-import { Robot } from "@phosphor-icons/react"
+import { Robot } from "@phosphor-icons/react/Robot"
 import useSWRWithOptionalAuth from "hooks/useSWRWithOptionalAuth"
 import { CompleteCaptchaModal } from "requirements/Captcha/components/CompleteCaptcha"
 import JoinStep from "./JoinStep"

src/components/[guild]/JoinModal/components/ConnectEmailJoinStep.tsx

@@ -1,7 +1,7 @@
 import { ConnectEmailButton } from "@/components/Account/components/AccountModal/components/EmailAddress"
 import { cn } from "@/lib/utils"
 import { Tooltip } from "@chakra-ui/react"
-import { EnvelopeSimple } from "@phosphor-icons/react"
+import { EnvelopeSimple } from "@phosphor-icons/react/EnvelopeSimple"
 import useUser from "components/[guild]/hooks/useUser"
 import { useAccount } from "wagmi"
 import { JoinStepUI } from "./JoinStep"

src/components/[guild]/JoinModal/components/JoinStepIndicator.tsx

@@ -5,7 +5,8 @@ import {
   Spinner,
   useColorModeValue,
 } from "@chakra-ui/react"
-import { Check, X } from "@phosphor-icons/react"
+import { Check } from "@phosphor-icons/react/Check"
+import { X } from "@phosphor-icons/react/X"
 
 export type JoinStepIndicatorProps =
   | { status: "INACTIVE" | "DONE" | "NO_ACCESS" | "LOADING" }

src/components/[guild]/JoinModal/components/ShareSocialsCheckbox.tsx

@@ -1,6 +1,6 @@
 import { usePostHogContext } from "@/components/Providers/PostHogProvider"
 import { Checkbox, Icon, Link, Text } from "@chakra-ui/react"
-import { ArrowSquareOut } from "@phosphor-icons/react"
+import { ArrowSquareOut } from "@phosphor-icons/react/ArrowSquareOut"
 import { useFormContext } from "react-hook-form"
 
 const ShareSocialsCheckbox = (): JSX.Element => {

src/components/[guild]/JoinModal/components/WalletAuthButton.tsx

@@ -1,6 +1,7 @@
 import { walletSelectorModalAtom } from "@/components/Providers/atoms"
 import { useWeb3ConnectionManager } from "@/components/Web3ConnectionManager/hooks/useWeb3ConnectionManager"
-import { SignIn, Wallet } from "@phosphor-icons/react"
+import { SignIn } from "@phosphor-icons/react/SignIn"
+import { Wallet } from "@phosphor-icons/react/Wallet"
 import { useSetAtom } from "jotai"
 import shortenHex from "utils/shortenHex"
 import JoinStep from "./JoinStep"

src/components/[guild]/JoinModal/hooks/useJoin.tsx

@@ -1,5 +1,5 @@
 import { JoinJob } from "@guildxyz/types"
-import { CircleWavyCheck } from "@phosphor-icons/react"
+import { SealCheck } from "@phosphor-icons/react/SealCheck"
 import { GUILD_PIN_MAINTENANCE } from "components/[guild]/Requirements/components/GuildCheckout/MintGuildPin/MintGuildPin"
 import { useMintGuildPinContext } from "components/[guild]/Requirements/components/GuildCheckout/MintGuildPinContext"
 import useGuild from "components/[guild]/hooks/useGuild"
@@ -44,7 +44,7 @@ const useJoin = ({ onSuccess, onError }: UseSubmitOptions<JoinJob>) => {
             title: "Successfully joined guild",
             description: "Let others know as well by minting it onchain",
             buttonProps: {
-              leftIcon: <CircleWavyCheck weight="fill" />,
+              leftIcon: <SealCheck weight="fill" />,
               children: "Mint Guild Pin",
               onClick: onOpen,
             },

src/components/[guild]/LeaveButton/LeaveButton.tsx

@@ -8,7 +8,7 @@ import {
   Tooltip,
   useDisclosure,
 } from "@chakra-ui/react"
-import { SignOut } from "@phosphor-icons/react"
+import { SignOut } from "@phosphor-icons/react/SignOut"
 import useGuild from "components/[guild]/hooks/useGuild"
 import Button from "components/common/Button"
 import { Alert } from "components/common/Modal"

src/components/[guild]/Members/components/Member.tsx

@@ -1,5 +1,5 @@
 import { Icon, Text, Tooltip, VStack } from "@chakra-ui/react"
-import { Crown } from "@phosphor-icons/react"
+import { Crown } from "@phosphor-icons/react/Crown"
 import GuildAvatar from "components/common/GuildAvatar"
 import useResolveAddress from "hooks/useResolveAddress"
 import shortenHex from "utils/shortenHex"