Adds ability to use Font Awesome for icon image

src/components/LinkItems/ItemIcon.vue

@@ -1,15 +1,12 @@
 <template>
-  <img
-      v-if="icon"
-      :src="getAppropriateImgPath(icon, url)"
-      class="tile-icon"
-  />
+  <i v-if="determineImageType(icon) === 'font-awesome'" :class="icon"></i>
+  <img v-else-if="icon" :src="getIconPath(icon, url)" class="tile-icon" />
 </template>
 
 <script>
 
 export default {
-  name: 'Item',
+  name: 'Icon',
   props: {
     icon: String,
     url: String,
@@ -41,40 +38,28 @@ export default {
       }
       return '';
     },
+    getLocalImagePath(img) {
+      return `/img/item-icons/tile-icons/${img}`;
+    },
     /* Checks if the icon is from a local image, remote URL, SVG or font-awesome */
-    getAppropriateImgPath(img, url) {
-      const imageType = this.determineImageType(img);
-      switch (imageType) {
-        case 'url':
-          return img;
-        case 'img':
-          return `/img/item-icons/tile-icons/${img}`;
-        case 'favicon':
-          return this.getFavicon(url);
-        case 'svg':
-          return img;
-        case 'fas':
-          return img;
-        default:
-          return '';
+    getIconPath(img, url) {
+      switch (this.determineImageType(img)) {
+        case 'url': return img;
+        case 'img': return this.getLocalImagePath(img);
+        case 'favicon': return this.getFavicon(url);
+        case 'svg': return img;
+        default: return '';
       }
     },
     /* Checks if the icon is from a local image, remote URL, SVG or font-awesome */
     determineImageType(img) {
       let imgType = '';
-      if (this.isUrl(img)) {
-        imgType = 'url';
-      } else if (this.isImage(img)) {
-        imgType = 'img';
-      // } else if (fileExtRegex.exec(img)[1] === 'svg') {
-      //   imgType = 'svg';
-      } else if (img.includes('fas')) {
-        imgType = 'fas';
-      } else if (img === 'favicon') {
-        imgType = 'favicon';
-      } else {
-        imgType = 'none';
-      }
+      if (this.isUrl(img)) imgType = 'url';
+      else if (this.isImage(img)) imgType = 'img';
+      else if (img.substr(4) === ('.svg' || '.SVG')) imgType = 'svg';
+      else if (img.includes('fa-')) imgType = 'font-awesome';
+      else if (img === 'favicon') imgType = 'favicon';
+      else imgType = 'none';
       return imgType;
     },
   },
@@ -82,9 +67,12 @@ export default {
 </script>
 
 <style scoped lang="scss">
-
-.tile-icon {
-    width: 60px;
-    filter: var(--item-icon-transform);
-}
+  .tile-icon {
+      width: 60px;
+      filter: var(--item-icon-transform);
+  }
+  i.fas, i.fab {
+    font-size: 1.5rem;
+    color: currentColor;
+  }
 </style>

src/data/conf.yml

@@ -2,23 +2,12 @@
 pageInfo:
   title: Hello World
   description: 'This is a demo'
-appConfig:
-  theme: 'default'
-  externalStyleSheet: 'https://bootswatch.com/4/solar/bootstrap.min.css'
-  cssThemes: ['hello', 'world']
-  enableFontAwesome: true
-  fontAwesomeKey: ''
-  hiddenComponents:
-  - footer: true
-    navigation: false
-    pageTitle: false
 sections:
 - name: Firewall
   items:
   - title: OPNsense
     description: Firewall Central Management
     icon: networking/opnsense.png
-    iconType: img
     target: iframe
     url: https://192.168.1.1
   - title: NetData
@@ -28,27 +17,22 @@ sections:
   - title: MalTrail
     description: Malicious traffic detection system
     icon: networking/maltrail.png
-    iconType: img
     url: http://192.168.1.1:8338
   - title: Ntopng
     description: Network traffic probe and network use monitor
     icon: networking/ntop.png
-    iconType: img
     url: http://192.168.1.1:3001
   - title: Sensei
     description: Additional data features
     icon: networking/sensei.png
-    iconType: img
     url: https://192.168.1.1/ui/sensei/
   - title: Monit
     description: Status of firewall system alerts
     icon: networking/monit.png
-    iconType: img
     url: https://192.168.1.1/ui/monit/status
   - title: Firewall Logs
     description: Real-time view of firewall data and logs
     icon: networking/logs.png
-    iconType: img
     url: https://192.168.1.1/ui/diagnostics/firewall/log
   - title: WireGuard
     description: Manage WireGuard client and server on firewall