feat(cli): add support for phosphor icons (#1575)

amweiss · web-flow · commit 493bcbad499f · 2025-11-20T23:23:44.000+03:30
diff --git a/apps/v4/public/r/icons/index.json b/apps/v4/public/r/icons/index.json
@@ -2,186 +2,223 @@
   "AlertCircle": {
     "lucide": "AlertCircle",
     "radix": "ExclamationTriangleIcon",
-    "tabler": "IconExclamationCircle"
+    "tabler": "IconExclamationCircle",
+    "phosphor": "PhWarningCircle"
   },
   "ArrowLeft": {
     "lucide": "ArrowLeft",
     "radix": "ArrowLeftIcon",
-    "tabler": "IconArrowLeft"
+    "tabler": "IconArrowLeft",
+    "phosphor": "PhArrowLeft"
   },
   "ArrowRight": {
     "lucide": "ArrowRight",
     "radix": "ArrowRightIcon",
-    "tabler": "IconArrowRight"
+    "tabler": "IconArrowRight",
+    "phosphor": "PhArrowRight"
   },
   "ArrowUpDown": {
     "lucide": "ArrowUpDown",
     "radix": "CaretSortIcon",
-    "tabler": "IconArrowsSort"
+    "tabler": "IconArrowsSort",
+    "phosphor": "PhArrowsVertical"
   },
   "BellRing": {
     "lucide": "BellRing",
     "radix": "BellIcon",
-    "tabler": "IconBellRinging"
+    "tabler": "IconBellRinging",
+    "phosphor": "PhBellRinging"
   },
   "Bold": {
     "lucide": "Bold",
     "radix": "FontBoldIcon",
-    "tabler": "IconBold"
+    "tabler": "IconBold",
+    "phosphor": "PhTextB"
   },
   "Calculator": {
     "lucide": "Calculator",
     "radix": "ComponentPlaceholderIcon",
-    "tabler": "IconCalculator"
+    "tabler": "IconCalculator",
+    "phosphor": "PhCalculator"
   },
   "Calendar": {
     "lucide": "Calendar",
     "radix": "CalendarIcon",
-    "tabler": "IconCalendar"
+    "tabler": "IconCalendar",
+    "phosphor": "PhCalendarBlank"
   },
   "Check": {
     "lucide": "Check",
     "radix": "CheckIcon",
-    "tabler": "IconCheck"
+    "tabler": "IconCheck",
+    "phosphor": "PhCheck"
   },
   "ChevronDown": {
     "lucide": "ChevronDown",
     "radix": "ChevronDownIcon",
-    "tabler": "IconChevronDown"
+    "tabler": "IconChevronDown",
+    "phosphor": "PhCaretDown"
   },
   "ChevronLeft": {
     "lucide": "ChevronLeft",
     "radix": "ChevronLeftIcon",
-    "tabler": "IconChevronLeft"
+    "tabler": "IconChevronLeft",
+    "phosphor": "PhCaretLeft"
   },
   "ChevronRight": {
     "lucide": "ChevronRight",
     "radix": "ChevronRightIcon",
-    "tabler": "IconChevronRight"
+    "tabler": "IconChevronRight",
+    "phosphor": "PhCaretRight"
   },
   "ChevronUp": {
     "lucide": "ChevronUp",
     "radix": "ChevronUpIcon",
-    "tabler": "IconChevronUp"
+    "tabler": "IconChevronUp",
+    "phosphor": "PhCaretUp"
   },
   "ChevronsUpDown": {
     "lucide": "ChevronsUpDown",
     "radix": "CaretSortIcon",
-    "tabler": "IconSelector"
+    "tabler": "IconSelector",
+    "phosphor": "PhCaretUpDown"
   },
   "Circle": {
     "lucide": "Circle",
     "radix": "DotFilledIcon",
-    "tabler": "IconCircle"
+    "tabler": "IconCircle",
+    "phosphor": "PhCircle"
   },
   "Copy": {
     "lucide": "Copy",
     "radix": "CopyIcon",
-    "tabler": "IconCopy"
+    "tabler": "IconCopy",
+    "phosphor": "PhCopy"
   },
   "CreditCard": {
     "lucide": "CreditCard",
     "radix": "ComponentPlaceholderIcon",
-    "tabler": "IconCreditCard"
+    "tabler": "IconCreditCard",
+    "phosphor": "PhCreditCard"
   },
   "GripVertical": {
     "lucide": "GripVertical",
     "radix": "DragHandleDots2Icon",
-    "tabler": "IconGripVertical"
+    "tabler": "IconGripVertical",
+    "phosphor": "PhDotsSixVertical"
   },
   "Italic": {
     "lucide": "Italic",
     "radix": "FontItalicIcon",
-    "tabler": "IconItalic"
+    "tabler": "IconItalic",
+    "phosphor": "PhTextItalic"
   },
   "Loader2": {
     "lucide": "Loader2",
     "radix": "ReloadIcon",
-    "tabler": "IconLoader2"
+    "tabler": "IconLoader2",
+    "phosphor": "PhCircleNotch"
   },
   "Mail": {
     "lucide": "Mail",
     "radix": "EnvelopeClosedIcon",
-    "tabler": "IconMail"
+    "tabler": "IconMail",
+    "phosphor": "PhEnvelopeSimple"
   },
   "MailOpen": {
     "lucide": "MailOpen",
     "radix": "EnvelopeOpenIcon",
-    "tabler": "IconMailOpened"
+    "tabler": "IconMailOpened",
+    "phosphor": "PhEnvelopeSimpleOpen"
   },
   "Minus": {
     "lucide": "Minus",
     "radix": "MinusIcon",
-    "tabler": "IconMinus"
+    "tabler": "IconMinus",
+    "phosphor": "PhMinus"
   },
   "Moon": {
     "lucide": "Moon",
     "radix": "MoonIcon",
-    "tabler": "IconMoon"
+    "tabler": "IconMoon",
+    "phosphor": "PhMoon"
   },
   "MoreHorizontal": {
     "lucide": "MoreHorizontal",
     "radix": "DotsHorizontalIcon",
-    "tabler": "IconDots"
+    "tabler": "IconDots",
+    "phosphor": "PhDotsThree"
   },
   "PanelLeft": {
     "lucide": "PanelLeft",
     "radix": "ViewVerticalIcon",
-    "tabler": "IconLayoutSidebar"
+    "tabler": "IconLayoutSidebar",
+    "phosphor": "PhSidebarSimple"
   },
   "Plus": {
     "lucide": "Plus",
     "radix": "PlusIcon",
-    "tabler": "IconPlus"
+    "tabler": "IconPlus",
+    "phosphor": "PhPlus"
   },
   "Search": {
     "lucide": "Search",
     "radix": "MagnifyingGlassIcon",
-    "tabler": "IconSearch"
+    "tabler": "IconSearch",
+    "phosphor": "PhMagnifyingGlass"
   },
   "Send": {
     "lucide": "Send",
     "radix": "PaperPlaneIcon",
-    "tabler": "IconSend"
+    "tabler": "IconSend",
+    "phosphor": "PhPaperPlaneTilt"
   },
   "Settings": {
     "lucide": "Settings",
     "radix": "GearIcon",
-    "tabler": "IconSettings"
+    "tabler": "IconSettings",
+    "phosphor": "PhGear"
   },
   "Slash": {
     "lucide": "Slash",
     "radix": "SlashIcon",
-    "tabler": "IconSlash"
+    "tabler": "IconSlash",
+    "phosphor": "PhCaretRight"
   },
   "Smile": {
     "lucide": "Smile",
     "radix": "FaceIcon",
-    "tabler": "IconMoodSmile"
+    "tabler": "IconMoodSmile",
+    "phosphor": "PhSmiley"
   },
   "Sun": {
     "lucide": "Sun",
     "radix": "SunIcon",
-    "tabler": "IconSun"
+    "tabler": "IconSun",
+    "phosphor": "PhSun"
   },
   "Terminal": {
     "lucide": "Terminal",
     "radix": "RocketIcon",
-    "tabler": "IconTerminal"
+    "tabler": "IconTerminal",
+    "phosphor": "PhTerminal"
   },
   "Underline": {
     "lucide": "Underline",
     "radix": "UnderlineIcon",
-    "tabler": "IconUnderline"
+    "tabler": "IconUnderline",
+    "phosphor": "PhTextUnderline"
   },
   "User": {
     "lucide": "User",
     "radix": "PersonIcon",
-    "tabler": "IconUser"
+    "tabler": "IconUser",
+    "phosphor": "PhUser"
   },
   "X": {
     "lucide": "X",
     "radix": "Cross2Icon",
-    "tabler": "IconX"
+    "tabler": "IconX",
+    "phosphor": "PhX"
   }
-}
+}
diff --git a/packages/cli/src/utils/icon-libraries.ts b/packages/cli/src/utils/icon-libraries.ts
@@ -14,4 +14,9 @@ export const ICON_LIBRARIES = {
     package: '@tabler/icons-vue',
     import: '@tabler/icons-vue',
   },
