refactor: replace carbon icons (#1454)

Author: essenmitsosse

app/components/AppHeader.vue

@@ -23,7 +23,7 @@ const desktopLinks = computed<NavigationConfig>(() => [
     keyshortcut: 'c',
     type: 'link',
     external: false,
-    iconClass: 'i-carbon:compare',
+    iconClass: 'i-lucide:git-compare',
   },
   {
     name: 'Settings',
@@ -32,7 +32,7 @@ const desktopLinks = computed<NavigationConfig>(() => [
     keyshortcut: ',',
     type: 'link',
     external: false,
-    iconClass: 'i-carbon:settings',
+    iconClass: 'i-lucide:settings',
   },
 ])
 
@@ -55,23 +55,23 @@ const mobileLinks = computed<NavigationConfigWithGroups>(() => [
         to: { name: 'about' },
         type: 'link',
         external: false,
-        iconClass: 'i-carbon:information',
+        iconClass: 'i-lucide:info',
       },
       {
         name: 'Privacy Policy',
         label: $t('privacy_policy.title'),
         to: { name: 'privacy' },
         type: 'link',
         external: false,
-        iconClass: 'i-carbon:security',
+        iconClass: 'i-lucide:shield-check',
       },
       {
         name: 'Accessibility',
         label: $t('a11y.title'),
         to: { name: 'accessibility' },
         type: 'link',
         external: false,
-        iconClass: 'i-carbon:accessibility-alt',
+        iconClass: 'i-custom:a11y',
       },
     ],
   },
@@ -90,7 +90,7 @@ const mobileLinks = computed<NavigationConfigWithGroups>(() => [
         target: '_blank',
         type: 'link',
         external: true,
-        iconClass: 'i-carbon:document',
+        iconClass: 'i-lucide:file-text',
       },
       {
         name: 'Source',
@@ -99,7 +99,7 @@ const mobileLinks = computed<NavigationConfigWithGroups>(() => [
         target: '_blank',
         type: 'link',
         external: true,
-        iconClass: 'i-carbon:logo-github',
+        iconClass: 'i-simple-icons:github',
       },
       {
         name: 'Social',
@@ -108,7 +108,7 @@ const mobileLinks = computed<NavigationConfigWithGroups>(() => [
         target: '_blank',
         type: 'link',
         external: true,
-        iconClass: 'i-carbon:logo-bluesky',
+        iconClass: 'i-simple-icons:bluesky',
       },
       {
         name: 'Chat',
@@ -117,14 +117,14 @@ const mobileLinks = computed<NavigationConfigWithGroups>(() => [
         target: '_blank',
         type: 'link',
         external: true,
-        iconClass: 'i-carbon:chat',
+        iconClass: 'i-lucide:message-circle',
       },
     ],
   },
 ])
 
 const showFullSearch = shallowRef(false)
-const showMobileMenu = shallowRef(false)
+const showMobileMenu = shallowRef(true)
 const { env } = useAppConfig().buildInfo
 
 // On mobile, clicking logo+search button expands search
@@ -288,7 +288,7 @@ onKeyStroke(
         :aria-expanded="showMobileMenu"
         @click="expandMobileSearch"
         v-if="!isSearchExpanded && !isOnHomePage"
-        classicon="i-carbon:search"
+        classicon="i-lucide:search"
       />
 
       <!-- Mobile: Menu button (always visible, click to open menu) -->
@@ -298,7 +298,7 @@ onKeyStroke(
         :aria-label="$t('nav.open_menu')"
         :aria-expanded="showMobileMenu"
         @click="showMobileMenu = !showMobileMenu"
-        classicon="i-carbon:menu"
+        classicon="i-lucide:menu"
       />
     </nav>
 

app/components/BlueskyPostEmbed.client.vue

@@ -83,7 +83,7 @@ const { data: post, status } = useAsyncData(
         <div class="text-sm text-fg-subtle truncate">@{{ post.author.handle }}</div>
       </div>
       <span
-        class="i-carbon:logo-bluesky w-5 h-5 text-fg-subtle ms-auto shrink-0"
+        class="i-simple-icons:bluesky w-5 h-5 text-fg-subtle ms-auto shrink-0"
         aria-hidden="true"
       />
     </div>
@@ -112,15 +112,15 @@ const { data: post, status } = useAsyncData(
     <div class="flex items-center gap-4 text-sm text-fg-subtle">
       <DateTime :datetime="post.record.createdAt" date-style="medium" />
       <span v-if="post.likeCount" class="flex items-center gap-1">
-        <span class="i-carbon:favorite w-3.5 h-3.5" aria-hidden="true" />
+        <span class="i-lucide:heart w-3.5 h-3.5" aria-hidden="true" />
         {{ post.likeCount }}
       </span>
       <span v-if="post.repostCount" class="flex items-center gap-1">
-        <span class="i-carbon:repeat w-3.5 h-3.5" aria-hidden="true" />
+        <span class="i-lucide:repeat w-3.5 h-3.5" aria-hidden="true" />
         {{ post.repostCount }}
       </span>
       <span v-if="post.replyCount" class="flex items-center gap-1">
-        <span class="i-carbon:chat w-3.5 h-3.5" aria-hidden="true" />
+        <span class="i-lucide:message-circle w-3.5 h-3.5" aria-hidden="true" />
         {{ post.replyCount }}
       </span>
     </div>

app/components/CallToAction.vue

@@ -3,23 +3,23 @@ const socialLinks = computed(() => [
   {
     id: 'github',
     href: 'https://repo.npmx.dev',
-    icon: 'i-carbon:logo-github',
+    icon: 'i-simple-icons:github',
     titleKey: $t('about.get_involved.contribute.title'),
     descriptionKey: $t('about.get_involved.contribute.description'),
     ctaKey: $t('about.get_involved.contribute.cta'),
   },
   {
     id: 'discord',
     href: 'https://chat.npmx.dev',
-    icon: 'i-carbon:chat',
+    icon: 'i-lucide:message-circle',
     titleKey: $t('about.get_involved.community.title'),
     descriptionKey: $t('about.get_involved.community.description'),
     ctaKey: $t('about.get_involved.community.cta'),
   },
   {
     id: 'bluesky',
     href: 'https://social.npmx.dev',
-    icon: 'i-carbon:logo-bluesky',
+    icon: 'i-simple-icons:bluesky',
     titleKey: $t('about.get_involved.follow.title'),
     descriptionKey: $t('about.get_involved.follow.description'),
     ctaKey: $t('about.get_involved.follow.cta'),
@@ -55,7 +55,7 @@ const socialLinks = computed(() => [
           class="text-sm text-fg-muted group-hover:text-fg inline-flex items-center gap-1 mt-auto focus-visible:outline-none"
         >
           {{ link.ctaKey }}
-          <span class="i-carbon:arrow-right rtl-flip w-3 h-3" aria-hidden="true" />
+          <span class="i-lucide:arrow-right rtl-flip w-3 h-3" aria-hidden="true" />
           <span class="absolute z-0 inset-0" aria-hidden="true" />
         </a>
       </div>

app/components/Code/FileTree.vue

@@ -59,7 +59,7 @@ watch(
           :aria-pressed="isNodeActive(node)"
           :style="{ paddingLeft: `${depth * 12 + 12}px` }"
           @click="toggleDir(node.path)"
-          :classicon="isExpanded(node.path) ? 'i-carbon:chevron-down' : 'i-carbon:chevron-right'"
+          :classicon="isExpanded(node.path) ? 'i-lucide:chevron-down' : 'i-lucide:chevron-right'"
         >
           <svg
             class="size-[1em] me-1 shrink-0"

app/components/Code/MobileTreeDrawer.vue

@@ -32,7 +32,7 @@ watch(isOpen, open => (isLocked.value = open))
     class="md:hidden fixed bottom-4 inset-ie-4 z-45"
     :aria-label="$t('code.toggle_tree')"
     @click="isOpen = !isOpen"
-    :classicon="isOpen ? 'i-carbon:close' : 'i-carbon:folder'"
+    :classicon="isOpen ? 'i-lucide:x' : 'i-lucide:folder'"
   />
 
   <!-- Backdrop -->
@@ -68,7 +68,7 @@ watch(isOpen, open => (isLocked.value = open))
         <ButtonBase
           :aria-label="$t('code.close_tree')"
           @click="isOpen = false"
-          classicon="i-carbon-close"
+          classicon="i-lucide:x"
         />
       </div>
       <CodeFileTree

app/components/CollapsibleSection.vue

@@ -92,15 +92,11 @@ useHead({
           :aria-label="ariaLabel"
           @click="toggle"
         >
-          <span
-            v-if="isLoading"
-            class="i-carbon:rotate-180 w-3 h-3 motion-safe:animate-spin"
-            aria-hidden="true"
-          />
+          <span v-if="isLoading" class="i-svg-spinners:ring-resize w-3 h-3" aria-hidden="true" />
           <span
             v-else
             class="w-3 h-3 transition-transform duration-200"
-            :class="isOpen ? 'i-carbon:chevron-down' : 'i-carbon:chevron-right'"
+            :class="isOpen ? 'i-lucide:chevron-down' : 'i-lucide:chevron-right'"
             aria-hidden="true"
           />
         </button>

app/components/ColumnPicker.vue

@@ -75,7 +75,7 @@ function handleReset() {
       aria-haspopup="true"
       :aria-controls="menuId"
       @click.stop="isOpen = !isOpen"
-      classicon="i-carbon-column"
+      classicon="i-lucide:columns-3-cog"
     >
       {{ $t('filters.columns.title') }}
     </ButtonBase>

app/components/Compare/ComparisonGrid.vue

@@ -50,7 +50,7 @@ function getReplacementTooltip(col: ComparisonGridColumn): string {
             </LinkBase>
             <TooltipApp v-if="col.replacement" :text="getReplacementTooltip(col)" position="bottom">
               <span
-                class="i-carbon:idea w-3.5 h-3.5 text-amber-500 shrink-0 cursor-help"
+                class="i-lucide:lightbulb w-3.5 h-3.5 text-amber-500 shrink-0 cursor-help"
                 role="img"
                 :aria-label="$t('package.replacement.title')"
               />
@@ -69,7 +69,7 @@ function getReplacementTooltip(col: ComparisonGridColumn): string {
             {{ $t('compare.no_dependency.label') }}
             <TooltipApp interactive position="bottom">
               <span
-                class="i-carbon:idea w-3.5 h-3.5 text-amber-500 shrink-0 cursor-help"
+                class="i-lucide:lightbulb w-3.5 h-3.5 text-amber-500 shrink-0 cursor-help"
                 role="img"
                 :aria-label="$t('compare.no_dependency.tooltip_title')"
               />

app/components/Compare/FacetCard.vue

@@ -77,7 +77,7 @@ function getShortName(header: string): string {
       <span class="text-xs text-fg-muted uppercase tracking-wider font-medium">{{ label }}</span>
       <TooltipApp v-if="description" :text="description" position="top">
         <span
-          class="i-carbon:information w-3 h-3 text-fg-subtle"
+          class="i-lucide:info w-3 h-3 text-fg-subtle"
           :title="description"
           aria-hidden="true"
         />
@@ -111,10 +111,7 @@ function getShortName(header: string): string {
         <span class="relative min-w-0 text-end">
           <!-- Loading state -->
           <template v-if="isCellLoading(index)">
-            <span
-              class="i-carbon:circle-dash w-4 h-4 text-fg-subtle motion-safe:animate-spin"
-              aria-hidden="true"
-            />
+            <span class="i-svg-spinners:ring-resize w-4 h-4 text-fg-subtle" aria-hidden="true" />
           </template>
 
           <!-- No data -->

app/components/Compare/FacetRow.vue

@@ -93,7 +93,7 @@ function isCellLoading(index: number): boolean {
     <div class="comparison-label flex items-center gap-1.5 px-4 py-3 border-b border-border">
       <span class="text-xs text-fg-muted uppercase tracking-wider">{{ label }}</span>
       <TooltipApp v-if="description" :text="description" position="top">
-        <span class="i-carbon:information w-3 h-3 text-fg-subtle cursor-help" aria-hidden="true" />
+        <span class="i-lucide:info w-3 h-3 text-fg-subtle cursor-help" aria-hidden="true" />
       </TooltipApp>
     </div>
 
@@ -114,10 +114,7 @@ function isCellLoading(index: number): boolean {
 
       <!-- Loading state -->
       <template v-if="isCellLoading(index)">
-        <span
-          class="i-carbon:circle-dash w-4 h-4 text-fg-subtle motion-safe:animate-spin"
-          aria-hidden="true"
-        />
+        <span class="i-svg-spinners:ring-resize w-4 h-4 text-fg-subtle" aria-hidden="true" />
       </template>
 
       <!-- No data -->