svg inline fontawesome icons

app/package.json

@@ -15,6 +15,7 @@
     "tus-js-client": "^1.4.3",
     "uuid": "^3.0.1",
     "vue": "^2.3.2",
+    "vue-awesome": "^2.3.1",
     "vuex": "^2.3.1"
   },
   "devDependencies": {

app/src/Admin.vue

@@ -1,11 +1,11 @@
 <template lang="pug">
   .download-app
     a.btn.btn-sm.btn-info.btn-new-session(@click='login()', title='Refresh', v-if="loggedIn")
-      i.fa.fa-fw.fa-refresh
+      icon(name="refresh")
 
     .alert.alert-danger(v-show="error")
       strong
-        i.fa.fa-exclamation-triangle
+        icon.fa-fw(name="exclamation-triangle")
         |  {{ error }}
     form.well(v-if='!loggedIn', @submit.stop.prevent="login")
       h3 Password
@@ -15,7 +15,7 @@
         strong Access denied!
       |
       button.btn.btn-primary(type="submit", :disabled="!password")
-        i.fa.fa-sign-in
+        icon.fa-fw(name="sign-in")
         |  login
 
     div(v-if="loggedIn")
@@ -32,7 +32,7 @@
             tr.bucket(@click="expandView(sid)")
               td
                 | {{ sid }}
-                i.fa.fa-key.pull-right(v-if="sum[sid].password", title="Password protected")
+                icon.pull-right(name="key", v-if="sum[sid].password", title="Password protected")
               td {{ sum[sid].created | date }}
               td
                 template(v-if="sum[sid].lastDownload") {{ sum[sid].lastDownload | date}}
@@ -62,7 +62,11 @@
 
 
 <script>
-  "use strict";
+  import 'vue-awesome/icons/exclamation-triangle';
+  import 'vue-awesome/icons/refresh';
+  import 'vue-awesome/icons/sign-in';
+  import 'vue-awesome/icons/key';
+
 
   export default {
     name: 'app',

app/src/Download.vue

@@ -1,11 +1,11 @@
 <template lang="pug">
   .download-app
     a.btn.btn-sm.btn-info.btn-new-session(@click='newSession()', title='New Upload')
-      i.fa.fa-fw.fa-cloud-upload
+      icon.fa-fw(name="cloud-upload")
       span.hidden-xs  new upload
     .alert.alert-danger(v-show="error")
       strong
-        i.fa.fa-exclamation-triangle
+        icon.fa-fw(name="exclamation-triangle")
         |  {{ error }}
     .well(v-if='needsPassword')
       h3 Password
@@ -15,17 +15,17 @@
         strong Access denied!
       |
       button.btn.btn-primary(:disabled='password.length<1', @click='decrypt()')
-        i.fa.fa-key
+        icon.fa-fw(name="key")
         |  decrypt
     .panel.panel-primary(v-if='!needsPassword')
       .panel-heading
         strong Files
         div.pull-right.btn-group.btn-download-archive(v-if="downloadsAvailable")
           a.btn.btn-sm.btn-default(@click="downloadAll('zip')", title="Archive download is not resumeable!")
-            i.fa.fa-fw.fa-fw.fa-download
+            icon.fa-fw(name="download")
             |  zip
           a.btn.btn-sm.btn-default(@click="downloadAll('tar.gz')", title="Archive download is not resumeable!")
-            i.fa.fa-fw.fa-fw.fa-download
+            icon.fa-fw(name="download")
             |  tar.gz
       .panel-body
         table.table.table-hover.table-striped
@@ -37,9 +37,9 @@
                 div.pull-right.btn-group
                   clipboard.btn.btn-sm.btn-default(:value='host + file.url', @change='copied(file, $event)', title='Copy to clipboard')
                     a
-                      i.fa.fa-fw.fa-copy
+                      icon(name="copy")
                   a.btn.btn-sm.btn-default(title="Preview", @click.prevent.stop="preview=file", v-if="file.previewType")
-                    i.fa.fa-fw.fa-eye
+                    icon(name="eye")
                 i.pull-right.fa.fa-check.text-success.downloaded(v-show='file.downloaded')
                 p
                   strong {{ file.metadata.name }}
@@ -61,6 +61,14 @@
   import Clipboard from './common/Clipboard.vue';
   import PreviewModal from './Download/PreviewModal.vue';
 
+  import 'vue-awesome/icons/cloud-upload';
+  import 'vue-awesome/icons/exclamation-triangle';
+  import 'vue-awesome/icons/copy';
+  import 'vue-awesome/icons/check';
+  import 'vue-awesome/icons/download';
+  import 'vue-awesome/icons/key';
+  import 'vue-awesome/icons/eye';
+
   function getPreviewType(file, maxSize) {
     if(!file || !file.metadata) return false;
     if(file.metadata.retention === 'one-time') return false;

app/src/Download/PreviewModal.vue

@@ -7,11 +7,11 @@
         small {{currentIndex+1}} / {{files.length}}
         span.btn-group
           a.btn.btn-sm.btn-default(title="previous", @click="prev", v-show="currentIndex > 0")
-            i.fa.fa-fw.fa-arrow-left
+            icon(name="arrow-left")
           a.btn.btn-sm.btn-default(title="next", @click="next", v-show="currentIndex < files.length-1")
-            i.fa.fa-fw.fa-arrow-right
+            icon(name="arrow-right")
           a.btn.btn-sm.btn-default(title="toggle line wrap", @click="lineWrap = !lineWrap", :class="{active:lineWrap}", v-show="current.previewType === 'text'")
-            i.fa.fa-fw.fa-rotate-left.fa-flip-vertical
+            icon(name="rotate-left", flip="vertical")
     div(slot="body")
       div(v-if="current.previewType === 'image'", style="text-align:center")
         img(:src="current.url", style="max-width: 100%; height:auto")
@@ -24,6 +24,9 @@
 
 <script type="text/babel">
   import Modal from '../common/Modal.vue';
+  import 'vue-awesome/icons/arrow-left';
+  import 'vue-awesome/icons/arrow-right';
+  import 'vue-awesome/icons/rotate-left';
 
   export default {
     components: { Modal },

app/src/Upload.vue

@@ -1,20 +1,20 @@
 <template lang="pug">
   .upload-app#uploadApp
     a.btn.btn-sm.btn-info.btn-new-session(@click='newSession()', title='New Upload')
-      i.fa.fa-fw.fa-cloud-upload
+      icon.fa-fw(name="cloud-upload")
       span.hidden-xs  new upload
     .alert.alert-danger(v-show="error")
       strong
-        i.fa.fa-exclamation-triangle
+        icon.fa-fw(name="exclamation-triangle")
         |  {{ error }}
     .well(v-show="state === 'uploaded'")
       .pull-right.btn-group
         a.btn.btn-primary(:href="mailLnk")
-          i.fa.fa-fw.fa-envelope
+          icon.fa-fw(name="envelope")
           |  Mail
         clipboard.btn.btn-primary(:value='shareUrl')
       h3.text-success
-        i.fa.fa-check
+        icon.fa-fw(name="check")
         |  Upload completed
       div.share-link
         span.title Download Link:
@@ -22,7 +22,7 @@
         a(:href='shareUrl') {{ shareUrl }}
     .row.overall-process(v-show="state === 'uploading'")
       .col-xs-12
-        i.fa.fa-spinner.fa-spin.fa-2x.fa-fw.pull-left
+        icon.pull-left(name="spinner", scale="2", spin="")
         .progress
           .progress-bar.progress-bar-success.progress-bar-striped.active(:style="{width: percentUploaded+'%'}")
             span(v-show='percentUploaded>10') {{ percentUploaded }}%
@@ -33,11 +33,11 @@
         settings
         .text-right(v-show='files.length && !disabled')
           button.btn.btn-lg.btn-success(@click="$store.dispatch('upload/upload')")
-            i.fa.fa-upload
+            icon.fa-fw(name="upload")
             |  upload
         .text-right(v-show="state === 'uploadError'")
           button.btn.btn-lg.btn-success(@click="$store.dispatch('upload/upload')")
-            i.fa.fa-upload
+            icon.fa-fw(name="upload")
             |  retry
 </template>
 
@@ -48,13 +48,20 @@
   import Settings from './Upload/Settings.vue';
   import Files from './Upload/Files.vue';
   import Clipboard from './common/Clipboard.vue'
+  import 'vue-awesome/icons/cloud-upload';
+  import 'vue-awesome/icons/upload';
+  import 'vue-awesome/icons/check';
+  import 'vue-awesome/icons/spinner';
+  import 'vue-awesome/icons/envelope';
+  import 'vue-awesome/icons/exclamation-triangle';
+
 
   export default {
     name: 'App',
     components: {
       Settings,
       Files,
-      Clipboard
+      Clipboard,
     },
 
     computed: {
@@ -87,3 +94,7 @@
 
   }
 </script>
+
+<style>
+
+</style>

app/src/Upload/Files.vue

@@ -7,7 +7,7 @@
                   onclick="document.getElementById('fileInput').click();",
                   v-show="files.length === 0")
           a
-            i.fa.fa-plus.fa-4x
+            icon(name="plus", scale="4")
             br
             |  Drop your files here
         table.table.table-striped
@@ -22,18 +22,18 @@
                 p
                   input.form-control.input-sm(type="text", placeholder="comment...", v-model="file.comment", :disabled="disabled")
                 .alert.alert-danger(v-if="file.error")
-                  i.fa.fa-fw.fa-exclamation-triangle
+                  icon.fa-fw(name="exclamation-triangle")
                   |  {{ file.error }}
                 .progress(v-show="!file.error && (state === 'uploading' || state === 'uploaded')")
                   .progress-bar.progress-bar-success.progress-bar-striped(:style="{width: file.progress.percentage+'%'}",:class="{active:!file.uploaded}")
               td.btns
                 a(style="cursor:pointer", @click="!disabled && $store.commit('upload/REMOVE_FILE', file)", :disabled="disabled")
-                  i.fa.fa-fw.fa-times
+                  icon(name="times")
 
         input#fileInput(type="file", @change="$store.dispatch('upload/addFiles', $event.target.files)", multiple="", :disabled="disabled", style="display: none")
         .text-right
           a.btn.btn-success.btn-sm(onclick="document.getElementById('fileInput').click();", :disabled="disabled", v-show="files.length>0")
-            i.fa.fa-plus-circle.fa-fw
+            icon(name="plus-circle")
 </template>
 
 
@@ -42,6 +42,10 @@
   import {mapState} from 'vuex';
   import dragDrop from 'drag-drop';
   import FileIcon from '../common/FileIcon.vue';
+  import 'vue-awesome/icons/plus'
+  import 'vue-awesome/icons/plus-circle'
+  import 'vue-awesome/icons/times'
+  import 'vue-awesome/icons/exclamation-triangle'
 
   export default {
     name: 'Files',

app/src/Upload/Settings.vue

@@ -17,12 +17,13 @@
                                         @input="$store.commit('upload/PASSWORD', $event.target.value)",
                                         :disabled='disabled', placeholder='optional')
             span.input-group-addon(style='cursor: pointer', title='generate password', @click='generatePassword()')
-              i.fa.fa-key
+              icon(name="key")
 </template>
 
 <script type="text/babel">
   "use strict";
   import {mapState} from 'vuex';
+  import 'vue-awesome/icons/key';
 
   const passGen = {
     _pattern : /[A-Z0-9_\-\+\!]/,

app/src/admin.js

@@ -1,6 +1,7 @@
 import 'babel-polyfill';
 import Vue from 'vue';
 import Admin from './Admin.vue';
+import Icon from 'vue-awesome/components/Icon.vue'
 
 function parseDate(str) {
   if(!str) return str;
@@ -25,6 +26,7 @@ Vue.filter('date', function(val, format) {
   return isDate(val) ? formatDate(val, format) : val;
 });
 
+Vue.component('icon', Icon);
 
 new Vue({
   el: '#admin',

app/src/common/Clipboard.vue

@@ -13,13 +13,17 @@ Copies a string into the clipboard
 <template lang="pug">
   span(@click.stop='copy()', style='cursor: pointer')
     slot(:state='state')
-      i.fa.fa-fw(:class="{'fa-copy':state=='pristine','fa-check':state=='copied','fa-exclamation-triangle':state=='error'}")
+      icon.fa-fw(name="copy", v-if="state==='pristine'")
+      icon.fa-fw(name="check", v-if="state==='copied'")
+      icon.fa-fw(name="exclamation-triangle", v-if="state==='error'")
       slot(name='text')  Copy
 </template>
 
 
 <script type="text/babel">
-  "use strict";
+  import 'vue-awesome/icons/check';
+  import 'vue-awesome/icons/copy';
+  import 'vue-awesome/icons/exclamation-triangle';
 
   export default {
     name: "Clipboard",

app/src/common/FileIcon.vue

@@ -1,13 +1,17 @@
 <template lang="pug">
   div.file-icon
-    i.fa.fa-fw.fa-3x(v-if='!isImageBlob', :class='iconClass')
+    icon(:name="iconClass", v-if="!isImageBlob", scale="3")
     |
     img(v-if='isImageBlob', :src='blobUrl')
 </template>
 
 
 <script type="text/babel">
-  "use strict";
+  import 'vue-awesome/icons/file-image-o';
+  import 'vue-awesome/icons/file-text-o';
+  import 'vue-awesome/icons/file-video-o';
+  import 'vue-awesome/icons/file-audio-o';
+  import 'vue-awesome/icons/file-archive-o';
 
   export default {
     props: ['file'],
@@ -15,14 +19,14 @@
     computed: {
       iconClass() {
         const type = this.file.type || this.file.metadata && this.file.metadata.type;
-        if(!type) return 'fa-file-o';
+        if(!type) return 'file-o';
-        if(type.startsWith('image')) return 'fa-file-image-o';
+        if(type.startsWith('image')) return 'file-image-o';
-        if(type.startsWith('text')) return 'fa-file-text-o';
+        if(type.startsWith('text')) return 'file-text-o';
-        if(type.startsWith('video')) return 'fa-file-video-o';
+        if(type.startsWith('video')) return 'file-video-o';
-        if(type.startsWith('audio')) return 'fa-file-audio-o';
+        if(type.startsWith('audio')) return 'file-audio-o';
-        if(type === 'application/pdf') return 'fa-file-pdf-o';
+        if(type === 'application/pdf') return 'file-pdf-o';
-        if(type.startsWith('application')) return 'fa-file-archive-o';
+        if(type.startsWith('application')) return 'file-archive-o';
-        return 'fa-file-o';
+        return 'file-o';
       },
       isImageBlob() {
         if(!URL && !webkitURL) return false;

app/src/download.js

@@ -1,6 +1,9 @@
 import 'babel-polyfill';
 import Vue from 'vue';
 import Download from './Download.vue';
+import Icon from 'vue-awesome/components/Icon.vue'
+
+Vue.component('icon', Icon);
 
 new Vue({
   el: '#download',

app/src/upload.js

@@ -1,9 +1,10 @@
-"use strict";
-
 import 'babel-polyfill';
 import Vue from 'vue';
 import Upload from './Upload.vue';
 import store from './Upload/store.js';
+import Icon from 'vue-awesome/components/Icon.vue'
+
+Vue.component('icon', Icon);
 
 new Vue({
   el: '#upload',

public/assets/styles.css

@@ -52,6 +52,16 @@ body > .container {
 td.file-icon {
   width: 60px;
 }
+h1 .fa-icon {
+  height: 50px;
+  vertical-align: middle;
+}
+.btn .fa-icon.fa-fw {
+  width: 25px;
+}
+.btn .fa-icon {
+  vertical-align: middle;
+}
 
 
 /* FileIcon Component */

public/html/admin.html

@@ -7,7 +7,6 @@
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <meta name="robots" content="noindex,nofollow">
   <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
-  <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
   <link href="/assets/styles.css" rel="stylesheet">
 </head>
 
@@ -15,7 +14,9 @@
 
   <div class="container">
     <h1>
-      <i class="fa fa-fw fa-gears" style="color: #0275D8"></i>
+      <svg version="1.1" role="presentation" viewBox="0 0 1920 1792" class="fa-icon" style="fill: #0275D8">
+        <path d="M1280 864q0-14-9-23l-352-352q-9-9-23-9t-23 9l-351 351q-10 12-10 24 0 14 9 23t23 9h224v352q0 13 9.5 22.5t22.5 9.5h192q13 0 22.5-9.5t9.5-22.5v-352h224q13 0 22.5-9.5t9.5-22.5zM1920 1152q0 159-112.5 271.5t-271.5 112.5h-1088q-185 0-316.5-131.5t-131.5-316.5q0-130 70-240t188-165q-2-30-2-43 0-212 150-362t362-150q156 0 285.5 87t188.5 231q71-62 166-62 106 0 181 75t75 181q0 76-41 138 130 31 213.5 135.5t83.5 238.5z"></path>
+      </svg>
       PsiTransfer Admin
     </h1>
     <hr>

public/html/download.html

@@ -7,7 +7,6 @@
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <meta name="robots" content="noindex,nofollow">
   <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
-  <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
   <link href="/assets/styles.css" rel="stylesheet">
 </head>
 
@@ -15,7 +14,9 @@
 
   <div class="container">
     <h1>
-      <i class="fa fa-fw fa-cloud-download" style="color: #0275D8"></i>
+      <svg version="1.1" role="presentation" viewBox="0 0 1920 1792" class="fa-icon" style="fill: #0275D8">
+        <path d="M1280 928q0-14-9-23t-23-9h-224v-352q0-13-9.5-22.5t-22.5-9.5h-192q-13 0-22.5 9.5t-9.5 22.5v352h-224q-13 0-22.5 9.5t-9.5 22.5q0 14 9 23l352 352q9 9 23 9t23-9l351-351q10-12 10-24zM1920 1152q0 159-112.5 271.5t-271.5 112.5h-1088q-185 0-316.5-131.5t-131.5-316.5q0-130 70-240t188-165q-2-30-2-43 0-212 150-362t362-150q156 0 285.5 87t188.5 231q71-62 166-62 106 0 181 75t75 181q0 76-41 138 130 31 213.5 135.5t83.5 238.5z"></path>
+      </svg>
       PsiTransfer
     </h1>
     <hr>

public/html/error.html

@@ -7,7 +7,6 @@
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <meta name="robots" content="noindex,nofollow">
   <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
-  <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
   <style>
     html {
       position: relative;
@@ -29,7 +28,9 @@
 <body>
   <div class="container">
     <h1>
-      <i class="fa fa-fw fa-cloud-upload" style="color: #0275D8"></i>
+      <svg version="1.1" role="presentation" viewBox="0 0 1920 1792" class="fa-icon" style="fill: #0275D8">
+        <path d="M1280 864q0-14-9-23l-352-352q-9-9-23-9t-23 9l-351 351q-10 12-10 24 0 14 9 23t23 9h224v352q0 13 9.5 22.5t22.5 9.5h192q13 0 22.5-9.5t9.5-22.5v-352h224q13 0 22.5-9.5t9.5-22.5zM1920 1152q0 159-112.5 271.5t-271.5 112.5h-1088q-185 0-316.5-131.5t-131.5-316.5q0-130 70-240t188-165q-2-30-2-43 0-212 150-362t362-150q156 0 285.5 87t188.5 231q71-62 166-62 106 0 181 75t75 181q0 76-41 138 130 31 213.5 135.5t83.5 238.5z"></path>
+      </svg>
       PsiTransfer
     </h1>
     <hr>

public/html/upload.html

@@ -7,7 +7,6 @@
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <meta name="robots" content="noindex,nofollow">
   <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
-  <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
   <link href="/assets/styles.css" rel="stylesheet">
 </head>
 
@@ -17,7 +16,9 @@
 
   <div class="container">
     <h1>
-      <i class="fa fa-fw fa-cloud-upload" style="color: #0275D8"></i>
+      <svg version="1.1" role="presentation" viewBox="0 0 1920 1792" class="fa-icon" style="fill: #0275D8">
+        <path d="M1280 864q0-14-9-23l-352-352q-9-9-23-9t-23 9l-351 351q-10 12-10 24 0 14 9 23t23 9h224v352q0 13 9.5 22.5t22.5 9.5h192q13 0 22.5-9.5t9.5-22.5v-352h224q13 0 22.5-9.5t9.5-22.5zM1920 1152q0 159-112.5 271.5t-271.5 112.5h-1088q-185 0-316.5-131.5t-131.5-316.5q0-130 70-240t188-165q-2-30-2-43 0-212 150-362t362-150q156 0 285.5 87t188.5 231q71-62 166-62 106 0 181 75t75 181q0 76-41 138 130 31 213.5 135.5t83.5 238.5z"></path>
+      </svg>
       PsiTransfer
     </h1>
     <hr>