fix(ui): fix missing icons

In #1454, Carbon icons were removed. This caused a conflict when later that day #1417 was merged. Additionally, in #1454 some non-existing icons were used, like x-filled, or check-filled.

Author: wojtekmaj

app/components/Org/OperationsQueue.vue

@@ -164,9 +164,9 @@ function getStatusIcon(status: string): string {
     case 'running':
       return 'i-svg-spinners:ring-resize'
     case 'completed':
-      return 'i-lucide:check-filled'
+      return 'i-lucide:check'
     case 'failed':
-      return 'i-lucide:x-filled'
+      return 'i-lucide:x'
     default:
       return 'i-lucide:circle-question-mark'
   }
@@ -410,8 +410,8 @@ watch(isExecuting, executing => {
           <span
             :class="
               op.status === 'completed'
-                ? 'i-lucide:check-filled text-green-500'
-                : 'i-lucide:x-filled text-red-500'
+                ? 'i-lucide:check text-green-500'
+                : 'i-lucide:x text-red-500'
             "
             class="w-3.5 h-3.5 shrink-0 mt-0.5"
             aria-hidden="true"

app/components/Package/ClaimPackageModal.vue

@@ -158,7 +158,7 @@ const previewPackageJson = computed(() => {
       <div
         class="flex items-center gap-3 p-4 bg-green-500/10 border border-green-500/20 rounded-lg"
       >
-        <span class="i-lucide:check-filled text-green-500 w-6 h-6" aria-hidden="true" />
+        <span class="i-lucide:check text-green-500 w-6 h-6" aria-hidden="true" />
         <div>
           <p class="font-mono text-sm text-fg">{{ $t('claim.modal.success') }}</p>
           <p class="text-xs text-fg-muted">
@@ -226,15 +226,15 @@ const previewPackageJson = computed(() => {
           v-if="checkResult.available"
           class="flex items-center gap-3 p-4 bg-green-500/10 border border-green-500/20 rounded-lg"
         >
-          <span class="i-lucide:check-filled text-green-500 w-5 h-5" aria-hidden="true" />
+          <span class="i-lucide:check text-green-500 w-5 h-5" aria-hidden="true" />
           <p class="font-mono text-sm text-fg">{{ $t('claim.modal.available') }}</p>
         </div>
 
         <div
           v-else
           class="flex items-center gap-3 p-4 bg-red-500/10 border border-red-500/20 rounded-lg"
         >
-          <span class="i-lucide:x-filled text-red-500 w-5 h-5" aria-hidden="true" />
+          <span class="i-lucide:x text-red-500 w-5 h-5" aria-hidden="true" />
           <p class="font-mono text-sm text-fg">{{ $t('claim.modal.taken') }}</p>
         </div>
       </div>

app/components/Package/TrendsChart.vue

@@ -1114,20 +1114,20 @@ function drawEstimationLine(svg: Record<string, any>) {
 
     lines.push(`
       <line
-        x1="${previousPoint.x}" 
-        y1="${previousPoint.y}" 
-        x2="${lastPoint.x}" 
-        y2="${lastPoint.y}" 
-        stroke="${colors.value.bg}" 
+        x1="${previousPoint.x}"
+        y1="${previousPoint.y}"
+        x2="${lastPoint.x}"
+        y2="${lastPoint.y}"
+        stroke="${colors.value.bg}"
         stroke-width="3"
         opacity="1"
       />
-      <line 
-        x1="${previousPoint.x}" 
-        y1="${previousPoint.y}" 
-        x2="${lastPoint.x}" 
-        y2="${lastPoint.y}" 
-        stroke="${stroke}" 
+      <line
+        x1="${previousPoint.x}"
+        y1="${previousPoint.y}"
+        x2="${lastPoint.x}"
+        y2="${lastPoint.y}"
+        stroke="${stroke}"
         stroke-width="3"
         stroke-dasharray="4 8"
         stroke-linecap="round"
@@ -1240,7 +1240,7 @@ function drawSvgPrintLegend(svg: Record<string, any>) {
     !isZoomed.value
   ) {
     seriesNames.push(`
-        <line 
+        <line
           x1="${svg.drawingArea.left + 12}"
           y1="${svg.drawingArea.top + 24 * data.length}"
           x2="${svg.drawingArea.left + 24}"
@@ -1721,7 +1721,7 @@ watch(selectedMetric, value => {
             </template>
             <template #optionAltCopy>
               <span
-                class="i-carbon:accessibility-alt w-6 h-6 text-fg-subtle"
+                class="i-lucide:person-standing w-6 h-6 text-fg-subtle"
                 style="pointer-events: none"
                 aria-hidden="true"
               />

app/components/Package/Versions.vue

@@ -502,7 +502,7 @@ function majorGroupContainsCurrent(group: (typeof otherMajorGroups.value)[0]): b
           <TooltipApp interactive position="top">
             <span
               tabindex="0"
-              class="i-carbon:information w-3.5 h-3.5 text-fg-subtle cursor-help shrink-0 rounded-sm"
+              class="i-lucide:info w-3.5 h-3.5 text-fg-subtle cursor-help shrink-0 rounded-sm"
               role="img"
               :aria-label="$t('package.versions.filter_help')"
             />

app/components/Readme.vue

@@ -153,7 +153,7 @@ function handleClick(event: MouseEvent) {
 .readme :deep(a[href^='#']::after) {
   /* I don't know what kind of sorcery this is, but it ensures this icon can't wrap to a new line on its own. */
   content: '__';
-  @apply inline i-carbon:link rtl-flip ms-1 opacity-0;
+  @apply inline i-lucide:link rtl-flip ms-1 opacity-0;
 }
 
 .readme :deep(a[href^='#']:hover::after) {

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

@@ -762,7 +762,7 @@ const showSkeleton = shallowRef(false)
               :aria-label="copiedVersion ? $t('common.copied') : $t('package.copy_version')"
             >
               <span
-                :class="copiedVersion ? 'i-carbon:checkmark' : 'i-carbon:copy'"
+                :class="copiedVersion ? 'i-lucide:check' : 'i-lucide:copy'"
                 class="w-3.5 h-3.5"
                 aria-hidden="true"
               />