Embed file icons inline in attaches block

src/assets/svg/custom.svg

@@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="32" height="40">
-  <path d="M17 0l15 14V3v34a3 3 0 0 1-3 3H3a3 3 0 0 1-3-3V3a3 3 0 0 1 3-3h20-6zm0 2H3a1 1 0 0 0-1 1v34a1 1 0 0 0 1 1h26a1 1 0 0 0 1-1V14H17V2zm2 10h7.926L19 4.602V12z"/>
-</svg>

src/assets/svg/standard.svg

@@ -1,6 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="32" height="40">
-  <g fill="#A8ACB8" fill-rule="evenodd">
-    <path fill-rule="nonzero" d="M17 0l15 14V3v34a3 3 0 0 1-3 3H3a3 3 0 0 1-3-3V3a3 3 0 0 1 3-3h20-6zm0 2H3a1 1 0 0 0-1 1v34a1 1 0 0 0 1 1h26a1 1 0 0 0 1-1V14H17V2zm2 10h7.926L19 4.602V12z"/>
-    <path d="M7 22h18v2H7zm0 4h18v2H7zm0 4h18v2H7z"/>
-  </g>
-</svg>

src/components/AttachesBlock.vue

@@ -5,11 +5,18 @@
       :style="{ color: color }"
       class="attaches-block-file-icon"
     >
-      <svg>
+      <svg width="32" height="40">
-        <use
+        <path
-          xmlns:xlink="http://www.w3.org/1999/xlink"
+          v-if="color"
-          v-bind:xlink:href="color ? customIcon : standardIcon"
+          d="M17 0l15 14V3v34a3 3 0 0 1-3 3H3a3 3 0 0 1-3-3V3a3 3 0 0 1 3-3h20-6zm0 2H3a1 1 0 0 0-1 1v34a1 1 0 0 0 1 1h26a1 1 0 0 0 1-1V14H17V2zm2 10h7.926L19 4.602V12z"
         />
+        <g v-else fill="#A8ACB8" fill-rule="evenodd">
+          <path
+            fill-rule="nonzero"
+            d="M17 0l15 14V3v34a3 3 0 0 1-3 3H3a3 3 0 0 1-3-3V3a3 3 0 0 1 3-3h20-6zm0 2H3a1 1 0 0 0-1 1v34a1 1 0 0 0 1 1h26a1 1 0 0 0 1-1V14H17V2zm2 10h7.926L19 4.602V12z"
+          />
+          <path d="M7 22h18v2H7zm0 4h18v2H7zm0 4h18v2H7z" />
+        </g>
       </svg>
     </div>
     <div class="attaches-block-file-info">
@@ -60,12 +67,6 @@ export default {
     byteFormatter
   },
   props: ["data"],
-  data() {
-    return {
-      standardIcon: require("@/assets/svg/standard.svg"),
-      customIcon: require("@/assets/svg/custom.svg")
-    };
-  },
   computed: {
     color() {
       return extensions[this.data.file.extension];