Add <vue-icon/> component, to decouple fontawesome from vue

app/Domain/Icon/Icons.php

@@ -42,4 +42,9 @@ private function iconClass(string $iconName): string
         }
         throw new \InvalidArgumentException("Failed to find icon: $iconName");
     }
+
+    public function icons(): array
+    {
+        return $this->fa->icons();
+    }
 }

app/Providers/ViewServiceProvider.php

@@ -2,6 +2,7 @@
 namespace Coyote\Providers;
 
 use Coyote\Domain\Clock;
+use Coyote\Domain\Icon\Icons;
 use Coyote\Domain\Survey\GuestSurvey;
 use Coyote\Domain\User\UserSettings;
 use Coyote\Http\Composers\InitialStateComposer;
@@ -46,6 +47,7 @@ public function boot(): void
                 'year'           => $clock->year(),
                 'survey'         => $this->survey($this->app[GuestSurvey::class]),
                 'currentUser'    => $this->currentUser(),
+                'icons'          => (new Icons)->icons(),
             ]);
         });
     }

resources/js/components/comments/comment.vue

@@ -9,15 +9,15 @@
       <div class="media-body">
         <div class="dropdown float-end" v-if="comment.permissions.update">
           <button class="btn btn-xs border-0 text-muted mt-2" type="button" data-bs-toggle="dropdown" aria-label="Dropdown">
-            <i class="fa fa-ellipsis"></i>
+            <vue-icon name="jobOfferCommentMenuDropdown"/>
           </button>
           <div class="dropdown-menu dropdown-menu-end">
             <a @click="edit" href="javascript:" class="dropdown-item">
-              <i class="fa fa-pen-to-square fa-fw"/>
+              <vue-icon name="jobOfferCommentEdit"/>
               Edytuj
             </a>
             <a @click="deleteComment" class="dropdown-item" href="javascript:">
-              <i class="fa fa-fw fa-trash-can"/>
+              <vue-icon name="jobOfferCommentDelete"/>
               Usuń
             </a>
           </div>
@@ -104,6 +104,7 @@ import VueAvatar from '../avatar.vue';
 import VueFlag from '../flags/flag.vue';
 import VueButton from '../forms/button.vue';
 import VueMarkdown from '../forms/markdown.vue';
+import VueIcon from "../icon.vue";
 import {default as mixins} from '../mixins/user';
 import VueModal from '../modal.vue';
 import VueUserName from '../user-name.vue';
