X-Financial/web/src/components/shared/WorkbenchListIcon.vue

<template>
  <div
    class="workbench-list-icon"
    :class="[`workbench-list-icon--${iconKey}`, `workbench-list-icon--${iconStyle}`]"
    :style="{ '--icon-color': color, '--icon-accent': accent || color }"
  >
    <span class="workbench-list-icon__halo" aria-hidden="true"></span>
    <span class="workbench-list-icon__panel" aria-hidden="true">
      <span class="workbench-list-icon__shine" aria-hidden="true"></span>
      <span class="workbench-list-icon__art" aria-hidden="true" v-html="iconMarkup"></span>
    </span>
  </div>
</template>

<script setup>
import { computed } from 'vue'

import { workbenchIconMap } from '../../utils/workbenchIconAssets.js'

const props = defineProps({
  iconKey: { type: String, required: true },
  color: { type: String, default: 'var(--theme-primary)' },
  accent: { type: String, default: '' }
})

const iconMeta = computed(() => workbenchIconMap[props.iconKey] || workbenchIconMap.hospitality)
const iconMarkup = computed(() => iconMeta.value.markup)
const iconStyle = computed(() => iconMeta.value.style)
</script>

<style scoped>
.workbench-list-icon {
  position: relative;
  width: var(--workbench-list-icon-size, 48px);
  height: var(--workbench-list-icon-size, 48px);
  flex-shrink: 0;
  color: var(--icon-color, var(--theme-primary));
}

.workbench-list-icon__halo {
  position: absolute;
  inset: 6px auto 6px -2px;
  width: 4px;
  border-radius: 2px;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--icon-color, var(--theme-primary)) 78%, #ffffff),
    color-mix(in srgb, var(--icon-color, var(--theme-primary)) 28%, #ffffff)
  );
  opacity: 0.88;
}

.workbench-list-icon__panel {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 4px;
  border: 1px solid color-mix(in srgb, var(--icon-color, var(--theme-primary)) 24%, var(--line, #e2e8f0));
  background:
    radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.98), rgba(255, 255, 255, 0) 48%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.52)),
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--icon-accent, var(--theme-primary-soft)) 72%, #fff) 0%,
      #fff 46%,
      color-mix(in srgb, var(--icon-color, var(--theme-primary)) 12%, var(--surface-soft, #f8fafc)) 100%
    );
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    inset 0 -1px 0 color-mix(in srgb, var(--icon-color, var(--theme-primary)) 8%, rgba(255, 255, 255, 0.9)),
    0 8px 18px rgba(15, 23, 42, 0.055);
}

.workbench-list-icon__shine {
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, rgba(255, 255, 255, 0.42), transparent 44%);
  pointer-events: none;
}

.workbench-list-icon__art {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: var(--workbench-list-icon-art-size, 28px);
  height: var(--workbench-list-icon-art-size, 28px);
}

.workbench-list-icon__art :deep(.workbench-heroicon) {
  width: var(--workbench-list-icon-art-size, 28px);
  height: var(--workbench-list-icon-art-size, 28px);
  display: block;
  color: color-mix(in srgb, var(--icon-color, var(--theme-primary)) 86%, var(--theme-primary-active));
}

.workbench-list-icon--outline .workbench-list-icon__art :deep(.workbench-heroicon) {
  stroke-width: 1.55;
}

.workbench-list-icon__art :deep(.icon-fill) {
  fill: currentColor;
  stroke: none;
  opacity: 0.09;
}

.workbench-list-icon__art :deep(.icon-accent) {
  opacity: 0.36;
}

.workbench-list-icon__art :deep(.icon-muted) {
  opacity: 0.62;
}

.workbench-list-icon--solid .workbench-list-icon__art :deep(.workbench-heroicon path) {
  opacity: 0.96;
}

.workbench-list-icon__art :deep(.workbench-image-icon) {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 44px;
  height: 44px;
  max-width: none;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 4px 8px rgba(15, 23, 42, 0.15));
}
</style>