fix: standardise on lucide icons

Author: danielroe

app/components/diff/FileTree.vue

@@ -112,11 +112,11 @@ function isExpanded(path: string): boolean {
 function getChangeIcon(type: 'added' | 'removed' | 'modified') {
   switch (type) {
     case 'added':
-      return 'i-octicon-diff-added-16 text-green-500'
+      return 'i-lucide:file-plus text-green-500'
     case 'removed':
-      return 'i-octicon-diff-removed-16 text-red-500'
+      return 'i-lucide:file-minus text-red-500'
     case 'modified':
-      return 'i-octicon-diff-modified-16 text-yellow-500'
+      return 'i-lucide:file-diff text-yellow-500'
   }
 }
 
@@ -140,14 +140,14 @@ function handleFileClick(node: DiffTreeNode) {
         >
           <span
             class="w-4 h-4 shrink-0 transition-transform"
-            :class="[isExpanded(node.path) ? 'i-carbon:chevron-down' : 'i-carbon:chevron-right']"
+            :class="[isExpanded(node.path) ? 'i-lucide:chevron-down' : 'i-lucide:chevron-right']"
           />
           <span
             class="w-4 h-4 shrink-0"
             :class="
               isExpanded(node.path)
-                ? 'i-carbon:folder-open text-yellow-500'
-                : 'i-carbon:folder text-yellow-600'
+                ? 'i-lucide:folder-open text-yellow-500'
+                : 'i-lucide:folder text-yellow-600'
             "
           />
           <span class="truncate">{{ node.name }}</span>

app/components/diff/MobileSidebarDrawer.vue

@@ -73,7 +73,7 @@ watch(open, value => {
           :aria-label="$t('compare.close_files_panel')"
           @click="open = false"
         >
-          <span class="i-carbon:close w-5 h-5" />
+          <span class="i-lucide:x w-5 h-5" />
         </button>
       </div>
 

app/components/diff/SidebarPanel.vue

@@ -21,10 +21,10 @@ const fileFilter = defineModel<'all' | 'added' | 'removed' | 'modified'>('fileFi
 const sectionOrder = ['dependencies', 'devDependencies', 'peerDependencies', 'optionalDependencies']
 const { t } = useI18n()
 const sectionMeta = computed<Record<string, { label: string; icon: string }>>(() => ({
-  dependencies: { label: t('compare.dependencies'), icon: 'i-carbon-cube' },
-  devDependencies: { label: t('compare.dev_dependencies'), icon: 'i-carbon-tools' },
-  peerDependencies: { label: t('compare.peer_dependencies'), icon: 'i-carbon-user-multiple' },
-  optionalDependencies: { label: t('compare.optional_dependencies'), icon: 'i-carbon-help' },
+  dependencies: { label: t('compare.dependencies'), icon: 'i-lucide:box' },
+  devDependencies: { label: t('compare.dev_dependencies'), icon: 'i-lucide:wrench' },
+  peerDependencies: { label: t('compare.peer_dependencies'), icon: 'i-lucide:users' },
+  optionalDependencies: { label: t('compare.optional_dependencies'), icon: 'i-lucide:circle-help' },
 }))
 
 const sectionList = computed(() => {
@@ -34,7 +34,7 @@ const sectionList = computed(() => {
       key,
       changes,
       label: sectionMeta.value[key]?.label ?? key,
-      icon: sectionMeta.value[key]?.icon ?? 'i-carbon-cube',
+      icon: sectionMeta.value[key]?.icon ?? 'i-lucide:box',
       order: sectionOrder.indexOf(key) === -1 ? sectionOrder.length + 1 : sectionOrder.indexOf(key),
     }))
     .sort((a, b) => a.order - b.order)
@@ -105,7 +105,7 @@ function handleFileSelect(file: FileChange) {
         class="px-3 py-2 bg-yellow-500/5 border-b border-border"
       >
         <div class="flex items-start gap-2">
-          <span class="i-carbon-warning w-3.5 h-3.5 text-yellow-500 shrink-0 mt-0.5" />
+          <span class="i-lucide:triangle-alert w-3.5 h-3.5 text-yellow-500 shrink-0 mt-0.5" />
           <div class="text-3xs text-fg-muted">
             <p v-for="warning in compare.meta.warnings" :key="warning">{{ warning }}</p>
           </div>
@@ -118,7 +118,7 @@ function handleFileSelect(file: FileChange) {
             class="cursor-pointer list-none flex items-center gap-2 text-xs font-medium mb-2 hover:text-fg transition-colors"
           >
             <span
-              class="i-carbon-chevron-right w-3.5 h-3.5 transition-transform group-open:rotate-90"
+              class="i-lucide:chevron-right w-3.5 h-3.5 transition-transform group-open:rotate-90"
             />
             <span :class="section.icon" class="w-3.5 h-3.5" />
             {{ section.label }} ({{ section.changes.length }})
@@ -134,10 +134,10 @@ function handleFileSelect(file: FileChange) {
                 :class="[
                   'w-3 h-3 shrink-0',
                   dep.type === 'added'
-                    ? 'i-carbon-add-alt text-green-500'
+                    ? 'i-lucide:plus text-green-500'
                     : dep.type === 'removed'
-                      ? 'i-carbon-subtract-alt text-red-500'
-                      : 'i-carbon-arrows-horizontal text-yellow-500',
+                      ? 'i-lucide:minus text-red-500'
+                      : 'i-lucide:arrow-left-right text-yellow-500',
                 ]"
               />
 
@@ -157,7 +157,7 @@ function handleFileSelect(file: FileChange) {
                 >
                   {{ dep.from }}
                 </span>
-                <span v-if="dep.type === 'updated'" class="i-carbon-arrow-right w-2.5 h-2.5" />
+                <span v-if="dep.type === 'updated'" class="i-lucide:arrow-right w-2.5 h-2.5" />
                 <span v-if="dep.to">{{ dep.to }}</span>
               </div>
 
@@ -187,18 +187,18 @@ function handleFileSelect(file: FileChange) {
         class="border-b border-border px-3 py-2 shrink-0 cursor-pointer list-none flex items-center justify-between gap-2"
       >
         <span class="text-xs font-medium flex items-center gap-1.5">
-          <span class="i-carbon-document w-3.5 h-3.5" />
+          <span class="i-lucide:file-text w-3.5 h-3.5" />
           {{ $t('compare.file_changes') }}
         </span>
         <span
-          class="i-carbon-chevron-right w-3.5 h-3.5 transition-transform group-open:rotate-90"
+          class="i-lucide:chevron-right w-3.5 h-3.5 transition-transform group-open:rotate-90"
         />
       </summary>
 
       <div class="border-b border-border px-3 py-2 shrink-0 space-y-2">
         <div class="relative">
           <span
-            class="absolute inset-is-2 top-1/2 -translate-y-1/2 i-carbon-search w-3 h-3 text-fg-subtle pointer-events-none"
+            class="absolute inset-is-2 top-1/2 -translate-y-1/2 i-lucide:search w-3 h-3 text-fg-subtle pointer-events-none"
           />
           <input
             v-model="fileSearch"

app/components/diff/ViewerPanel.vue

@@ -229,10 +229,10 @@ function getCodeUrl(version: string): string {
           :class="[
             'w-4 h-4 shrink-0',
             file.type === 'added'
-              ? 'i-carbon-add-alt text-green-500'
+              ? 'i-lucide:plus text-green-500'
               : file.type === 'removed'
-                ? 'i-carbon-subtract-alt text-red-500'
-                : 'i-carbon-edit text-yellow-500',
+                ? 'i-lucide:minus text-red-500'
+                : 'i-lucide:pen text-yellow-500',
           ]"
         />
 
@@ -272,10 +272,10 @@ function getCodeUrl(version: string): string {
             :class="{ 'bg-bg-elevated text-fg': showOptions }"
             @click="showOptions = !showOptions"
           >
-            <span class="i-carbon-settings w-3.5 h-3.5" />
+            <span class="i-lucide:settings w-3.5 h-3.5" />
             Options
             <span
-              class="i-carbon-chevron-down w-3 h-3 transition-transform"
+              class="i-lucide:chevron-down w-3 h-3 transition-transform"
               :class="{ 'rotate-180': showOptions }"
             />
           </button>
@@ -433,7 +433,7 @@ function getCodeUrl(version: string): string {
 
       <!-- Error state -->
       <div v-else-if="status === 'error'" class="py-8 text-center">
-        <span class="i-carbon-warning-alt w-8 h-8 mx-auto text-fg-subtle mb-2 block" />
+        <span class="i-lucide:triangle-alert w-8 h-8 mx-auto text-fg-subtle mb-2 block" />
         <p class="text-fg-muted text-sm mb-2">
           {{ loadError?.message || 'Failed to load diff' }}
         </p>

app/pages/diff/[[org]]/[packageName]/v/[versionRange].vue

@@ -141,7 +141,7 @@ useSeoMeta({
             <span v-else class="font-mono text-sm text-fg-muted">{{ fromVersion }}</span>
           </div>
 
-          <span class="i-carbon-arrow-right w-4 h-4 text-fg-subtle" />
+          <span class="i-lucide:arrow-right w-4 h-4 text-fg-subtle" />
 
           <div class="flex items-center gap-2">
             <span class="text-xs text-fg-subtle uppercase tracking-wide">To</span>
@@ -217,7 +217,7 @@ useSeoMeta({
             class="px-2 py-1 inline-flex items-center gap-1.5 font-mono text-xs bg-bg-muted border border-border rounded text-fg-muted hover:text-fg hover:border-border-hover transition-colors"
             @click="mobileDrawerOpen = true"
           >
-            <span class="i-carbon:document w-3.5 h-3.5" />
+            <span class="i-lucide:file-text w-3.5 h-3.5" />
             {{ $t('compare.files_button') }}
           </button>
         </div>
@@ -233,9 +233,7 @@ useSeoMeta({
           />
           <div v-else class="h-full flex items-center justify-center text-center p-8">
             <div>
-              <span
-                class="i-carbon-document-blank w-16 h-16 mx-auto text-fg-subtle/50 block mb-4"
-              />
+              <span class="i-lucide:file-text w-16 h-16 mx-auto text-fg-subtle/50 block mb-4" />
               <p class="text-fg-muted">{{ $t('compare.select_file_prompt') }}</p>
             </div>
           </div>

app/pages/package/[[org]]/[name].vue

@@ -884,7 +884,7 @@ const showSkeleton = shallowRef(false)
               "
               variant="button-secondary"
               :to="`/diff/${pkg.name}/v/${displayVersion.version}...${latestVersion.version}`"
-              classicon="i-carbon:text-align-mixed"
+              classicon="i-lucide:diff"
             >
               {{ $t('compare.compare_versions') }}
             </LinkBase>
@@ -1022,19 +1022,19 @@ const showSkeleton = shallowRef(false)
             </li>
             <!-- Mobile-only: Docs + Code + Compare links -->
             <li v-if="docsLink && displayVersion" class="sm:hidden">
-              <LinkBase :to="docsLink" classicon="i-carbon:document">
+              <LinkBase :to="docsLink" classicon="i-lucide:file-text">
                 {{ $t('package.links.docs') }}
               </LinkBase>
             </li>
             <li v-if="resolvedVersion && codeLink" class="sm:hidden">
-              <LinkBase :to="codeLink" classicon="i-carbon:code">
+              <LinkBase :to="codeLink" classicon="i-lucide:code">
                 {{ $t('package.links.code') }}
               </LinkBase>
             </li>
             <li class="sm:hidden">
               <LinkBase
                 :to="{ name: 'compare', query: { packages: pkg.name } }"
-                classicon="i-carbon:compare"
+                classicon="i-lucide:git-compare"
               >
                 {{ $t('package.links.compare') }}
               </LinkBase>
@@ -1049,7 +1049,7 @@ const showSkeleton = shallowRef(false)
                 :to="`/diff/${pkg.name}/v/${displayVersion.version}...${latestVersion.version}`"
                 class="link-subtle font-mono text-sm inline-flex items-center gap-1.5"
               >
-                <span class="i-carbon-text-align-mixed w-4 h-4" aria-hidden="true" />
+                <span class="i-lucide:diff w-4 h-4" aria-hidden="true" />
                 {{ $t('compare.compare_versions') }}
               </NuxtLink>
             </li>

app/types/icon.ts

@@ -1,5 +1,4 @@
 export type IconClass =
-  | `i-carbon:${string}`
   | `i-lucide:${string}`
   | `i-simple-icons:${string}`
   | `i-svg-spinners:${string}`

package.json

@@ -55,9 +55,7 @@
     "@atproto/oauth-client-node": "^0.3.15",
     "@deno/doc": "jsr:^0.189.1",
     "@floating-ui/vue": "1.1.10",
-    "@iconify-json/carbon": "1.2.18",
     "@iconify-json/lucide": "1.2.93",
-    "@iconify-json/octicon": "1.2.20",
     "@iconify-json/simple-icons": "1.2.71",
     "@iconify-json/svg-spinners": "1.2.4",
     "@iconify-json/vscode-icons": "1.2.43",