@@ -112,13 +113,14 @@ export default {
   name: 'vue-comment', // required with recursive component
   props: ['comment', 'nested'],
   components: {
-    'vue-modal': VueModal,
     'vue-avatar': VueAvatar,
-    'vue-username': VueUserName,
     'vue-button': VueButton,
     'vue-flag': VueFlag,
+    'vue-icon': VueIcon,
     'vue-markdown': VueMarkdown,
+    'vue-modal': VueModal,
     'vue-timeago': VueTimeAgo,
+    'vue-username': VueUserName,
   },
   mixins: [mixins],
   data() {

resources/js/components/flags/modal.vue

@@ -9,7 +9,7 @@
           <vue-radio name="type_id" v-model="selectedType" :checked-value="type.id" :id="`type-${type.id}`"></vue-radio>
         </div>
         <div class="media-body">
-          <i :class="icon(type.name)" class="me-1"/>
+          <vue-icon :name="icon(type.name)" class="me-1"/>
           <label :for="`type-${type.id}`" class="fw-bold">{{ type.name }}</label>
           <p>{{ type.description }}</p>
         </div>
@@ -34,13 +34,15 @@
 import axios from 'axios';
 import {notify} from "../../toast";
 import VueRadio from '../forms/radio.vue';
+import VueIcon from '../icon.vue';
 import VueModal from '../modal.vue';
 
 export default {
   name: 'FlagModal',
   components: {
     'vue-modal': VueModal,
     'vue-radio': VueRadio,
+    'vue-icon': VueIcon,
   },
   props: {
     url: {
@@ -88,16 +90,16 @@ export default {
         })
         .finally(() => this.isProcessing = false);
     },
-    icon(name: string): string {
+    icon(title: string): string {
       const icons = {
-        'Spam': 'fas fa-envelopes-bulk',
-        'Wulgaryzmy': 'fas fa-book-skull',
-        'Off-Topic': 'fas fa-wave-square',
-        'Nieprawidłowa kategoria': 'fas fa-table-list',
-        'Próba wyłudzenia gotowca': 'fas fa-user-graduate',
-        'Inne': "far fa-flag",
+        'Spam': 'reportType.spam',
+        'Wulgaryzmy': 'reportType.abusiveLanguage',
+        'Off-Topic': 'reportType.offTopic',
+        'Nieprawidłowa kategoria': 'reportType.category',
+        'Próba wyłudzenia gotowca': 'reportType.extortion',
+        'Inne': "reportType.other",
       };
-      return icons[name];
+      return icons[title];
     },
   },
 };

resources/js/components/forms/emoji-picker.vue

@@ -42,7 +42,7 @@
         <div class="search-box">
           <input class="form-control" v-model="searchPhrase" placeholder="Wyszukaj emoji..."/>
           <button class="btn btn-primary" type="button" ref="close-button" @click="close">
-            <i class="fas fa-xmark"/>
+            <vue-icon name="editorEmojiPickerClose"/>
             Zamknij
           </button>
         </div>
@@ -53,6 +53,7 @@
 
 <script>
 import clickAway from '../../clickAway.js';
+import Icon from '../icon.vue';
 
 function onIdle(callback) {
   if ("requestIdleCallback" in window) {
@@ -64,6 +65,7 @@ function onIdle(callback) {
 
 export default {
   directives: {clickAway},
+  components: {'vue-icon': Icon},
   props: {
     emojis: {require: true},
     open: {require: true},

resources/js/components/forms/follow-button.vue

@@ -1,7 +1,11 @@
 <template>
-  <button v-if="shouldShow" :class="{'follows': follows}" @click="checkAuth(toggleState)" class="btn btn-follow">
-    <i class="fa fa-fw fa-check"></i>
-
+  <button
+    v-if="shouldShow"
+    class="btn btn-follow"
+    :class="{follows}"
+    @click="checkAuth(toggleState)"
+  >
+    <vue-icon name="userFollow"/>
     <slot>
       {{ follows ? 'Obserwujesz' : 'Obserwuj' }}
     </slot>
@@ -12,10 +16,12 @@
 import {mapGetters} from 'vuex';
 
 import store from '../../store/index';
+import VueIcon from "../icon.vue";
 import {default as mixin} from '../mixins/user.js';
 
 export default {
   name: 'VueFollowButton',
+  components: {VueIcon},
   mixins: [mixin],
   props: {
     userId: {
@@ -34,7 +40,11 @@ export default {
   },
   methods: {
     toggleState() {
-      this.follows ? store.dispatch('user/unfollow', this.userId) : store.dispatch('user/follow', this.userId);
+      if (this.follows) {
+        store.dispatch('user/unfollow', this.userId);
+      } else {
+        store.dispatch('user/follow', this.userId);
+      }
     },
   },
 };

resources/js/components/forms/help.vue

@@ -15,9 +15,9 @@
               to przekreślenie.
             </p>
             <p>
-              Możesz dodać formatowanie komendami <i class="fas fa-fw fa-bold"/>,
-              <i class="fas fa-fw fa-italic"/>, <i class="fas fa-fw fa-underline"/> oraz
-              <i class="fas fa-fw fa-strikethrough"/>.
+              Możesz dodać formatowanie komendami <vue-icon name="editorControlBold"/>,
+              <vue-icon name="editorControlItalics"/>, <vue-icon name="editorControlUnderline"/> oraz
+              <vue-icon name="editorControlStrikeThrough"/>.
             </p>
             <p class="text-muted">
               Ponieważ dekoracja podkreślenia jest przeznaczona na linki, markdown
@@ -31,7 +31,7 @@
 
             <h3>Linki</h3>
             <p>
-              By dodać link w edytorze użyj komendy <i class="fa fa-link"/> lub
+              By dodać link w edytorze użyj komendy <vue-icon name="editorControlHyperlink"/> lub
               użyj składni <code>[title](link)</code>. URL umieszczony w linku lub nawet
               URL umieszczony bezpośrednio w tekście będzie aktywny i klikalny.
             </p>
@@ -42,15 +42,15 @@
             <h4>Wewnętrzne odnośniki</h4>
             <p>
               Możesz umieścić odnośnik do wewnętrznej podstrony, używając następującej
-              składnii: <code>[[Delphi/Kompendium]]</code> lub <code>[[Delphi/Kompendium|kliknij,
-              aby przejść do kompendium]]</code>. Odnośniki mogą prowadzić do Forum 4programmers
+              składni: <code>[[Delphi/Kompendium]]</code> lub <code>[[Delphi/Kompendium|kliknij,
+              aby przejść do kompendium]]</code>. Odnośniki mogą prowadzić do Forum 4programmers.net
               lub np. do Kompendium.
             </p>
 
             <h3>Wspomnienia użytkowników</h3>
             <p>
               By wspomnieć użytkownika forum, wpisz w formularzu znak <code>@</code>. Zobaczysz
-              okienko autouzupełniające nazwy użytkowników. Autouzupełnienie dobierze odpowiedni
+              okienko samouzupełniające nazwy użytkowników. Samouzupełnienie dobierze odpowiedni
               format wspomnienia, zależnie od tego czy w nazwie użytkownika znajduje się spacja.
             </p>
 
@@ -66,7 +66,7 @@
 
             <h4>Skróty klawiszowe</h4>
             <p>
-              Dodaj kombinację klawiszy komendą notacji klawiszy <i class="fas fa-keyboard"></i>
+              Dodaj kombinację klawiszy komendą notacji klawiszy <vue-icon name="editorControlKeyStroke"/>
               lub skrótem klawiszowym <kbd>Alt+K</kbd>.
             </p>
             <p>
@@ -94,18 +94,18 @@
             <h4>Krótkie fragmenty kodu</h4>
             <p>
               Wszelkie jednolinijkowe instrukcje języka programowania powinny być zawarte
-              pomiędzy obrócone apostrofy: <code>`kod instrukcji`</code> lub
-              <code>``console.log(`template`);``</code>.
+              pomiędzy obróconymi apostrofami: <code>`kod instrukcji`</code> lub
+              <code>``console.log(`string`);``</code>.
             </p>
 
             <h4>Kod wielolinijkowy</h4>
             <p>
-              Dodaj fragment kodu komendą <i class="fas fa-fw fa-code"></i>. Fragmenty
+              Dodaj fragment kodu komendą <vue-icon name="editorControlCodeBlock"/>. Fragmenty
               kodu zajmujące całą lub więcej linijek powinny być umieszczone w wielolinijkowym
               fragmencie kodu. Znaczniki <code>```</code> lub <code>~~~</code> umożliwiają
               kolorowanie różnych języków programowania. Możemy nadać nazwę języka programowania
               używając auto-uzupełnienia, kod został pokolorowany używając konkretnych ustawień
-              kolorowania składnii:
+              kolorowania składni:
             </p>
             <p>
               <code>
@@ -116,40 +116,41 @@
             </p>
             <p>
               Możesz zaznaczyć również już wklejony kod w edytorze, i użyć
-              komendy&nbsp;<i class="fas fa-fw fa-code"></i> by zamienić go w kod. Możesz użyć też kombinacji
-              <kbd>Ctrl+`</kbd>, by dodać fragment kodu bez oznaczników języka.
+              komendy&nbsp;<vue-icon name="editorControlCodeBlock"/> by zamienić go w kod. Użyj
+              kombinacji <kbd>Ctrl+`</kbd>, by dodać fragment kodu bez oznaczników języka.
             </p>
 
             <h3>Tabelki</h3>
             <p>
-              Dodaj przykładową tabelkę używając komendy <i class="fas fa-fw fa-table"/>. Przykładowa tabelka
-              składa się z dwóch kolumn, nagłówka i jednego wiersza.
+              Dodaj przykładową tabelkę używając komendy <vue-icon name="editorControlTable"/>. 
+              Przykładowa tabelka składa się z dwóch kolumn, nagłówka i jednego wiersza.
             </p>
             <p>
-              Wygeneruj tabelkę na podstawie tzw. "blueprint". Oddziel komórki separatorem <code>;</code> lub <code>|</code>,
-              a następnie zaznacz kursorem blueprint.
+              Wygeneruj tabelkę na podstawie szablonu. Oddziel komórki separatorem <code>;</code> 
+              lub <code>|</code>, a następnie zaznacz szablonu.
             </p>
             <p>
               <code>nazwisko;dziedzina;odkrycie</code><br>
               <code>Pitagoras;mathematics;Pythagorean Theorem</code><br>
               <code>Albert Einstein;physics;General Relativity</code><br>
               <code>Marie Curie, Pierre Curie;chemistry;Radium, Polonium</code><br>
             </p>
-
-            <p>Użyj komendy <i class="fas fa-fw fa-table"/> by zamienić zaznaczony blueprint na tabelkę Markdown.</p>
-
+            <p>
+              Użyj komendy <vue-icon name="editorControlTable"/> by zamienić zaznaczony szablon
+              na tabelkę Markdown.
+            </p>
             <h3>Lista uporządkowana i nieuporządkowana</h3>
             <p>
               Możliwe jest tworzenie listy numerowanych oraz wypunktowanych. Wystarczy, że pierwszym znakiem linii
               będzie <code>*</code> lub <code>-</code> dla listy nieuporządkowanej oraz <code>1. </code> dla
               listy uporządkowanej.
             </p>
-            <p>Użyj komendy <i class="fas fa-fw fa-list-ol"/> by dodać listę uporządkowaną.</p>
+            <p>Użyj komendy <vue-icon name="editorControlListOrdered"/> by dodać listę uporządkowaną.</p>
             <p>
               <code>1. Lista numerowana</code><br/>
               <code>2. Lista numerowana</code><br/>
             </p>
-            <p>Użyj komendy <i class="fas fa-fw fa-list-ul"/> by dodać listę nieuporządkowaną.</p>
+            <p>Użyj komendy <vue-icon name="editorControlListUnordered"/> by dodać listę nieuporządkowaną.</p>
             <p>
               <code>* Lista wypunktowana</code><br/>
               <code>* Lista wypunktowana</code><br/>
@@ -160,9 +161,9 @@
             <h3>Składnia Markdown</h3>
             <p>
               Edytor obsługuje składnię Markdown, która składa się ze znaków specjalnych.
-              Dostępne komendy, jak formatowanie <i class="fas fa-fw fa-bold"/>, dodanie
-              tabelki <i class="fas fa-fw fa-table"/> lub fragmentu kodu <i class="fas fa-fw fa-code"/>
-              są w pewnym sensie swiadome otaczającej jej składni, i postarają się uniknać
+              Dostępne komendy, jak formatowanie <vue-icon name="editorControlBold"/>, dodanie
+              tabelki <vue-icon name="editorControlTable"/> lub fragmentu kodu <vue-icon name="editorControlCodeBlock"/>
+              są w pewnym sensie świadome otaczającej jej składni, i postarają się unikać
               uszkodzenia jej.
             </p>
             <p>
@@ -180,7 +181,6 @@
           </div>
           <div class="col-md-6">
             <h3>Skróty klawiszowe</h3>
-
             <p>
               Skróty formatujące, kiedy w edytorze znajduje się pojedynczy kursor, wstawiają
               sformatowany tekst przykładowy. Jeśli w edytorze znajduje się zaznaczenie (słowo,
@@ -207,7 +207,8 @@
             <ul>
               <li><kbd>Alt+L</kbd> - zaznaczenie całej linii</li>
               <li>
-                <kbd>Alt+<i class="fas fa-arrow-up"/></kbd>, <kbd>Alt+<i class="fas fa-arrow-down"/></kbd> -
+                <kbd>Alt+<vue-icon name="editorMarkdownHelpKeyArrowUp"/></kbd>, 
+                <kbd>Alt+<vue-icon name="editorMarkdownHelpKeyArrowDown"/></kbd> -
                 przeniesienie linijki w której znajduje się kursor w górę/dół.
               </li>
               <li><kbd>Tab</kbd>/<kbd>⌘+]</kbd> - dodaj wcięcie (wcięcie w prawo)</li>
@@ -225,3 +226,6 @@
     </div>
   </div>
 </template>
+<script setup>
+import VueIcon from '../icon.vue';
+</script>