refacto : Create an Icon Component

src/AccountAppearance.vue

@@ -93,7 +93,7 @@ fieldset.settings.view-panel
         DragList(:list="columns")
 
       .drag-zone(title="Move disabled columns here")
-        .fa.fa-trash
+        Icon(name="trash")
         DragList(:list="unused_cols", :removable="false")
 </template>
 

src/Button.vue

@@ -116,7 +116,7 @@ export default {
 <template lang="pug">
 a.button(@click="click", :href="link", :target="href ? '_blank' : ''",
   :class="_class")
-  .fa(v-if="_icon", :class="'fa-' + _icon")
+  Icon(v-if="_icon",:name="_icon")
   img(v-if="image", :src="image")
   span.button-content(v-if="content") {{content}}
 </template>

src/ClientVersion.vue

@@ -44,9 +44,9 @@ export default {
 .client-version(v-if="version")
   a.outdated(v-if="outdated", :href="download_url", target="_blank",
     title="Client version outdated.  Click to open download page")
-      | #[.fa.fa-exclamation-triangle] v{{version}}
-      |
-      | #[.fa.fa-exclamation-triangle]
+      Icon(name="exclamation-triangle")
+      | v{{version}}
+      Icon(name="exclamation-triangle")
 
   span(v-else, :title="'Folding@home client version ' + version")
     | v{{version}}

src/HelpBalloon.vue

@@ -43,9 +43,9 @@ export default {
 <template lang="pug">
 label.help-balloon(@click="active = !active")
   .help-overlay(v-show="active", @click.stop="active = false")
-  .help-name {{name}}#[.fa.fa-question-circle]
+  .help-name {{name}}#[Icon(name="question-circle")]
   span(v-if="active")
-    .fa.fa-caret-left
+    Icon(name="caret-left")
     .help-content.view-panel(@click.stop="true")
       .help-header
         h2.help-title {{name}} Help

src/Icon.vue

@@ -0,0 +1,68 @@
+<!--
+
+                  This file is part of the Folding@home Client.
+
+          The fah-client runs Folding@home protein folding simulations.
+                    Copyright (c) 2001-2024, foldingathome.org
+                               All rights reserved.
+
+       This program is free software; you can redistribute it and/or modify
+       it under the terms of the GNU General Public License as published by
+        the Free Software Foundation; either version 3 of the License, or
+                       (at your option) any later version.
+
+         This program is distributed in the hope that it will be useful,
+          but WITHOUT ANY WARRANTY; without even the implied warranty of
+          MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+                   GNU General Public License for more details.
+
+     You should have received a copy of the GNU General Public License along
+     with this program; if not, write to the Free Software Foundation, Inc.,
+           51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA.
+
+                  For information regarding this software email:
+                                 Joseph Coffland
+                          [email protected]
+
+-->
+
+<script>
+const addToFaClass = 'fa-';
+
+const addToArray = (array,value,valueToAdd) => value && array.push(valueToAdd);
+const addToArrayAddToValue = (array,value,valueToAdd) => addToArray(array,value,valueToAdd+"-"+value);
+
+export default {
+  name: 'Icon',
+  props: {
+    name: { type: String, required: true },
+    type: { type: String},
+    size: { type: String },
+    fixedwidth: { type: Boolean, default: false },
+    border: { type: Boolean, default: false },
+    inverse: { type: Boolean, default: false },
+    pull: { type: String },
+    flip: { type: String },
+    transform: { type: String },
+    rotation: { type: String },
+    animate: { type: String }
+  },
+
+  computed: {
+    _class() {
+      const classArray = [this.type,this.name,this.size,this.animate];
+      addToArray(classArray,this.border,"border")
+      addToArray(classArray,this.inverse,"inverse")
+      addToArray(classArray,this.fixedwidth,"fw")
+      addToArrayAddToValue(classArray,this.rotation,"rotate")
+      addToArrayAddToValue(classArray,this.pull,"pull")
+      addToArrayAddToValue(classArray,this.flip,"flip")
+      return addToFaClass + classArray.filter(x => x).join(' '+addToFaClass)
+    },
+  },
+}
+</script>
+
+<template lang="pug">
+  i.fa(:class="_class")
+</template>

src/LoginDialog.vue

@@ -169,7 +169,7 @@ Dialog(:buttons="buttons", ref="dialog", width="40em")
 
             p.
               When registering your Folding@home account you can generate
-              a secure passphrase by clicking the #[.fa.fa-refresh] icon.
+              a secure passphrase by clicking the #[Icon(name="refresh")] icon.
               Make sure you save this passphrase somewhere safe, preferably in
               a password manager.
 

src/MachineView.vue

@@ -114,7 +114,7 @@ export default {
   .machine-header
     .machine-name.header-title(:title="mach.get_title()")
       | {{mach.get_name()}}
-      .fa.fa-dot-circle-o(v-if="mach.is_direct()")
+      Icon(name="dot-circle-o",v-if="mach.is_direct()")
 
     ClientVersion.machine-version(:mach="mach")
 

src/Pacify.vue

@@ -52,7 +52,7 @@ export default {
 <template lang="pug">
 Teleport(to="body")
   .pacify-overlay(v-show="active")
-    .fa.fa-spinner.fa-pulse
+    Icon(name="spinner",animate="pulse")
 </template>
 
 <style lang="stylus">

src/main.js

@@ -30,6 +30,7 @@ import {createApp}    from 'vue'
 import App            from './App.vue'
 import router         from './router'
 import Button         from './Button.vue'
+import Icon           from './Icon.vue'
 import Dialog         from './Dialog.vue'
 import ProgressBar    from './ProgressBar.vue'
 import DragList       from './DragList.vue'
@@ -90,7 +91,7 @@ async function main(url) {
 
   app.use(router)
   add_components(app, {
-    Button, Dialog, ProgressBar, Award, HelpBalloon, FAHLogo, ClientVersion,
+    Button, Icon, Dialog, ProgressBar, Award, HelpBalloon, FAHLogo, ClientVersion,
     ViewHeader, MainHeader, ProjectView, InfoItem, DragList, UnitHeader,
     UnitsView, ImageInput, PlotView, UnitField, UnitHeaders, UnitInfo
   })

src/unit.js

@@ -86,7 +86,7 @@ function get_os_icon(os) {
   case 'macosx':              os = 'apple';   break
   case 'win32': case 'win64': os = 'windows'; break
   }
-  return `<div class="fa fa-${os}"></div>`
+  return `<i class="fa fa-${os}"></i>`
 }
 
 
@@ -161,7 +161,7 @@ class Unit {
     return this.unit.state
   }
 
-  get status() {return `<div class="fa fa-${this.icon}"></div>`}
+  get status() {return `<i class="fa fa-${this.icon}"></i>`}
   get status_title() {return this._status_text}