refactor: replace close icon

essenmitsosse · essenmitsosse · commit d9afb50459d1 · 2026-02-13T02:17:01.000+01:00
diff --git a/app/components/Code/MobileTreeDrawer.vue b/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:circle-x' : 'i-carbon: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:circle-x"
         />
       </div>
       <CodeFileTree
diff --git a/app/components/Compare/PackageSelector.vue b/app/components/Compare/PackageSelector.vue
@@ -214,7 +214,7 @@ function handleFocus() {
             })
           "
           @click="removePackage(pkg)"
-          classicon="i-carbon:close"
+          classicon="i-lucide:circle-x"
         />
       </TagStatic>
     </div>
diff --git a/app/components/Filter/Chips.vue b/app/components/Filter/Chips.vue
@@ -25,7 +25,7 @@ const emit = defineEmits<{
           :aria-label="$t('filters.remove_filter', { label: chip.label })"
           @click="emit('remove', chip)"
         >
-          <span class="i-carbon:close w-3 h-3" aria-hidden="true" />
+          <span class="i-lucide:circle-x w-3 h-3" aria-hidden="true" />
         </button>
       </TagStatic>
     </TransitionGroup>
diff --git a/app/components/Header/MobileMenu.client.vue b/app/components/Header/MobileMenu.client.vue
@@ -99,7 +99,7 @@ onUnmounted(deactivate)
                 :aria-label="$t('common.close')"
                 @click="closeMenu"
               >
-                <span class="i-carbon:close w-5 h-5" aria-hidden="true" />
+                <span class="i-lucide:circle-x w-5 h-5" aria-hidden="true" />
               </button>
             </div>
 
diff --git a/app/components/Modal.client.vue b/app/components/Modal.client.vue
@@ -57,7 +57,7 @@ defineExpose({
           type="button"
           :aria-label="$t('common.close')"
           @click="handleModalClose"
-          classicon="i-carbon:close"
+          classicon="i-lucide:circle-x"
         />
       </div>
       <!-- Modal body content -->
diff --git a/app/components/Org/MembersPanel.vue b/app/components/Org/MembersPanel.vue
@@ -486,7 +486,7 @@ watch(lastExecutionTime, () => {
               :aria-label="$t('org.members.remove_from_org', { name: member.name })"
               @click="handleRemoveMember(member.name)"
             >
-              <span class="i-carbon:close w-4 h-4" aria-hidden="true" />
+              <span class="i-lucide:circle-x w-4 h-4" aria-hidden="true" />
             </button>
           </div>
         </div>
@@ -572,7 +572,7 @@ watch(lastExecutionTime, () => {
               :aria-label="$t('org.members.cancel_add')"
               @click="showAddMember = false"
             >
-              <span class="i-carbon:close w-4 h-4" aria-hidden="true" />
+              <span class="i-lucide:circle-x w-4 h-4" aria-hidden="true" />
             </button>
           </div>
         </form>
diff --git a/app/components/Org/OperationsQueue.vue b/app/components/Org/OperationsQueue.vue
@@ -166,7 +166,7 @@ function getStatusIcon(status: string): string {
     case 'completed':
       return 'i-carbon:checkmark-filled'
     case 'failed':
-      return 'i-carbon:close-filled'
+      return 'i-lucide:circle-x-filled'
     default:
       return 'i-carbon:help'
   }
@@ -292,7 +292,7 @@ watch(isExecuting, executing => {
             :aria-label="$t('operations.queue.remove_operation')"
             @click="removeOperation(op.id)"
           >
-            <span class="i-carbon:close w-4 h-4" aria-hidden="true" />
+            <span class="i-lucide:circle-x w-4 h-4" aria-hidden="true" />
           </button>
         </div>
       </li>
@@ -411,7 +411,7 @@ watch(isExecuting, executing => {
             :class="
               op.status === 'completed'
                 ? 'i-carbon:checkmark-filled text-green-500'
-                : 'i-carbon:close-filled text-red-500'
+                : 'i-lucide:circle-x-filled text-red-500'
             "
             class="w-3.5 h-3.5 shrink-0 mt-0.5"
             aria-hidden="true"
@@ -431,7 +431,7 @@ watch(isExecuting, executing => {
             :aria-label="$t('operations.queue.remove_from_log')"
             @click="removeOperation(op.id)"
           >
-            <span class="i-carbon:close w-3 h-3" aria-hidden="true" />
+            <span class="i-lucide:circle-x w-3 h-3" aria-hidden="true" />
           </button>
         </li>
       </ul>
diff --git a/app/components/Org/TeamsPanel.vue b/app/components/Org/TeamsPanel.vue
@@ -433,7 +433,7 @@ watch(lastExecutionTime, () => {
                 :aria-label="$t('org.teams.remove_user', { user })"
                 @click="handleRemoveUser(teamName, user)"
               >
-                <span class="i-carbon:close w-3.5 h-3.5" aria-hidden="true" />
+                <span class="i-lucide:circle-x w-3.5 h-3.5" aria-hidden="true" />
               </button>
             </li>
           </ul>
@@ -470,7 +470,7 @@ watch(lastExecutionTime, () => {
                 :aria-label="$t('org.teams.cancel_add_user')"
                 @click="showAddUserFor = null"
               >
-                <span class="i-carbon:close w-4 h-4" aria-hidden="true" />
+                <span class="i-lucide:circle-x w-4 h-4" aria-hidden="true" />
               </button>
             </form>
           </div>
@@ -528,7 +528,7 @@ watch(lastExecutionTime, () => {
             :aria-label="$t('org.teams.cancel_create')"
             @click="showCreateTeam = false"
           >
-            <span class="i-carbon:close w-4 h-4" aria-hidden="true" />
+            <span class="i-lucide:circle-x w-4 h-4" aria-hidden="true" />
           </button>
         </form>
       </div>
diff --git a/app/components/Package/AccessControls.vue b/app/components/Package/AccessControls.vue
@@ -229,7 +229,7 @@ watch(
           :aria-label="$t('package.access.revoke_access', { name: collab.displayName })"
           @click="handleRevokeAccess(collab.name)"
         >
-          <span class="i-carbon:close w-3.5 h-3.5" aria-hidden="true" />
+          <span class="i-lucide:circle-x w-3.5 h-3.5" aria-hidden="true" />
         </button>
         <span v-else class="text-xs text-fg-subtle"> {{ $t('package.access.owner') }} </span>
       </li>
@@ -289,7 +289,7 @@ watch(
             :aria-label="$t('package.access.cancel_grant')"
             @click="showGrantAccess = false"
           >
-            <span class="i-carbon:close w-4 h-4" aria-hidden="true" />
+            <span class="i-lucide:circle-x w-4 h-4" aria-hidden="true" />
           </button>
         </div>
       </form>
diff --git a/app/components/Package/ClaimPackageModal.vue b/app/components/Package/ClaimPackageModal.vue
@@ -234,7 +234,7 @@ const previewPackageJson = computed(() => {
           v-else
           class="flex items-center gap-3 p-4 bg-red-500/10 border border-red-500/20 rounded-lg"
         >
-          <span class="i-carbon:close-filled text-red-500 w-5 h-5" aria-hidden="true" />
+          <span class="i-lucide:circle-x-filled 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>
diff --git a/app/components/Package/Maintainers.vue b/app/components/Package/Maintainers.vue
@@ -228,7 +228,7 @@ watch(
           "
           @click="handleRemoveOwner(maintainer.name)"
         >
-          <span class="i-carbon:close w-3.5 h-3.5" aria-hidden="true" />
+          <span class="i-lucide:circle-x w-3.5 h-3.5" aria-hidden="true" />
         </ButtonBase>
       </li>
     </ul>
@@ -270,7 +270,7 @@ watch(
           <ButtonBase
             :aria-label="$t('package.maintainers.cancel_add')"
             @click="showAddOwner = false"
-            classicon="i-carbon:close"
+            classicon="i-lucide:circle-x"
           />
         </form>
       </div>
diff --git a/app/components/Package/MetricsBadges.vue b/app/components/Package/MetricsBadges.vue
@@ -76,7 +76,7 @@ const typesHref = computed(() => {
               ? 'i-carbon:circle-dash motion-safe:animate-spin'
               : hasTypes
                 ? 'i-carbon:checkmark'
-                : 'i-carbon:close'
+                : 'i-lucide:circle-x'
           "
         >
           {{ $t('package.metrics.types_label') }}
@@ -98,7 +98,7 @@ const typesHref = computed(() => {
               ? 'i-carbon:circle-dash motion-safe:animate-spin'
               : hasEsm
                 ? 'i-carbon:checkmark'
-                : 'i-carbon:close'
+                : 'i-lucide:circle-x'
           "
         >
           ESM
diff --git a/app/components/Package/TrendsChart.vue b/app/components/Package/TrendsChart.vue
@@ -1652,7 +1652,7 @@ watch(selectedMetric, value => {
             </template>
 
             <template #menuIcon="{ isOpen }">
-              <span v-if="isOpen" class="i-carbon:close w-6 h-6" aria-hidden="true" />
+              <span v-if="isOpen" class="i-lucide:circle-x w-6 h-6" aria-hidden="true" />
               <span v-else class="i-carbon:overflow-menu-vertical w-6 h-6" aria-hidden="true" />
             </template>
             <template #optionCsv>
@@ -1679,7 +1679,7 @@ watch(selectedMetric, value => {
 
             <template #annotator-action-close>
               <span
-                class="i-carbon:close w-6 h-6 text-fg-subtle"
+                class="i-lucide:circle-x w-6 h-6 text-fg-subtle"
                 style="pointer-events: none"
                 aria-hidden="true"
               />
diff --git a/app/components/Package/VersionDistribution.vue b/app/components/Package/VersionDistribution.vue
@@ -514,7 +514,7 @@ const endDate = computed(() => {
 
             <!-- Contextual menu icon -->
             <template #menuIcon="{ isOpen }">
-              <span v-if="isOpen" class="i-carbon:close w-6 h-6" aria-hidden="true" />
+              <span v-if="isOpen" class="i-lucide:circle-x w-6 h-6" aria-hidden="true" />
               <span v-else class="i-carbon:overflow-menu-vertical w-6 h-6" aria-hidden="true" />
             </template>
 
@@ -546,7 +546,7 @@ const endDate = computed(() => {
             <!-- Annotator action icons -->
             <template #annotator-action-close>
               <span
-                class="i-carbon:close w-6 h-6 text-fg-subtle"
+                class="i-lucide:circle-x w-6 h-6 text-fg-subtle"
                 style="pointer-events: none"
                 aria-hidden="true"
               />

Original file line number	Diff line number	Diff line change
`@@ -214,7 +214,7 @@ function handleFocus() {`
`214`	`214`	`})`
`215`	`215`	`"`
`216`	`216`	`@click="removePackage(pkg)"`
`217`		`- classicon="i-carbon:close"`
	`217`	`+ classicon="i-lucide:circle-x"`
`218`	`218`	`/>`
`219`	`219`	`</TagStatic>`
`220`	`220`	`</div>`
Original file line number	Diff line number	Diff line change
`@@ -25,7 +25,7 @@ const emit = defineEmits<{`
`25`	`25`	`:aria-label="$t('filters.remove_filter', { label: chip.label })"`
`26`	`26`	`@click="emit('remove', chip)"`
`27`	`27`	`>`
`28`		`- <span class="i-carbon:close w-3 h-3" aria-hidden="true" />`
	`28`	`+ <span class="i-lucide:circle-x w-3 h-3" aria-hidden="true" />`
`29`	`29`	`</button>`
`30`	`30`	`</TagStatic>`
`31`	`31`	`</TransitionGroup>`
Original file line number	Diff line number	Diff line change
`@@ -99,7 +99,7 @@ onUnmounted(deactivate)`
`99`	`99`	`:aria-label="$t('common.close')"`
`100`	`100`	`@click="closeMenu"`
`101`	`101`	`>`
`102`		`- <span class="i-carbon:close w-5 h-5" aria-hidden="true" />`
	`102`	`+ <span class="i-lucide:circle-x w-5 h-5" aria-hidden="true" />`
`103`	`103`	`</button>`
`104`	`104`	`</div>`
`105`	`105`
Original file line number	Diff line number	Diff line change
`@@ -234,7 +234,7 @@ const previewPackageJson = computed(() => {`
`234`	`234`	`v-else`
`235`	`235`	`class="flex items-center gap-3 p-4 bg-red-500/10 border border-red-500/20 rounded-lg"`
`236`	`236`	`>`
`237`		`- <span class="i-carbon:close-filled text-red-500 w-5 h-5" aria-hidden="true" />`
	`237`	`+ <span class="i-lucide:circle-x-filled text-red-500 w-5 h-5" aria-hidden="true" />`
`238`	`238`	`<p class="font-mono text-sm text-fg">{{ $t('claim.modal.taken') }}</p>`
`239`	`239`	`</div>`
`240`	`240`	`</div>`