refactor: replace arrow icon

Author: essenmitsosse

app/components/CallToAction.vue

@@ -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/Header/OrgsDropdown.vue

@@ -112,7 +112,7 @@ function handleKeydown(event: KeyboardEvent) {
               class="link-subtle font-mono text-xs inline-flex items-center gap-1"
             >
               {{ $t('header.orgs_dropdown.view_all') }}
-              <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" />
             </NuxtLink>
           </div>
         </div>

app/components/Header/PackagesDropdown.vue

@@ -112,7 +112,7 @@ function handleKeydown(event: KeyboardEvent) {
               class="link-subtle font-mono text-xs inline-flex items-center gap-1"
             >
               {{ $t('header.packages_dropdown.view_all') }}
-              <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" />
             </NuxtLink>
           </div>
         </div>

app/components/Package/SkillsModal.vue

@@ -110,7 +110,7 @@ function getWarningTooltip(skill: SkillListItem): string | undefined {
         class="inline-flex items-center gap-1 text-xs text-fg-subtle hover:text-fg transition-colors shrink-0"
       >
         {{ $t('package.skills.learn_more') }}
-        <span class="i-carbon:arrow-right w-3 h-3" />
+        <span class="i-lucide:arrow-right w-3 h-3" />
       </a>
     </div>
 

app/components/ScrollToTop.client.vue

@@ -42,7 +42,7 @@ onMounted(() => {
     :aria-label="$t('common.scroll_to_top')"
     @click="scrollToTop"
   >
-    <span class="i-carbon:arrow-up w-5 h-5" aria-hidden="true" />
+    <span class="i-lucide:arrow-up w-5 h-5" aria-hidden="true" />
   </button>
 
   <!-- JS fallback for browsers without scroll-state support -->
@@ -62,7 +62,7 @@ onMounted(() => {
       :aria-label="$t('common.scroll_to_top')"
       @click="scrollToTop"
     >
-      <span class="i-carbon:arrow-up w-5 h-5" aria-hidden="true" />
+      <span class="i-lucide:arrow-up w-5 h-5" aria-hidden="true" />
     </button>
   </Transition>
 </template>

app/components/SearchSuggestionCard.vue

@@ -62,7 +62,7 @@ defineProps<{
       </div>
 
       <span
-        class="i-carbon:arrow-right rtl-flip w-4 h-4 text-fg-subtle group-hover:text-fg transition-colors shrink-0"
+        class="i-lucide:arrow-right rtl-flip w-4 h-4 text-fg-subtle group-hover:text-fg transition-colors shrink-0"
         aria-hidden="true"
       />
     </NuxtLink>

app/components/Terminal/Install.vue

@@ -219,7 +219,7 @@ const copyDevInstallCommand = () =>
               class="text-fg-subtle hover:text-fg-muted text-xs transition-colors focus-visible:outline-accent/70 rounded select-none"
               :title="$t('package.get_started.view_types', { package: typesPackageName })"
             >
-              <span class="i-carbon:arrow-right rtl-flip w-3 h-3 align-middle" aria-hidden="true" />
+              <span class="i-lucide:arrow-right rtl-flip w-3 h-3 align-middle" aria-hidden="true" />
               <span class="sr-only">View {{ typesPackageName }}</span>
             </NuxtLink>
           </div>

app/pages/about.vue

@@ -61,7 +61,7 @@ const roleLabels = computed(
             @click="router.back()"
             v-if="canGoBack"
           >
-            <span class="i-carbon:arrow-left rtl-flip w-4 h-4" aria-hidden="true" />
+            <span class="i-lucide:arrow-left rtl-flip w-4 h-4" aria-hidden="true" />
             <span class="hidden sm:inline">{{ $t('nav.back') }}</span>
           </button>
         </div>

app/pages/accessibility.vue

@@ -31,7 +31,7 @@ const canGoBack = useCanGoBack()
             @click="router.back()"
             v-if="canGoBack"
           >
-            <span class="i-carbon:arrow-left rtl-flip w-4 h-4" aria-hidden="true" />
+            <span class="i-lucide:arrow-left rtl-flip w-4 h-4" aria-hidden="true" />
             <span class="sr-only sm:not-sr-only">{{ $t('nav.back') }}</span>
           </button>
         </div>

app/pages/compare.vue

@@ -121,7 +121,7 @@ useSeoMeta({
             @click="router.back()"
             v-if="canGoBack"
           >
-            <span class="i-carbon:arrow-left rtl-flip w-4 h-4" aria-hidden="true" />
+            <span class="i-lucide:arrow-left rtl-flip w-4 h-4" aria-hidden="true" />
             <span class="hidden sm:inline">{{ $t('nav.back') }}</span>
           </button>
         </div>