chore: Move icons from ui package to icons package

apps/studio/components/interfaces/Realtime/Inspector/MessagesTable.tsx

@@ -1,14 +1,15 @@
 import { useParams, useTelemetryProps } from 'common'
 import { isEqual } from 'lodash'
-import { ExternalLink, Loader2, Megaphone, MegaphoneIcon } from 'lucide-react'
+import { ExternalLink, Loader2, Megaphone } from 'lucide-react'
 import Link from 'next/link'
 import { useEffect, useState } from 'react'
 import DataGrid, { Row } from 'react-data-grid'
-import { Button, IconBroadcast, IconDatabaseChanges, IconPresence, cn } from 'ui'
 
 import ShimmerLine from 'components/ui/ShimmerLine'
+import { Broadcast, DatabaseChanges, Presence } from 'icons'
 import Telemetry from 'lib/telemetry'
 import { useRouter } from 'next/router'
+import { Button, cn } from 'ui'
 import MessageSelection from './MessageSelection'
 import type { LogData } from './Messages.types'
 import NoChannelEmptyState from './NoChannelEmptyState'
@@ -40,7 +41,7 @@ const NoResultAlert = ({
 
           <div className="mt-4 border bg-surface-100 border-border rounded-md justify-start items-center flex flex-col w-full">
             <div className="w-full px-5 py-4 items-center gap-4 inline-flex border-b">
-              <IconBroadcast size="xlarge" className="text-background bg-foreground rounded w-6" />
+              <Broadcast size="xlarge" className="text-background bg-foreground rounded w-6" />
               <div className="grow flex-col flex">
                 <p className="text-foreground">Create a Broadcast message</p>
                 <p className="text-foreground-lighter text-xs">Send a message in the channel</p>
@@ -50,7 +51,7 @@ const NoResultAlert = ({
               </Button>
             </div>
             <div className="w-full px-5 py-4 items-center gap-4 inline-flex border-b">
-              <IconPresence size="xlarge" className="text-background bg-foreground rounded w-6" />
+              <Presence size="xlarge" className="text-background bg-foreground rounded w-6" />
               <div className="grow flex-col flex">
                 <p className="text-foreground">Join from another browser tab</p>
                 <p className="text-foreground-lighter text-xs">
@@ -65,7 +66,7 @@ const NoResultAlert = ({
             </div>
 
             <div className="w-full px-5 py-4 items-center gap-4 inline-flex border-b">
-              <IconDatabaseChanges
+              <DatabaseChanges
                 size="xlarge"
                 className="text-background bg-foreground rounded w-6"
               />

apps/studio/components/interfaces/Realtime/Inspector/RealtimeFilterPopover/index.tsx

@@ -6,9 +6,6 @@ import { Dispatch, SetStateAction, useState } from 'react'
 import {
   Badge,
   Button,
-  IconBroadcast,
-  IconDatabaseChanges,
-  IconPresence,
   Input,
   PopoverContent_Shadcn_,
   PopoverTrigger_Shadcn_,
@@ -17,6 +14,7 @@ import {
   cn,
 } from 'ui'
 
+import { Broadcast, DatabaseChanges, Presence } from 'icons'
 import Telemetry from 'lib/telemetry'
 import ConfirmationModal from 'ui-patterns/Dialogs/ConfirmationModal'
 import { RealtimeConfig } from '../useRealtimeMessages'
@@ -74,10 +72,7 @@ export const RealtimeFilterPopover = ({ config, onChangeConfig }: RealtimeFilter
           <div className="py-3 px-4 border-b border-overlay">
             <div className="flex items-center justify-between gap-2">
               <div className="flex gap-2.5 items-center">
-                <IconPresence
-                  size="xlarge"
-                  className="bg-foreground rounded text-background-muted"
-                />
+                <Presence size="xlarge" className="bg-foreground rounded text-background-muted" />
                 <label htmlFor="toggle-presence" className="text-sm">
                   Presence
                 </label>
@@ -98,10 +93,7 @@ export const RealtimeFilterPopover = ({ config, onChangeConfig }: RealtimeFilter
           <div className="py-3 px-4 border-b border-overlay">
             <div className="flex items-center justify-between">
               <div className="flex gap-2.5 items-center">
-                <IconBroadcast
-                  size="xlarge"
-                  className="bg-foreground rounded text-background-muted"
-                />
+                <Broadcast size="xlarge" className="bg-foreground rounded text-background-muted" />
                 <label htmlFor="toggle-broadcast" className="text-sm">
                   Broadcast
                 </label>
@@ -122,7 +114,7 @@ export const RealtimeFilterPopover = ({ config, onChangeConfig }: RealtimeFilter
           <div className="py-3 px-4 border-b border-overlay">
             <div className="flex items-center justify-between">
               <div className="flex gap-2.5 items-center">
-                <IconDatabaseChanges
+                <DatabaseChanges
                   size="xlarge"
                   className="bg-foreground rounded text-background-muted"
                 />

apps/studio/components/interfaces/Realtime/Inspector/RealtimeMessageColumnRenderer.tsx

@@ -1,15 +1,16 @@
+import { AlertTriangle } from 'lucide-react'
 import { Column } from 'react-data-grid'
-import { cn, IconBroadcast, IconDatabaseChanges, IconPresence } from 'ui'
 
-import { AlertTriangle } from 'lucide-react'
+import { Broadcast, DatabaseChanges, Presence } from 'icons'
+import { cn } from 'ui'
 import type { LogData, PreviewLogData } from './Messages.types'
 import { RowLayout } from './MessagesFormatters'
 import { isErrorLog } from './MessagesTable'
 
 const ICONS = {
-  PRESENCE: <IconPresence size="xlarge" />,
-  BROADCAST: <IconBroadcast size="xlarge" />,
-  POSTGRES: <IconDatabaseChanges size="xlarge" />,
+  PRESENCE: <Presence size="xlarge" />,
+  BROADCAST: <Broadcast size="xlarge" />,
+  POSTGRES: <DatabaseChanges size="xlarge" />,
   SYSTEM: <AlertTriangle size="20" strokeWidth={1} />,
 }
 

apps/www/components/Blog/ShareArticleActions.tsx

@@ -1,5 +1,5 @@
+import { Linkedin, Twitter, YCombinator } from 'icons'
 import Link from 'next/link'
-import { IconLinkedinSolid, IconTwitterX, IconYCombinator } from 'ui'
 
 const ShareArticleActions = ({
   title,
@@ -23,7 +23,7 @@ const ShareArticleActions = ({
         target="_blank"
         className="text-foreground-lighter hover:text-foreground"
       >
-        <IconTwitterX size={iconSize} />
+        <Twitter size={iconSize} />
       </Link>
 
       <Link
@@ -32,15 +32,15 @@ const ShareArticleActions = ({
         target="_blank"
         className="text-foreground-lighter hover:text-foreground"
       >
-        <IconLinkedinSolid size={iconSize} />
+        <Linkedin size={iconSize} />
       </Link>
       <Link
         aria-label="Share on Hacker News"
         href={`https://news.ycombinator.com/submitlink?u=${permalink}&t=${encodedTitle}`}
         target="_blank"
         className="text-foreground-lighter hover:text-foreground"
       >
-        <IconYCombinator size={iconSize} />
+        <YCombinator size={iconSize} />
       </Link>
     </div>
   )

apps/www/components/BuiltWithSupabase.tsx

@@ -1,10 +1,10 @@
-import { Button, IconGitHubSolid } from 'ui'
 import Link from 'next/link'
-
-import SectionContainer from '~/components/Layouts/SectionContainer'
-import ExampleCard from './ExampleCard'
+import { Button } from 'ui'
 
 import Examples from 'data/Examples'
+import { Github } from 'icons'
+import ExampleCard from './ExampleCard'
+import SectionContainer from './Layouts/SectionContainer'
 
 const BuiltWithSupabase = () => {
   return (
@@ -18,12 +18,7 @@ const BuiltWithSupabase = () => {
           <Button asChild type="default" size="small" className="h-full">
             <Link href="/docs/guides/examples">View all examples</Link>
           </Button>
-          <Button
-            asChild
-            type="default"
-            icon={<IconGitHubSolid size="tiny" className="!w-full !h-full" />}
-            size="small"
-          >
+          <Button asChild type="default" icon={<Github size="tiny" />} size="small">
             <Link href="https://github.com/supabase/supabase/tree/master/examples">
               Official GitHub library
             </Link>

apps/www/components/Footer/index.tsx

@@ -2,12 +2,13 @@ import { CheckIcon } from '@heroicons/react/outline'
 import Image from 'next/image'
 import Link from 'next/link'
 import { useRouter } from 'next/router'
-import { Badge, IconDiscord, IconGitHubSolid, IconTwitterX, IconYoutubeSolid, cn } from 'ui'
+import { Badge, cn } from 'ui'
 import SectionContainer from '../Layouts/SectionContainer'
 
 import * as supabaseLogoWordmarkDark from 'common/assets/images/supabase-logo-wordmark--dark.png'
 import * as supabaseLogoWordmarkLight from 'common/assets/images/supabase-logo-wordmark--light.png'
 import footerData from 'data/Footer'
+import { Discord, Github, Twitter, Youtube } from 'icons'
 import { ThemeToggle } from 'ui-patterns/ThemeToggle'
 import useDarkLaunchWeeks from '../../hooks/useDarkLaunchWeeks'
 
@@ -88,31 +89,31 @@ const Footer = (props: Props) => {
                 className="text-foreground-lighter hover:text-foreground transition"
               >
                 <span className="sr-only">Twitter</span>
-                <IconTwitterX size={22} />
+                <Twitter size={22} />
               </a>
 
               <a
                 href="https://github.com/supabase"
                 className="text-foreground-lighter hover:text-foreground transition"
               >
                 <span className="sr-only">GitHub</span>
-                <IconGitHubSolid size={22} />
+                <Github size={22} />
               </a>
 
               <a
                 href="https://discord.supabase.com/"
                 className="text-foreground-lighter hover:text-foreground transition"
               >
                 <span className="sr-only">Discord</span>
-                <IconDiscord size={22} />
+                <Discord size={22} />
               </a>
 
               <a
                 href="https://youtube.com/c/supabase"
                 className="text-foreground-lighter hover:text-foreground transition"
               >
                 <span className="sr-only">Youtube</span>
-                <IconYoutubeSolid size={22} />
+                <Youtube size={22} />
               </a>
             </div>
           </div>

apps/www/components/LaunchWeek/11/Releases/components/index.tsx

@@ -1,10 +1,11 @@
-import { useEffect, useState } from 'react'
-import { IconDocumentation, IconMicSolid, IconProductHunt, IconYoutubeSolid, cn } from 'ui'
 import { Music } from 'lucide-react'
-
 import Link from 'next/link'
-import { StepLink } from '../data/lw11_data'
+import { useEffect, useState } from 'react'
+
+import { Documentation, Mic, ProductHunt, Youtube } from 'icons'
+import { cn } from 'ui'
 import { ExpandableVideo } from 'ui-patterns/ExpandableVideo'
+import { StepLink } from '../data/lw11_data'
 
 interface DayLink extends StepLink {
   className?: string
@@ -21,27 +22,27 @@ export const DayLink = ({ type, icon, text, href = '', className }: DayLink) =>
 
   const linkTypes = {
     blog: {
-      icon: IconDocumentation,
+      icon: Documentation,
       text: 'Blog Post',
     },
     docs: {
-      icon: IconDocumentation,
+      icon: Documentation,
       text: 'Docs',
     },
     productHunt: {
-      icon: IconProductHunt,
+      icon: ProductHunt,
       text: 'Product Hunt',
     },
     video: {
-      icon: IconYoutubeSolid,
+      icon: Youtube,
       text: 'Watch video',
     },
     podcast: {
       icon: Music,
       text: 'Podcast',
     },
     xSpace: {
-      icon: IconMicSolid,
+      icon: Mic,
       text: 'X Space',
     },
   }

apps/www/components/LaunchWeek/12/Releases/components/index.tsx

@@ -1,10 +1,11 @@
-import { useEffect, useState } from 'react'
-import { IconDocumentation, IconMicSolid, IconProductHunt, IconYoutubeSolid, cn } from 'ui'
 import { Music } from 'lucide-react'
-
 import Link from 'next/link'
-import { StepLink } from '../data/lw12_data'
+import { useEffect, useState } from 'react'
+
+import { Documentation, Mic, ProductHunt, Youtube } from 'icons'
+import { cn } from 'ui'
 import { ExpandableVideo } from 'ui-patterns/ExpandableVideo'
+import { StepLink } from '../data/lw12_data'
 
 interface DayLink extends StepLink {
   className?: string
@@ -21,27 +22,27 @@ export const DayLink = ({ type, icon, text, href = '', className }: DayLink) =>
 
   const linkTypes = {
     blog: {
-      icon: IconDocumentation,
+      icon: Documentation,
       text: 'Blog Post',
     },
     docs: {
-      icon: IconDocumentation,
+      icon: Documentation,
       text: 'Docs',
     },
     productHunt: {
-      icon: IconProductHunt,
+      icon: ProductHunt,
       text: 'Product Hunt',
     },
     video: {
-      icon: IconYoutubeSolid,
+      icon: Youtube,
       text: 'Watch video',
     },
     podcast: {
       icon: Music,
       text: 'Podcast',
     },
     xSpace: {
-      icon: IconMicSolid,
+      icon: Mic,
       text: 'X Space',
     },
   }

apps/www/components/LaunchWeek/X/Releases/components/index.tsx

@@ -1,9 +1,10 @@
 import { useEffect, useState } from 'react'
-import { IconDocumentation, IconMicSolid, IconProductHunt, IconYoutubeSolid, cn } from 'ui'
 
+import { Documentation, Mic, ProductHunt, Youtube } from 'icons'
 import Link from 'next/link'
-import { StepLink } from '../data/lwx_data'
+import { cn } from 'ui'
 import { ExpandableVideo } from 'ui-patterns/ExpandableVideo'
+import { StepLink } from '../data/lwx_data'
 
 interface DayLink extends StepLink {
   className?: string
@@ -20,23 +21,23 @@ export const DayLink = ({ type, icon, text, href = '', className }: DayLink) =>
 
   const linkTypes = {
     blog: {
-      icon: IconDocumentation,
+      icon: Documentation,
       text: 'Blog Post',
     },
     docs: {
-      icon: IconDocumentation,
+      icon: Documentation,
       text: 'Docs',
     },
     productHunt: {
-      icon: IconProductHunt,
+      icon: ProductHunt,
       text: 'Product Hunt',
     },
     video: {
-      icon: IconYoutubeSolid,
+      icon: Youtube,
       text: 'Watch video',
     },
     xSpace: {
-      icon: IconMicSolid,
+      icon: Mic,
       text: 'X Space',
     },
   }