yk-web/src/components/IconMark.vue
2026-04-30 13:34:02 +08:00

74 lines
2.1 KiB
Vue

<script setup>
defineProps({
name: { type: String, default: 'chart' },
size: { type: Number, default: 44 }
})
</script>
<template>
<svg
class="icon-mark"
:width="size"
:height="size"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2.25"
stroke-linecap="round"
stroke-linejoin="round"
aria-hidden="true"
>
<template v-if="name === 'user-flow'">
<path d="M18 21a8 8 0 0 0-16 0" />
<circle cx="10" cy="8" r="5" />
<path d="M22 20c0-3.37-2-6.5-4.5-8" />
<path d="M17 3.13a5 5 0 0 1 0 9.74" />
</template>
<template v-else-if="name === 'clipboard'">
<rect width="8" height="4" x="8" y="2" rx="1" ry="1" />
<path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2" />
<path d="M9 12h6" />
<path d="M9 16h6" />
</template>
<template v-else-if="name === 'chart'">
<path d="M3 3v18h18" />
<path d="M18 17V9" />
<path d="M13 17V5" />
<path d="M8 17v-3" />
</template>
<template v-else-if="name === 'ai'">
<path d="M12 8V4H8" />
<rect width="16" height="12" x="4" y="8" rx="2" />
<path d="M2 14h2" />
<path d="M20 14h2" />
<path d="M15 13v2" />
<path d="M9 13v2" />
</template>
<template v-else-if="name === 'check'">
<path d="M20 6 9 17l-5-5" />
</template>
<template v-else-if="name === 'map-pin'">
<path d="M20 10c0 4.99-5.54 10.19-7.4 11.8a1 1 0 0 1-1.2 0C9.54 20.19 4 14.99 4 10a8 8 0 0 1 16 0" />
<circle cx="12" cy="10" r="3" />
</template>
<template v-else-if="name === 'user'">
<path d="M18 20a6 6 0 0 0-12 0" />
<circle cx="12" cy="10" r="4" />
</template>
<template v-else-if="name === 'menu'">
<path d="M4 6h16" />
<path d="M4 12h16" />
<path d="M4 18h16" />
</template>
<template v-else-if="name === 'x'">
<path d="M18 6 6 18" />
<path d="m6 6 12 12" />
</template>
<template v-else>
<circle cx="12" cy="12" r="10" />
<path d="M12 8v4" />
<path d="M12 16h.01" />
</template>
</svg>
</template>