137 lines
6.0 KiB
JavaScript
137 lines
6.0 KiB
JavaScript
|
|
const Icon = {
|
|
props: {
|
|
css: {
|
|
type: String,
|
|
default: 'text-gray-800'
|
|
},
|
|
size: {
|
|
type: String,
|
|
default: 'md'
|
|
}
|
|
},
|
|
methods: {
|
|
defineSize: (val) => {
|
|
let size = '';
|
|
|
|
switch(val){
|
|
case 'xs':
|
|
size = 'w-3 h-3';
|
|
break;
|
|
case 'sm':
|
|
size = 'w-4 h-4';
|
|
break;
|
|
case 'lg':
|
|
size = 'w-6 h-6';
|
|
break;
|
|
default:
|
|
size = 'w-5 h-5';
|
|
break;
|
|
}
|
|
|
|
return size;
|
|
}
|
|
},
|
|
}
|
|
|
|
const AddressBookIcon = {
|
|
__proto__: Icon,
|
|
setup: () => {
|
|
console.log(this.props)
|
|
},
|
|
template: `<svg class="dark:text-white" :class="[defineSize(size),css]" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
|
|
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 6H5m2 3H5m2 3H5m2 3H5m2 3H5m11-1a2 2 0 0 0-2-2h-2a2 2 0 0 0-2 2M7 3h11a1 1 0 0 1 1 1v16a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1Zm8 7a2 2 0 1 1-4 0 2 2 0 0 1 4 0Z"/>
|
|
</svg>`
|
|
};
|
|
|
|
const AlignCenterIcon = {
|
|
__proto__: Icon,
|
|
template: `<svg class=" dark:text-white" :class="css" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
|
|
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 6h8M6 10h12M8 14h8M6 18h12"/>
|
|
</svg>`
|
|
}
|
|
|
|
const EditIcon = {
|
|
__proto__: Icon,
|
|
template: `<svg class="dark:text-white" :class="[defineSize(size),css]" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
|
|
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m14.304 4.844 2.852 2.852M7 7H4a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h11a1 1 0 0 0 1-1v-4.5m2.409-9.91a2.017 2.017 0 0 1 0 2.853l-6.844 6.844L8 14l.713-3.565 6.844-6.844a2.015 2.015 0 0 1 2.852 0Z"/>
|
|
</svg>`
|
|
}
|
|
|
|
const TrashBinIcon = {
|
|
__proto__: Icon,
|
|
template: `<svg class=" dark:text-white" :class="[defineSize(size),css]" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 24 24">
|
|
<path fill-rule="evenodd" d="M8.586 2.586A2 2 0 0 1 10 2h4a2 2 0 0 1 2 2v2h3a1 1 0 1 1 0 2v12a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V8a1 1 0 0 1 0-2h3V4a2 2 0 0 1 .586-1.414ZM10 6h4V4h-4v2Zm1 4a1 1 0 1 0-2 0v8a1 1 0 1 0 2 0v-8Zm4 0a1 1 0 1 0-2 0v8a1 1 0 1 0 2 0v-8Z" clip-rule="evenodd"/>
|
|
</svg>`
|
|
}
|
|
|
|
const SearchIcon = {
|
|
__proto__: Icon,
|
|
template: `<svg aria-hidden="true" class="text-gray-500 dark:text-gray-400" :class="[defineSize(size),css]" fill="none" stroke="currentColor" width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" />
|
|
</svg>`
|
|
}
|
|
|
|
const AdjustmentIcon = {
|
|
__proto__: Icon,
|
|
template: `<svg class="text-gray-500 dark:text-white" :class="[defineSize(size),css]" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" :class="[defineSize(size),css]" width="24" height="24" fill="none" viewBox="0 0 24 24">
|
|
<path stroke="currentColor" stroke-linecap="round" stroke-width="2" d="M20 6H10m0 0a2 2 0 1 0-4 0m4 0a2 2 0 1 1-4 0m0 0H4m16 6h-2m0 0a2 2 0 1 0-4 0m4 0a2 2 0 1 1-4 0m0 0H4m16 6H10m0 0a2 2 0 1 0-4 0m4 0a2 2 0 1 1-4 0m0 0H4"/>
|
|
</svg>
|
|
`
|
|
}
|
|
|
|
const AngleDownIcon = {
|
|
__proto__: Icon,
|
|
template: `<svg class="text-gray-500 dark:text-white" :class="[defineSize(size),css]" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
|
|
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m19 9-7 7-7-7"/>
|
|
</svg>
|
|
`
|
|
}
|
|
|
|
const AngleUpIcon = {
|
|
__proto__: Icon,
|
|
template: `<svg class="text-gray-800 dark:text-white" :class="[defineSize(size),css]" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
|
|
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m5 15 7-7 7 7"/>
|
|
</svg>
|
|
`
|
|
}
|
|
|
|
const UserEditIcon = {
|
|
__proto__: Icon,
|
|
template: `<svg class="dark:text-white" :class="[defineSize(size),css]" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
|
|
<path stroke="currentColor" stroke-linecap="square" stroke-linejoin="round" stroke-width="2" d="M7 19H5a1 1 0 0 1-1-1v-1a3 3 0 0 1 3-3h1m4-6a3 3 0 1 1-6 0 3 3 0 0 1 6 0Zm7.441 1.559a1.907 1.907 0 0 1 0 2.698l-6.069 6.069L10 19l.674-3.372 6.07-6.07a1.907 1.907 0 0 1 2.697 0Z"/>
|
|
</svg>
|
|
`
|
|
}
|
|
|
|
|
|
const CirclePlusIcon = {
|
|
__proto__: Icon,
|
|
template: `<svg class="dark:text-white" :class="[defineSize(size),css]" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
|
|
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 7.757v8.486M7.757 12h8.486M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"/>
|
|
</svg>
|
|
`
|
|
}
|
|
|
|
const PlusIcon = {
|
|
__proto__: Icon,
|
|
template: `<svg class="dark:text-white" :class="[defineSize(size),css]" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
|
|
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h14m-7 7V5"/>
|
|
</svg>
|
|
`
|
|
}
|
|
|
|
export {
|
|
AddressBookIcon,
|
|
AlignCenterIcon,
|
|
EditIcon,
|
|
TrashBinIcon,
|
|
SearchIcon,
|
|
AdjustmentIcon,
|
|
AngleDownIcon,
|
|
AngleUpIcon,
|
|
UserEditIcon,
|
|
CirclePlusIcon,
|
|
PlusIcon
|
|
};
|