+  phosphor: {
+    name: '@phosphor-icons/vue',
+    package: '@phosphor-icons/vue',
+    import: '@phosphor-icons/vue',
+  },
 }
diff --git a/packages/cli/src/utils/transformers/transform-icons.ts b/packages/cli/src/utils/transformers/transform-icons.ts
@@ -5,6 +5,13 @@ import { ICON_LIBRARIES } from '@/src/utils/icon-libraries'
 // Lucide is the default icon library in the registry.
 const SOURCE_LIBRARY = 'lucide'
 
+// Precompute the set of known icon library import sources to avoid hardcoding lists.
+const ICON_LIBRARY_IMPORTS = new Set(
+  Object.values(ICON_LIBRARIES)
+    .map(l => l.import)
+    .filter(Boolean),
+)
+
 export function transformIcons(opts: TransformOpts, registryIcons: Record<string, Record<string, string>>): CodemodPlugin {
   return {
     type: 'codemod',
@@ -32,7 +39,7 @@ export function transformIcons(opts: TransformOpts, registryIcons: Record<string
         traverseScriptAST(scriptAST, {
 
           visitImportDeclaration(path) {
-            if (![ICON_LIBRARIES.tabler.import, ICON_LIBRARIES.radix.import, ICON_LIBRARIES.lucide.import].includes(`${path.node.source.value}`))
+            if (!ICON_LIBRARY_IMPORTS.has(String(path.node.source.value)))
               return this.traverse(path)
 
             for (const specifier of path.node.specifiers ?? []) {
diff --git a/packages/cli/test/commands/init.test.ts b/packages/cli/test/commands/init.test.ts
@@ -33,6 +33,7 @@ it.skip('init config-full', async () => {
       'lucide-vue-next',
       '@radix-icons/vue',
       '@tabler/icons-vue',
+      '@phosphor-icons/vue',
     ],
     registryDependencies: [],
     tailwind: {
@@ -102,6 +103,7 @@ it.skip('init config-full', async () => {
       'reka-ui',
       '@radix-icons/vue',
       '@tabler/icons-vue',
+      '@phosphor-icons/vue',
     ],
     {
       cwd: targetDir,
diff --git a/packages/cli/test/utils/__snapshots__/transform-icons.test.ts.snap b/packages/cli/test/utils/__snapshots__/transform-icons.test.ts.snap
@@ -26,6 +26,19 @@ import { Primitive } from "reka-ui";
 "
 `;
 
+exports[`transformIcons > transforms phosphor icons 1`] = `
+"<script setup>
+import { PhCheck } from '@phosphor-icons/vue';
+import { Primitive } from "reka-ui";
+</script>
+
+<template>
+  <PhCheck />
+  <Primitive />
+</template>
+"
+`;
+
 exports[`transformIcons > transforms radix icons 1`] = `
 "<script setup>
 import { CheckIcon } from '@radix-icons/vue';
diff --git a/packages/cli/test/utils/transform-icons.test.ts b/packages/cli/test/utils/transform-icons.test.ts
@@ -2,6 +2,26 @@ import { describe, expect, it } from 'vitest'
 import { transform } from '../../src/utils/transformers'
 
 describe('transformIcons', () => {
+  it('transforms phosphor icons', async () => {
+    const result = await transform({
+      filename: 'app.vue',
+      raw: `<script lang="ts" setup>
+      import { Check } from 'lucide-vue-next'
+      import { Primitive } from 'reka-ui'
+      </script>
+
+      <template>
+        <Check />
+        <Primitive />
+      </template>
+      `,
+      config: {
+        iconLibrary: 'phosphor',
+      },
+    })
+    expect(result).toMatchSnapshot()
+  })
+
   it('transforms tabler icons', async () => {
     const result = await transform({
       filename: 'app.vue',
