feat: icon registry with lucide replacing radix icons

.github/workflows/release-rc.yaml

@@ -42,6 +42,9 @@ jobs:
       - name: Install Dependencies 🔧
         run: pnpm install
 
+      - name: Check the icon map
+        run: pnpm --filter=@raystack/apsara check:icon-map
+
       - name: Build Step 🔧
         env:
           CI: ""

.github/workflows/release.yaml

@@ -42,6 +42,9 @@ jobs:
       - name: Install Dependencies 🔧
         run: pnpm install
 
+      - name: Check the icon map
+        run: pnpm --filter=@raystack/apsara check:icon-map
+
       - name: Build Step 🔧
         env:
           CI: ""

.github/workflows/tests.yml

@@ -32,6 +32,12 @@ jobs:
       - name: Install dependencies
         run: pnpm install --frozen-lockfile
 
+      - name: Check the icon map
+        run: pnpm --filter=@raystack/apsara check:icon-map
+
+      - name: Generate the icon registry
+        run: pnpm --filter=@raystack/apsara build:icon-registry
+
       - name: Run tests
         run: pnpm --filter=@raystack/apsara test
 

.gitignore

@@ -46,3 +46,9 @@ yarn-error.log*
 
 # generated Code Connect batch file (created by figma:generate-icons at publish time)
 packages/raystack/figma/icons.figma.batch.json
+
+# generated icon registry — one wrapper module per key of icons/icon-map.json.
+# Written by `build:icon-registry`, which runs on `pnpm install` (the `prepare`
+# script of @raystack/apsara) and again before build, dev and test. Edit
+# icon-map.json, never these files.
+packages/raystack/icons/generated/

DEVELOPMENT.md

@@ -192,8 +192,12 @@ pnpm lint
 # Clean build artifacts
 pnpm clean
 
-# Build icon components
-pnpm build:icons
+# Generate the icon registry from icons/icon-map.json into icons/generated/
+# (not in git — `pnpm install` runs this for you, and so do build, dev and test)
+pnpm build:icon-registry
+
+# Check that every icon-map.json entry resolves to a real lucide export
+pnpm check:icon-map
 ```
 
 ## Testing

apps/www/src/app/examples/datatable-virtual/page.tsx

@@ -12,7 +12,11 @@ import {
   Sidebar,
   Text
 } from '@raystack/apsara';
-import { BellIcon, FilterIcon, SidebarIcon } from '@raystack/apsara/icons';
+import {
+  BellIcon,
+  ListFilterIcon,
+  PanelLeftIcon
+} from '@raystack/apsara/icons';
 import { useCallback, useMemo, useState } from 'react';
 
 const sampleData = [
@@ -514,13 +518,13 @@ const Page = () => {
           <Sidebar.Item
             href='/examples/datatable-virtual'
             active
-            leadingIcon={<SidebarIcon />}
+            leadingIcon={<PanelLeftIcon />}
           >
             DataTable – Virtualized
           </Sidebar.Item>
           <Sidebar.Item
             href='/examples/datatable-content'
-            leadingIcon={<SidebarIcon />}
+            leadingIcon={<PanelLeftIcon />}
           >
             DataTable – Content
           </Sidebar.Item>
@@ -553,7 +557,11 @@ const Page = () => {
               size='small'
               style={{ width: '200px' }}
             />
-            <Button variant='outline' size='small' leadingIcon={<FilterIcon />}>
+            <Button
+              variant='outline'
+              size='small'
+              leadingIcon={<ListFilterIcon />}
+            >
               Actions
             </Button>
           </Navbar.End>
@@ -586,7 +594,7 @@ const Page = () => {
                 rowHeight={44.5}
                 emptyState={
                   <EmptyState
-                    icon={<FilterIcon />}
+                    icon={<ListFilterIcon />}
                     heading='No results'
                     variant='empty1'
                     subHeading='Try adjusting your filters or search.'

apps/www/src/app/examples/datatable/page.tsx

@@ -12,7 +12,11 @@ import {
   Sidebar,
   Text
 } from '@raystack/apsara';
-import { BellIcon, FilterIcon, SidebarIcon } from '@raystack/apsara/icons';
+import {
+  BellIcon,
+  ListFilterIcon,
+  PanelLeftIcon
+} from '@raystack/apsara/icons';
 import { useState } from 'react';
 
 const sampleData = [
@@ -527,11 +531,11 @@ const Page = () => {
           </Sidebar.Item>
           <Sidebar.Item
             href='/examples/datatable'
-            leadingIcon={<SidebarIcon />}
+            leadingIcon={<PanelLeftIcon />}
           >
             DataTable
           </Sidebar.Item>
-          <Sidebar.Group label='Resources' leadingIcon={<FilterIcon />}>
+          <Sidebar.Group label='Resources' leadingIcon={<ListFilterIcon />}>
             <Sidebar.Item href='#'>Reports</Sidebar.Item>
             <Sidebar.Item href='#'>Activities</Sidebar.Item>
           </Sidebar.Group>
@@ -567,7 +571,11 @@ const Page = () => {
               size='small'
               style={{ width: '200px' }}
             />
-            <Button variant='outline' size='small' leadingIcon={<FilterIcon />}>
+            <Button
+              variant='outline'
+              size='small'
+              leadingIcon={<ListFilterIcon />}
+            >
               Actions
             </Button>
           </Navbar.End>
@@ -594,7 +602,7 @@ const Page = () => {
             <DataTable.Content
               emptyState={
                 <EmptyState
-                  icon={<FilterIcon />}
+                  icon={<ListFilterIcon />}
                   heading='No results'
                   variant='empty1'
                   subHeading='Try adjusting your filters or search.'

apps/www/src/app/examples/dataview/page.tsx

@@ -19,7 +19,11 @@ import {
   Sidebar,
   Text
 } from '@raystack/apsara';
-import { BellIcon, FilterIcon, SidebarIcon } from '@raystack/apsara/icons';
+import {
+  BellIcon,
+  ListFilterIcon,
+  PanelLeftIcon
+} from '@raystack/apsara/icons';
 
 type ProfileCell = { row: { original: Profile } };
 
@@ -502,7 +506,7 @@ const Page = () => {
         <Sidebar.Main>
           <Sidebar.Item
             href='/examples/dataview'
-            leadingIcon={<SidebarIcon />}
+            leadingIcon={<PanelLeftIcon />}
             active
           >
             DataView
@@ -596,15 +600,15 @@ const Page = () => {
             {/* Empty/zero state lifted out of renderers — single sibling reads context */}
             <DataView.EmptyState>
               <EmptyState
-                icon={<FilterIcon />}
+                icon={<ListFilterIcon />}
                 heading='No matching people'
                 variant='empty1'
                 subHeading='Try adjusting your filters or search.'
               />
             </DataView.EmptyState>
             <DataView.ZeroState>
               <EmptyState
-                icon={<FilterIcon />}
+                icon={<ListFilterIcon />}
                 heading='No people yet'
                 variant='empty1'
                 subHeading='Add your first teammate to get started.'