fix: 移除eslint功能
This commit is contained in:
42
src/renderer/components/base/LucideIcon.vue
Normal file
42
src/renderer/components/base/LucideIcon.vue
Normal file
@@ -0,0 +1,42 @@
|
||||
<script setup>
|
||||
import { computed } from 'vue';
|
||||
import * as LucideIcons from 'lucide-vue-next';
|
||||
|
||||
const props = defineProps({
|
||||
name: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
size: {
|
||||
type: [Number, String],
|
||||
default: 24,
|
||||
},
|
||||
color: {
|
||||
type: String,
|
||||
default: 'currentColor',
|
||||
},
|
||||
strokeWidth: {
|
||||
type: [Number, String],
|
||||
default: 2,
|
||||
},
|
||||
});
|
||||
|
||||
const icon = computed(() => {
|
||||
// Lucide 图标通常是 PascalCase,用户输入可能是 kebab-case
|
||||
const pascalName = props.name
|
||||
.split('-')
|
||||
.map((word) => word.charAt(0).toUpperCase() + word.slice(1))
|
||||
.join('');
|
||||
|
||||
return LucideIcons[pascalName] || LucideIcons[props.name] || null;
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<component :is="icon" v-if="icon" :size="size" :color="color" :stroke-width="strokeWidth" class="lucide-icon" />
|
||||
<span
|
||||
v-else
|
||||
class="lucide-icon-fallback"
|
||||
:style="{ width: size + 'px', height: size + 'px', display: 'inline-block' }"
|
||||
></span>
|
||||
</template>
|
||||
Reference in New Issue
Block a user