Eigentlich sehr einfach, wenn man weiß wie. Allerdings nicht, an diese Informationen erst einmal zu kommen.
Deshalb an dieser Stelle gerne kurz im Detail erklärt.
Via npm-Installation müssen folgende Pakete installiert werden:
$ npm install --save nuxt-fontawesome @fortawesome/fontawesome @fortawesome/free-solid-svg-icons @fortawesome/free-brands-svg-icons
Wer lieber Yarn verwendet, muss folgendes Command ausführen:
$ yarn add nuxt-fontawesome @fortawesome/fontawesome @fortawesome/free-solid-svg-icons @fortawesome/free-brands-svg-icons
Anschließend muss die nuxt.config.js im Root-Verzeichnis eines Nuxt-Projects entsprechend angepasst werden.
...
modules: [
// whatever comes before...
[
'nuxt-fontawesome',
{
component: 'fa',
imports: [
{
set: '@fortawesome/free-solid-svg-icons',
icons: ['fas']
},
{
set: '@fortawesome/free-brands-svg-icons',
icons: ['fab']
}
]
}
]
],
....Da wir die Module global definiert haben, können wir nun in jeder Komponente wie folgt darauf zugreifen:
<fa :icon="['fas', 'ad']" /> <fa :icon="['fab', 'wordpress']" />
Im oben stehenden Beispiel nutzen wir als Beispiel das AD-Icon aus den Solid-Icons (mit dem fas-Präfix), als zweites das WordPress-Icon aus den Brand-Icons (mit dem fab-Präfix).
Wichtig ist dabei nur, dass ihr als ersten Parameter das Set mitgebt (fas / fab / far / fal / fad) und als zweiten nur den Namen des Icons ohne vorangestelltes fa.
Et Voilà!
Natürlich könnt ihr auf die gleiche Weise auch alle anderen FontAwesome – Komponenten hinzufügen und verwenden.
Viel Spaß!
Wenn euch der Artikel gefallen hat und / oder ihr weitere Fragen oder Wünsche habt, hinterlasst bitte gerne einen Kommentar!