feat: use woot-icons
This commit is contained in:
@@ -21,10 +21,7 @@ const files = [
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Story
|
||||
title="Components/Icons/FileIcon"
|
||||
:layout="{ type: 'grid', width: '800' }"
|
||||
>
|
||||
<Story title="Components/Icons/FileIcon">
|
||||
<div class="grid grid-cols-4 gap-5">
|
||||
<div
|
||||
v-for="file in files"
|
||||
|
||||
@@ -11,42 +11,28 @@ const { fileType } = defineProps({
|
||||
|
||||
const fileTypeIcon = computed(() => {
|
||||
const fileIconMap = {
|
||||
'7z': 'i-teenyicons-zip-solid',
|
||||
csv: 'i-teenyicons-csv-solid',
|
||||
doc: 'i-teenyicons-doc-solid',
|
||||
docx: 'i-teenyicons-doc-solid',
|
||||
json: 'i-teenyicons-text-document-solid',
|
||||
odt: 'i-teenyicons-doc-solid',
|
||||
pdf: 'i-teenyicons-pdf-solid',
|
||||
ppt: 'i-teenyicons-ppt-solid',
|
||||
pptx: 'i-teenyicons-ppt-solid',
|
||||
rar: 'i-teenyicons-zip-solid',
|
||||
rtf: 'i-teenyicons-doc-solid',
|
||||
tar: 'i-teenyicons-zip-solid',
|
||||
txt: 'i-teenyicons-text-document-solid',
|
||||
xls: 'i-teenyicons-xls-solid',
|
||||
xlsx: 'i-teenyicons-xls-solid',
|
||||
zip: 'i-teenyicons-zip-solid',
|
||||
'7z': 'i-woot-file-zip',
|
||||
csv: 'i-woot-file-csv',
|
||||
doc: 'i-woot-file-doc',
|
||||
docx: 'i-woot-file-doc',
|
||||
json: 'i-woot-file-txt',
|
||||
odt: 'i-woot-file-doc',
|
||||
pdf: 'i-woot-file-pdf',
|
||||
ppt: 'i-woot-file-ppt',
|
||||
pptx: 'i-woot-file-ppt',
|
||||
rar: 'i-woot-file-zip',
|
||||
rtf: 'i-woot-file-doc',
|
||||
tar: 'i-woot-file-zip',
|
||||
txt: 'i-woot-file-txt',
|
||||
xls: 'i-woot-file-xls',
|
||||
xlsx: 'i-woot-file-xls',
|
||||
zip: 'i-woot-file-zip',
|
||||
};
|
||||
|
||||
return fileIconMap[fileType] || 'i-teenyicons-text-document-solid';
|
||||
});
|
||||
|
||||
const iconColor = computed(() => {
|
||||
const colorMap = {
|
||||
'i-teenyicons-csv-solid': '#217346',
|
||||
'i-teenyicons-doc-solid': '#2B579A',
|
||||
'i-teenyicons-pdf-solid': '#FF0000',
|
||||
'i-teenyicons-ppt-solid': '#D24726',
|
||||
'i-teenyicons-text-document-solid': '#41A5EE',
|
||||
'i-teenyicons-xls-solid': '#217346',
|
||||
'i-teenyicons-zip-solid': '#FDB813',
|
||||
};
|
||||
|
||||
return colorMap[fileTypeIcon.value];
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Icon :icon="fileTypeIcon" :style="{ color: iconColor }" />
|
||||
<Icon :icon="fileTypeIcon" />
|
||||
</template>
|
||||
|
||||
Reference in New Issue
Block a user