refactor: split icons to packages

.changeset/many-schools-reflect.md

@@ -0,0 +1,11 @@
+---
+"frog": minor
+---
+
+Split icons into different packages and reduces the bundle size by importing just one collection instead of all.
+Introduces a breaking change as afterwards icons must be imported as packages, rather than literal string.
+Specifically, the next subpackages were created:
+
+- `frog/ui/icons/heroicons`
+- `frog/ui/icons/lucide`
+- `frog/ui/icons/radix-icons`

playground/src/ui-system.tsx

@@ -1,5 +1,8 @@
 import { Button, Frog } from 'frog'
 import { serveStatic } from 'frog/serve-static'
+import { lucide } from 'frog/ui/icons/lucide'
+import { radixIcons } from 'frog/ui/icons/radix-icons'
+import { heroicons } from '../../src/_lib/ui/icons/heroicons/index.js'
 
 import {
   Box,
@@ -186,19 +189,19 @@ export const app = new Frog({
                 <Icon color="green800" name="zap" size="64" />
                 <Icon
                   color="green800"
-                  collection="lucide"
+                  collection={lucide}
                   name="zap"
                   size="64"
                 />
                 <Icon
                   color="green800"
-                  collection="heroicons"
+                  collection={heroicons}
                   name="bolt"
                   size="64"
                 />
                 <Icon
                   color="green800"
-                  collection="radix-icons"
+                  collection={radixIcons}
                   name="lightning-bolt"
                   size="64"
                 />

site/pages/ui/Icon.mdx

@@ -116,19 +116,20 @@ function Example() {
 
 ### `collection`
 
-Icon collection to use for resolving icons. Defaults to `'lucide'`.
+Icon collection to use for resolving icons. Defaults to `lucide` imported from `'frog/ui/icons/lucide'`.
 
 The following collections are available:
-- [Heroicons](https://heroicons.com)
-- [Lucide](https://lucide.dev)
-- [Radix Icons](https://www.radix-ui.com/icons)
+- [Heroicons - `frog/ui/icons/heroicons`](https://heroicons.com)
+- [Lucide - `frog/ui/icons/lucide`](https://lucide.dev)
+- [Radix Icons - `frog/ui/icons/radix-icons`](https://www.radix-ui.com/icons)
 
 Collection is mapped to the [`icons` property](/ui/ui-system#icons) on the UI System Variables.
 
 :::code-group
 ```tsx twoslash [Code]
 /** @jsxImportSource frog/jsx */
 import { createSystem } from 'frog/ui'
+import { heroicons } from 'frog/ui/icons/heroicons' // [!code focus]
 
 const { Icon } = createSystem()
 
@@ -137,7 +138,7 @@ function Example() {
 // ---cut---
 <Icon
   name="bolt"
-  collection="heroicons" // [!code focus]
+  collection={heroicons} // [!code focus]
 // ^?
 />
 

site/pages/ui/createSystem.mdx

@@ -159,8 +159,8 @@ export const system = createSystem({
 
 ### icons
 
-- **Type:** `'heroicons' | 'lucide' | 'radix-icons'`
-- **Default:** `'lucide'`
+- **Type:** `Record<string, string>`
+- **Default:** `frog/ui/icons/lucide`
 
 Icon collection to use for resolving icons. The following collections are available:
 
@@ -170,9 +170,10 @@ Icon collection to use for resolving icons. The following collections are availa
 
 ```tsx twoslash
 import { createSystem } from 'frog/ui'
+import { lucide } from 'frog/ui/icons/lucide' // [!code focus]
 // ---cut---
 export const system = createSystem({
-  icons: 'lucide', // [!code focus]
+  icons: lucide, // [!code focus]
 })
 ```
 

site/pages/ui/ui-system.mdx

@@ -270,9 +270,10 @@ The `icons` variable is used to set the icon collection for the [`<Icon>` compon
 /** @jsxImportSource frog/jsx */
 // ---cut---
 import { createSystem } from 'frog/ui'
+import { lucide } from 'frog/ui/icons/lucide'
 
 const { Icon } = createSystem({
-  icons: 'lucide',
+  icons: lucide,
 })
 
 function Example() {

src/package.json

@@ -68,6 +68,18 @@
       "types": "./_lib/ui/index.d.ts",
       "default": "./_lib/ui/index.js"
     },
+    "./ui/icons/heroicons": {
+      "types": "./_lib/ui/icons/heroicons/index.d.ts",
+      "default": "./_lib/ui/icons/heroicons/index.js"
+    },
+    "./ui/icons/lucide": {
+      "types": "./_lib/ui/icons/lucide/index.d.ts",
+      "default": "./_lib/ui/icons/lucide/index.js"
+    },
+    "./ui/icons/radix-icons": {
+      "types": "./_lib/ui/icons/radix-icons/index.d.ts",
+      "default": "./_lib/ui/icons/radix-icons/index.js"
+    },
     "./vercel": {
       "types": "./_lib/vercel/index.d.ts",
       "default": "./_lib/vercel/index.js"

src/ui/Icon.tsx

@@ -1,5 +1,5 @@
 import { Box, type BoxProps, resolveColorToken } from './Box.js'
-import { icons } from './icons.js'
+import { lucide } from './icons/lucide/index.js'
 import { type DefaultVars, type Vars, defaultVars } from './vars.js'
 
 export type IconProps<
@@ -22,13 +22,11 @@ export type IconProps<
   /**
    * Icon collection to use for resolving icons.
    *
-   * @default 'lucide'
+   * @default lucide from 'frog/ui/lucide'
    */
   collection?: collection | Vars['icons'] | undefined
   /** Icon name in the current icon collection. */
-  name: keyof (typeof icons)[collection extends keyof typeof icons
-    ? collection
-    : never]
+  name: collection extends undefined ? never : keyof collection
   /** Sets the size of the icon. */
   size?: BoxProps<vars>['width']
 }
@@ -39,14 +37,13 @@ export function Icon<
 >(props: IconProps<vars, collection>) {
   const {
     __context,
-    collection = __context?.vars?.icons ?? 'lucide',
+    collection = __context?.vars?.icons ?? lucide,
     mode = 'auto',
     name,
     size = '24',
   } = props
 
-  const iconMap = icons[collection]
-  let text: string = iconMap[name as keyof typeof iconMap]
+  let text: string = collection[name as keyof typeof collection]
   if (!text) throw new TypeError(`Invalid set: ${collection}`)
 
   const resolvedMode = (() => {