File download feature

README.md

@@ -147,6 +147,9 @@ export default {
       // called when the user scrolls message list to top
       // leverage pagination for loading another page of messages
     },
+    downloadMessage(message) {
+      console.log('Try to download the file')
+    },
     handleOnType () {
       console.log('Emit typing event')
     },
@@ -195,6 +198,7 @@ For more detailed examples see the demo folder.
 |-----|--------|---------------|
 | onType | undefined | Fires when user types on the message input |
 | edit | `message` | Fires after user edited message |
+| download | `message` | Download file only if document type is file |
 
 #### Slots
 
@@ -284,7 +288,51 @@ Message objects are rendered differently depending on their type. Currently, onl
     }
   }
 }
+
+{
+  author: 'me',
+  type: 'file',
+  id: 1, // or text '1'
+  isEdited: false,
+  data: {
+    file: {
+      id: 1,
+      mime: 'image/png',
+      name: 'test.png',
+      size: 588147,
+      meta: '06-16-2019 12:45'
+    }
+  }
+}
+
 ```
+##### file message object
+
+different file type are represented in `vue-beautiful-chat`
+
+WORD file <img src="https://user-images.githubusercontent.com/16837548/94787922-36f5e700-03d3-11eb-8e95-f468938d24c2.png">
+
+PDF file <img src="https://user-images.githubusercontent.com/16837548/94788088-66a4ef00-03d3-11eb-9907-b380a6bb1907.png">
+
+EXCEL file <img src="https://user-images.githubusercontent.com/16837548/94788119-70c6ed80-03d3-11eb-9031-ce46131e0b06.png">
+
+POWER POINT file <img src="https://user-images.githubusercontent.com/16837548/94788155-7cb2af80-03d3-11eb-80dc-bb77a4a0d429.png">
+
+ZIP file <img src="https://user-images.githubusercontent.com/16837548/94788179-850aea80-03d3-11eb-8b5a-8945e2232c2c.png">
+
+JPG/JPEG file <img src="https://user-images.githubusercontent.com/16837548/94788216-918f4300-03d3-11eb-9778-a148828fba8d.png">
+
+PNG file <img src="https://user-images.githubusercontent.com/16837548/94788250-9b18ab00-03d3-11eb-91be-4af48dea21eb.png">
+
+SVG file <img src="https://user-images.githubusercontent.com/16837548/94788290-a53aa980-03d3-11eb-9c37-936f1c5ac53f.png">
+
+CSV file <img src="https://user-images.githubusercontent.com/16837548/94788314-acfa4e00-03d3-11eb-8e69-835a699b7ea0.png">
+
+And if we have an other type file we will have this icon <img src="https://user-images.githubusercontent.com/16837548/94788364-be435a80-03d3-11eb-870a-f0defe70ef21.png">
+
+
+
+
 
 
 #### Quick replies

demo/src/App.vue

@@ -4,7 +4,7 @@
       :chosenColor="chosenColor"
       :colors="colors"
     />
-    <beautiful-chat 
+    <beautiful-chat
       :alwaysScrollToBottom="alwaysScrollToBottom"
       :close="closeChat"
       :colors="colors"
@@ -29,13 +29,14 @@
       @onType="handleOnType"
       @edit="editMessage"
       @remove="removeMessage"
+      @download="downloadMessage"
     >
       <template v-slot:text-message-toolbox="scopedProps">
         <button v-if="!scopedProps.me && scopedProps.message.type==='text'" @click.prevent="like(scopedProps.message.id)">
           👍
         </button>
       </template>
-      <template v-slot:text-message-body="scopedProps"> 
+      <template v-slot:text-message-body="scopedProps">
         <p class="sc-message--text-content" v-html="scopedProps.messageText"></p>
         <p v-if="scopedProps.message.data.meta" class='sc-message--meta' :style="{color: scopedProps.messageColors.color}">{{scopedProps.message.data.meta}}</p>
         <p v-if="scopedProps.message.isEdited || scopedProps.message.liked" class='sc-message--edited'>
@@ -204,6 +205,7 @@ export default {
       m.type = 'system';
       m.data.text = 'This message has been removed';
     },
+    downloadMessage(message){},
     like(id){
       const m = this.messageList.findIndex(m => m.id === id);
       var msg = this.messageList[m];

package.json

@@ -23,6 +23,8 @@
     "kind-of": "6.0.3",
     "minimist": "1.2.3",
     "msgdown": "^1.0.2",
+    "pretty-bytes": "^5.4.1",
+    "smart-truncate": "^1.0.1",
     "v-tooltip": "^2.0.1"
   },
   "devDependencies": {

src/ChatWindow.vue

@@ -26,6 +26,7 @@
       :message-styling="messageStyling"
       @scrollToTop="$emit('scrollToTop')"
       @remove="$emit('remove', $event)"
+      @download="$emit('download', $event)"
     >
       <template v-slot:user-avatar="scopedProps">
         <slot name="user-avatar" :user="scopedProps.user" :message="scopedProps.message"> </slot>

src/Launcher.vue

@@ -36,6 +36,7 @@
       @onType="$emit('onType')"
       @edit="$emit('edit', $event)"
       @remove="$emit('remove', $event)"
+      @download="$emit('download', $event)"
     >
       <template v-slot:header>
         <slot name="header"> </slot>

src/Message.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :id="message.id" class="sc-message">
+  <div class="sc-message" :id="message.type === 'file' ? message.data.file.id : message.id">
     <div
       class="sc-message--content"
       :class="{
@@ -48,17 +48,27 @@
       </TextMessage>
       <EmojiMessage v-else-if="message.type === 'emoji'" :data="message.data" />
       <FileMessage
-        v-else-if="message.type === 'file'"
+        v-else-if="message.type === 'file' && message.data.file.mime"
         :data="message.data"
         :message-colors="messageColors"
+        @download="$emit('download')"
+      />
+      <ImageMessage
+        v-else-if="message.type === 'file' && message.data.file.url"
+        :data="message.data"
+        :message-colors="messageColors"
+      />
+      <TypingMessage
+        v-else-if="message.type === 'typing'"
+        :message-colors="messageColors"
       />
-      <TypingMessage v-else-if="message.type === 'typing'" :message-colors="messageColors" />
       <SystemMessage
         v-else-if="message.type === 'system'"
         :data="message.data"
         :message-colors="messageColors"
       >
-        <slot name="system-message-body" :message="message.data"> </slot>
+        <slot name="system-message-body" :message="message.data">
+        </slot>
       </SystemMessage>
     </div>
   </div>
@@ -67,6 +77,7 @@
 <script>
 import TextMessage from './messages/TextMessage.vue'
 import FileMessage from './messages/FileMessage.vue'
+import ImageMessage from './messages/ImageMessage.vue'
 import EmojiMessage from './messages/EmojiMessage.vue'
 import TypingMessage from './messages/TypingMessage.vue'
 import SystemMessage from './messages/SystemMessage.vue'
@@ -183,7 +194,7 @@ export default {
 }
 
 .sc-message--meta {
-  font-size: xx-small;
+  font-size: x-small;
   margin-bottom: 0px;
   color: white;
   text-align: center;

src/MessageList.vue

@@ -17,6 +17,7 @@
       :show-confirmation-deletion="showConfirmationDeletion"
       :confirmation-deletion-message="confirmationDeletionMessage"
       @remove="$emit('remove', message)"
+      @download="$emit('download', message)"
     >
       <template v-slot:user-avatar="scopedProps">
         <slot name="user-avatar" :user="scopedProps.user" :message="scopedProps.message"> </slot>

src/assets/download-icon.svg.vue

@@ -0,0 +1,8 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" width="30px" height="30px">
+    <path fill="none" stroke-miterlimit="10" stroke-width="2" d="M31 28L25 34 19 28"/>
+    <path fill="none" stroke-miterlimit="10" stroke-width="2" d="M31 28L25 34 19 28"/>
+    <path fill="none" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="2" d="M25 20L25 34"/>
+    <path fill="none" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M43,24.3c0-0.1,0-0.2,0-0.3c0-5.5-4.5-10-10-10c-1.2,0-2.3,0.2-3.4,0.6C27.7,11.3,24.1,9,20,9C13.9,9,9,13.9,9,20c0,0.1,0,0.1,0,0.2c-4.6,0.9-8,5-8,9.8c0,5.5,4.5,10,10,10c5.2,0,26.3,0,30,0c4.4,0,8-3.6,8-8C49,28.3,46.4,25.1,43,24.3z"/>
+  </svg>
+</template>

src/assets/mimes/application_msword.svg.vue

@@ -0,0 +1,3 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" id="OutLine" viewBox="0 0 512 512" width="512" height="512"><path d="M349.657,18.343A8,8,0,0,0,344,16H120A56.064,56.064,0,0,0,64,72V440a56.064,56.064,0,0,0,56,56H392a56.064,56.064,0,0,0,56-56V120a8,8,0,0,0-2.343-5.657ZM352,43.313,420.687,112H392a40.045,40.045,0,0,1-40-40ZM120,32H336V72a56.064,56.064,0,0,0,56,56h40V352H80V72A40.045,40.045,0,0,1,120,32ZM392,480H120a40.045,40.045,0,0,1-40-40V368H432v72A40.045,40.045,0,0,1,392,480Z"/><path d="M168,384a8,8,0,0,0-8,8v64a8,8,0,0,0,8,8,40,40,0,0,0,0-80Zm8,62.629V401.371a24,24,0,0,1,0,45.258Z"/><path d="M256,384c-17.645,0-32,17.944-32,40s14.355,40,32,40,32-17.944,32-40S273.645,384,256,384Zm0,64c-8.673,0-16-10.991-16-24s7.327-24,16-24,16,10.991,16,24S264.673,448,256,448Z"/><path d="M336,400a10.708,10.708,0,0,1,4.59,1.058,8,8,0,1,0,6.82-14.474A26.581,26.581,0,0,0,336,384c-17.645,0-32,17.944-32,40s14.355,40,32,40a26.6,26.6,0,0,0,11.411-2.584,8,8,0,0,0-6.822-14.473A10.71,10.71,0,0,1,336,448c-8.673,0-16-10.991-16-24S327.327,400,336,400Z"/><path d="M192,168a8,8,0,0,0,8,8H376a8,8,0,0,0,0-16H200A8,8,0,0,0,192,168Z"/><path d="M136,208H280a8,8,0,0,0,0-16H136a8,8,0,0,0,0,16Z"/><path d="M376,224H248a8,8,0,0,0,0,16H376a8,8,0,0,0,0-16Z"/><path d="M136,272H320a8,8,0,0,0,0-16H136a8,8,0,0,0,0,16Z"/><path d="M136,176h32a8,8,0,0,0,0-16H136a8,8,0,0,0,0,16Z"/><path d="M376,192H312a8,8,0,0,0,0,16h64a8,8,0,0,0,0-16Z"/><path d="M136,240h80a8,8,0,0,0,0-16H136a8,8,0,0,0,0,16Z"/><path d="M376,256H352a8,8,0,0,0,0,16h24a8,8,0,0,0,0-16Z"/><path d="M136,304h48a8,8,0,0,0,0-16H136a8,8,0,0,0,0,16Z"/><path d="M136,144h80a8,8,0,0,0,0-16H136a8,8,0,0,0,0,16Z"/><path d="M296,288H216a8,8,0,0,0,0,16h80a8,8,0,0,0,0-16Z"/><path d="M376,288H328a8,8,0,0,0,0,16h48a8,8,0,0,0,0-16Z"/></svg>
+</template>

src/assets/mimes/application_pdf.svg.vue

@@ -0,0 +1,3 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" id="OutLine" viewBox="0 0 512 512" width="512" height="512"><path d="M349.657,18.343A8,8,0,0,0,344,16H120A56.064,56.064,0,0,0,64,72V440a56.064,56.064,0,0,0,56,56H392a56.064,56.064,0,0,0,56-56V120a8,8,0,0,0-2.343-5.657ZM352,43.313,420.687,112H392a40.045,40.045,0,0,1-40-40ZM120,32H336V72a56.064,56.064,0,0,0,56,56h40V352H80V72A40.045,40.045,0,0,1,120,32ZM392,480H120a40.045,40.045,0,0,1-40-40V368H432v72A40.045,40.045,0,0,1,392,480Z"/><path d="M336,384H304a8,8,0,0,0-8,8v64a8,8,0,0,0,16,0V432h8a8,8,0,0,0,0-16h-8V400h24a8,8,0,0,0,0-16Z"/><path d="M192,384H176a8,8,0,0,0-8,8v64a8,8,0,0,0,16,0V432h8a24,24,0,0,0,0-48Zm0,32h-8V400h8a8,8,0,0,1,0,16Z"/><path d="M240,384a8,8,0,0,0-8,8v64a8,8,0,0,0,8,8,40,40,0,0,0,0-80Zm8,62.629V401.371a24,24,0,0,1,0,45.258Z"/><path d="M248,176H376a8,8,0,0,0,0-16H248a8,8,0,0,0,0,16Z"/><path d="M248,208h32a8,8,0,0,0,0-16H248a8,8,0,0,0,0,16Z"/><path d="M248,240H376a8,8,0,0,0,0-16H248a8,8,0,0,0,0,16Z"/><path d="M136,272H320a8,8,0,0,0,0-16H136a8,8,0,0,0,0,16Z"/><path d="M376,192H312a8,8,0,0,0,0,16h64a8,8,0,0,0,0-16Z"/><path d="M376,256H352a8,8,0,0,0,0,16h24a8,8,0,0,0,0-16Z"/><path d="M136,304h48a8,8,0,0,0,0-16H136a8,8,0,0,0,0,16Z"/><path d="M296,288H216a8,8,0,0,0,0,16h80a8,8,0,0,0,0-16Z"/><path d="M376,288H328a8,8,0,0,0,0,16h48a8,8,0,0,0,0-16Z"/><path d="M136,240h80a8,8,0,0,0,8-8V136a8,8,0,0,0-8-8H136a8,8,0,0,0-8,8v96A8,8,0,0,0,136,240Zm8-96h64v80H144Z"/><path d="M248,144h64a8,8,0,0,0,0-16H248a8,8,0,0,0,0,16Z"/></svg>
+</template>

src/assets/mimes/application_vnd.ms-excel.svg.vue

@@ -0,0 +1,3 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" id="OutLine" viewBox="0 0 512 512" width="512" height="512"><path d="M349.657,18.343A8,8,0,0,0,344,16H120A56.064,56.064,0,0,0,64,72V440a56.064,56.064,0,0,0,56,56H392a56.064,56.064,0,0,0,56-56V120a8,8,0,0,0-2.343-5.657ZM352,43.313,420.687,112H392a40.045,40.045,0,0,1-40-40ZM120,32H336V72a56.064,56.064,0,0,0,56,56h40V352H80V72A40.045,40.045,0,0,1,120,32ZM392,480H120a40.045,40.045,0,0,1-40-40V368H432v72A40.045,40.045,0,0,1,392,480Z"/><path d="M272,448H248V392a8,8,0,0,0-16,0v64a8,8,0,0,0,8,8h32a8,8,0,0,0,0-16Z"/><path d="M211.578,384.845a8,8,0,0,0-10.733,3.577L192,406.112l-8.845-17.69a8,8,0,0,0-14.31,7.156L183.056,424l-14.211,28.422a8,8,0,1,0,14.31,7.156L192,441.888l8.845,17.69a8,8,0,1,0,14.31-7.156L200.944,424l14.211-28.422A8,8,0,0,0,211.578,384.845Z"/><path d="M320,400h16a8,8,0,0,0,0-16H320a24,24,0,0,0,0,48,8,8,0,0,1,0,16H304a8,8,0,0,0,0,16h16a24,24,0,0,0,0-48,8,8,0,0,1,0-16Z"/><path d="M136,304H376a8,8,0,0,0,8-8V152a8,8,0,0,0-8-8H136a8,8,0,0,0-8,8V296A8,8,0,0,0,136,304Zm8-48h64v32H144Zm144-48v32H224V208Zm-64-16V160h64v32Zm80,16h64v32H304Zm-16,48v32H224V256Zm-80-16H144V208h64Zm96,48V256h64v32Zm64-96H304V160h64ZM208,160v32H144V160Z"/></svg>
+</template>

src/assets/mimes/application_vnd.ms-powerpoint.svg.vue

@@ -0,0 +1,3 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" id="OutLine" viewBox="0 0 512 512" width="512" height="512"><path d="M184,224a80,80,0,1,0,80-80,8,8,0,0,0-8,8v64H192A8,8,0,0,0,184,224Zm80,8a8,8,0,0,0,8-8V160.5A64,64,0,1,1,200.5,232Z"/><path d="M160,200h72a8,8,0,0,0,8-8V120a8,8,0,0,0-8-8,80.091,80.091,0,0,0-80,80A8,8,0,0,0,160,200Zm64-71.5V184H168.5A64.138,64.138,0,0,1,224,128.5Z"/><path d="M349.657,18.343A8,8,0,0,0,344,16H120A56.064,56.064,0,0,0,64,72V440a56.064,56.064,0,0,0,56,56H392a56.064,56.064,0,0,0,56-56V120a8,8,0,0,0-2.343-5.657ZM352,43.313,420.687,112H392a40.045,40.045,0,0,1-40-40ZM120,32H336V72a56.064,56.064,0,0,0,56,56h40V352H80V72A40.045,40.045,0,0,1,120,32ZM392,480H120a40.045,40.045,0,0,1-40-40V368H432v72A40.045,40.045,0,0,1,392,480Z"/><path d="M256,384H240a8,8,0,0,0-8,8v64a8,8,0,0,0,16,0V432h8a24,24,0,0,0,0-48Zm0,32h-8V400h8a8,8,0,0,1,0,16Z"/><path d="M192,384H176a8,8,0,0,0-8,8v64a8,8,0,0,0,16,0V432h8a24,24,0,0,0,0-48Zm0,32h-8V400h8a8,8,0,0,1,0,16Z"/><path d="M336,384H304a8,8,0,0,0,0,16h8v56a8,8,0,0,0,16,0V400h8a8,8,0,0,0,0-16Z"/></svg>
+</template>

src/assets/mimes/application_zip.svg.vue

@@ -0,0 +1,3 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" id="OutLine" viewBox="0 0 512 512" width="512" height="512"><path d="M349.657,18.343A8,8,0,0,0,344,16H120A56.063,56.063,0,0,0,64,72V440a56.063,56.063,0,0,0,56,56H392a56.063,56.063,0,0,0,56-56V120a8,8,0,0,0-2.343-5.657ZM352,43.313,420.687,112H392a40.045,40.045,0,0,1-40-40ZM120,32h56V48H160a8,8,0,0,0,0,16h16V80H160a8,8,0,0,0,0,16h16v16H160a8,8,0,0,0,0,16h16v16H160a8,8,0,0,0,0,16h16v16H160a8,8,0,0,0,0,16h16v16H160a8,8,0,0,0,0,16h16v16a8,8,0,0,0-7.761,6.06l-5.906,23.622a24,24,0,1,0,43.334,0l-5.906-23.622A8,8,0,0,0,192,240V224h16a8,8,0,0,0,0-16H192V192h16a8,8,0,0,0,0-16H192V160h16a8,8,0,0,0,0-16H192V128h16a8,8,0,0,0,0-16H192V96h16a8,8,0,0,0,0-16H192V64h16a8,8,0,0,0,0-16H192V32H336V72a56.063,56.063,0,0,0,56,56h40V352H80V72A40.045,40.045,0,0,1,120,32Zm72,248a8,8,0,0,1-16,0,7.9,7.9,0,0,1,.938-3.756,8,8,0,0,0,.7-1.825L182.246,256h3.508l4.605,18.419a8,8,0,0,0,.7,1.825A7.9,7.9,0,0,1,192,280ZM392,480H120a40.045,40.045,0,0,1-40-40V368H432v72A40.045,40.045,0,0,1,392,480Z"/><path d="M272,400a8,8,0,0,0,0-16H240a8,8,0,0,0,0,16h8v48h-8a8,8,0,0,0,0,16h32a8,8,0,0,0,0-16h-8V400Z"/><path d="M320,384H304a8,8,0,0,0-8,8v64a8,8,0,0,0,16,0V432h8a24,24,0,0,0,0-48Zm0,32h-8V400h8a8,8,0,0,1,0,16Z"/><path d="M208,448H188.944l26.211-52.422A8,8,0,0,0,208,384H176a8,8,0,0,0,0,16h19.056l-26.211,52.422A8,8,0,0,0,176,464h32a8,8,0,0,0,0-16Z"/></svg>
+</template>

src/assets/mimes/default_file.svg.vue

@@ -0,0 +1,3 @@
+<template>
+  <svg id="Outline" height="512" viewBox="0 0 512 512" width="512" xmlns="http://www.w3.org/2000/svg"><path d="m104 496h304a40.045 40.045 0 0 0 40-40v-336a8 8 0 0 0 -2.343-5.657l-96-96a8 8 0 0 0 -5.657-2.343h-240a40.045 40.045 0 0 0 -40 40v400a40.045 40.045 0 0 0 40 40zm248-452.687 68.687 68.687h-44.687a24.027 24.027 0 0 1 -24-24zm-272 12.687a24.028 24.028 0 0 1 24-24h232v56a40.045 40.045 0 0 0 40 40h56v328a24.028 24.028 0 0 1 -24 24h-304a24.028 24.028 0 0 1 -24-24z"/><path d="m192 168a8 8 0 0 0 8 8h192a8 8 0 0 0 0-16h-192a8 8 0 0 0 -8 8z"/><path d="m120 224h160a8 8 0 0 0 0-16h-160a8 8 0 0 0 0 16z"/><path d="m392 256h-144a8 8 0 0 0 0 16h144a8 8 0 0 0 0-16z"/><path d="m120 320h192a8 8 0 0 0 0-16h-192a8 8 0 0 0 0 16z"/><path d="m120 176h48a8 8 0 0 0 0-16h-48a8 8 0 0 0 0 16z"/><path d="m392 208h-80a8 8 0 0 0 0 16h80a8 8 0 0 0 0-16z"/><path d="m120 272h96a8 8 0 0 0 0-16h-96a8 8 0 0 0 0 16z"/><path d="m392 304h-48a8 8 0 0 0 0 16h48a8 8 0 0 0 0-16z"/><path d="m328 400h-80a8 8 0 0 0 0 16h80a8 8 0 0 0 0-16z"/><path d="m120 416h96a8 8 0 0 0 0-16h-96a8 8 0 0 0 0 16z"/><path d="m120 368h64a8 8 0 0 0 0-16h-64a8 8 0 0 0 0 16z"/><path d="m120 128h96a8 8 0 0 0 0-16h-96a8 8 0 0 0 0 16z"/><path d="m304 360a8 8 0 0 0 -8-8h-80a8 8 0 0 0 0 16h80a8 8 0 0 0 8-8z"/><path d="m392 352h-64a8 8 0 0 0 0 16h64a8 8 0 0 0 0-16z"/><path d="m392 400h-32a8 8 0 0 0 0 16h32a8 8 0 0 0 0-16z"/></svg>
+</template>

src/assets/mimes/image_jpeg.svg.vue

@@ -0,0 +1,3 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" id="OutLine" viewBox="0 0 512 512" width="512" height="512"><path d="M349.657,18.343A8,8,0,0,0,344,16H120A56.063,56.063,0,0,0,64,72V440a56.063,56.063,0,0,0,56,56H392a56.063,56.063,0,0,0,56-56V120a8,8,0,0,0-2.343-5.657ZM352,43.313,420.687,112H392a40.045,40.045,0,0,1-40-40ZM120,32H336V72a56.063,56.063,0,0,0,56,56h40V352H80V72A40.045,40.045,0,0,1,120,32ZM392,480H120a40.045,40.045,0,0,1-40-40V368H432v72A40.045,40.045,0,0,1,392,480Z"/><path d="M248,384H232a8,8,0,0,0-8,8v64a8,8,0,0,0,16,0V432h8a24,24,0,0,0,0-48Zm0,32h-8V400h8a8,8,0,0,1,0,16Z"/><path d="M200,384a8,8,0,0,0-8,8v48a8,8,0,0,1-16,0,8,8,0,0,0-16,0,24,24,0,0,0,48,0V392A8,8,0,0,0,200,384Z"/><path d="M344,416H328a8,8,0,0,0,0,16h7.049c-2.252,9.217-8.236,16-15.049,16-8.673,0-16-10.991-16-24s7.327-24,16-24a10.71,10.71,0,0,1,4.589,1.057,8,8,0,0,0,6.822-14.473A26.6,26.6,0,0,0,320,384c-17.645,0-32,17.944-32,40s14.355,40,32,40,32-17.944,32-40A8,8,0,0,0,344,416Z"/><path d="M152,304H360a8,8,0,0,0,8-8V136a8,8,0,0,0-8-8H152a8,8,0,0,0-8,8V296A8,8,0,0,0,152,304Zm16.645-16,47.482-59.352,33.727,40.474a8,8,0,0,0,8.676,2.467l43.7-14.567L338.374,288ZM352,144V278.606l-42.794-36.68a8,8,0,0,0-7.736-1.515l-42.82,14.273-36.5-43.806A8,8,0,0,0,216,208h-.08a8,8,0,0,0-6.167,3L160,273.194V144Z"/><path d="M288,224a24,24,0,1,0-24-24A24.027,24.027,0,0,0,288,224Zm0-32a8,8,0,1,1-8,8A8.009,8.009,0,0,1,288,192Z"/></svg>
+</template>

src/assets/mimes/image_png.svg.vue

@@ -0,0 +1,3 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" id="OutLine" viewBox="0 0 512 512" width="512" height="512"><path d="M445.657,114.343l-96-96A8,8,0,0,0,344,16H120A56.063,56.063,0,0,0,64,72V440a56.063,56.063,0,0,0,56,56H392a56.063,56.063,0,0,0,56-56V120A8,8,0,0,0,445.657,114.343ZM352,43.313,420.687,112H392a40.045,40.045,0,0,1-40-40ZM120,32H336V72a56.063,56.063,0,0,0,56,56h40V352H80V72A40.045,40.045,0,0,1,120,32ZM392,480H120a40.045,40.045,0,0,1-40-40V368H432v72A40.045,40.045,0,0,1,392,480Z"/><path d="M184,384H168a8,8,0,0,0-8,8v64a8,8,0,0,0,16,0V432h8a24,24,0,0,0,0-48Zm0,32h-8V400h8a8,8,0,0,1,0,16Z"/><path d="M344,416H328a8,8,0,0,0,0,16h7.049c-2.252,9.217-8.236,16-15.049,16-8.673,0-16-10.991-16-24s7.327-24,16-24a10.71,10.71,0,0,1,4.589,1.057,8,8,0,0,0,6.822-14.473A26.6,26.6,0,0,0,320,384c-17.645,0-32,17.944-32,40s14.355,40,32,40,32-17.944,32-40A8,8,0,0,0,344,416Z"/><path d="M264,384a8,8,0,0,0-8,8v30.111l-16.845-33.689A8,8,0,0,0,224,392v64a8,8,0,0,0,16,0V425.889l16.845,33.689A8,8,0,0,0,272,456V392A8,8,0,0,0,264,384Z"/><path d="M176,304h32a8,8,0,0,0,8-8V272h16v24a8,8,0,0,0,8,8h32a8,8,0,0,0,8-8V272h16v24a8,8,0,0,0,8,8h32a8,8,0,0,0,8-8V264a8,8,0,0,0-8-8H312V240h24a8,8,0,0,0,8-8V200a8,8,0,0,0-8-8H312V176h24a8,8,0,0,0,8-8V136a8,8,0,0,0-8-8H304a8,8,0,0,0-8,8v24H280V136a8,8,0,0,0-8-8H240a8,8,0,0,0-8,8v24H216V136a8,8,0,0,0-8-8H176a8,8,0,0,0-8,8v32a8,8,0,0,0,8,8h24v16H176a8,8,0,0,0-8,8v32a8,8,0,0,0,8,8h24v16H176a8,8,0,0,0-8,8v32A8,8,0,0,0,176,304Zm56-96v16H216V208Zm64,16H280V208h16Zm-32,0H248V208h16Zm-16,16h16v16H248Zm16-48H248V176h16Zm-48,48h16v16H216Zm48,48H248V272h16Zm16-48h16v16H280Zm48,48H312V272h16Zm0-64H312V208h16Zm-16-80h16v16H312Zm-16,48H280V176h16Zm-48-48h16v16H248Zm-16,48H216V176h16Zm-48-48h16v16H184Zm0,64h16v16H184Zm0,64h16v16H184Z"/></svg>
+</template>