Zum Inhalt springen

Wie man FontAwesome 5 in einem NUXT.JS / Vue.js Projekt verwenden kann

FontAwesome

Content Area

Categories

Wie man FontAwesome 5 in einem NUXT.JS / Vue.js Projekt verwenden kann

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!

Schreiben Sie einen Kommentar

Ihre E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Ich akzeptiere