Über die Verwendung von vue-fontawesome in vue.js

Dieser Artikel stellt hauptsächlich die Verwendung von vue-fontawesome in der vue.js-Reihe vor. Freunde, die es benötigen, können darauf verweisen

Wurf-Vorwort

Meine aktuelle Arbeit verwendet hauptsächlich das vue.js-Framework für die Entwicklung. Ich weiß nicht viel über vue und bin noch in einem unausgegorenen Zustand, also muss ich mich damit vertraut machen In den letzten zwei Tagen habe ich Scaffolding vue-cli verwendet, um Projekte zu erstellen und zu spielen. Ich habe hart daran gearbeitet font-awesome, und ich habe über Github erfahren, dass ein großer Kerl bereits Vue erstellt hat – großartig, also habe ich angefangen zu basteln herum damit...

Ohne weitere Umschweife, fangen wir an!

Vorbereitung

Dies ist die Github-Adresse des Autors: Flugzeug

Um die vollständigen Schritte zu demonstrieren, verwenden Sie ein Gerüst Erstellen Sie ein neues Projekt

Wird erstellt...

Nutzen Sie die Gelegenheit, um ein paar Worte zu plaudern

Der Vorteil dieser Methode besteht darin, dass Sie jedes Symbol selbst anpassen können Geben Sie es dann im SVG-Format aus. Verwenden Sie dann Icon.register, um ein Symbol zu registrieren:

Wenn viele Symbole vorhanden sind, sind möglicherweise viele SVG-Tags im DOM verstreut . Ich weiß nicht, ob das ein Nachteil ist.

Icon.register({
 'chevron-right': {
  'width': 1280,
  'height': 1792,
  'paths': [{
   'd': 'M1107 877l-742 742q-19 19-45 19t-45-19l-166-166q-19-19-19-45t19-45l531-531-531-531q-19-19-19-45t19-45l166-166q19-19 45-19t45 19l742 742q19 19 19 45t-19 45z'
  }]
 }
});

chevron-right Dies ist der Name des Symbols. Wenn Sie es verwenden, verwenden Sie

<icon name="chevron-right"></icon> . Definieren Sie ihn einfach normal.

Pfade enthält die Pfadinformationen beim Zeichnen der SVG-Datei des Symbols

Die Installation ist in Ordnung, kommen wir zum Punkt...

Vorbereitung:

• vue-awesome installieren

$ npm install vue-awesome --save

Diese einfache Installation ist in Ordnung.

Ergebnisvorschau

Wie Sie auf dem Bild sehen können, ist das Symbol am Ende tatsächlich ein SVG-Tag

icon-Speicherverzeichnis

Um die Entwicklung zu erleichtern, erstellen Sie ein neues src/icons-Verzeichnis, um Icon-JS-Dateien zentral zu speichern

$ cd src/
$ mkdir icons && cmod

Der cmod hier ist 777 Berechtigungen . Da eine virtuelle Maschine verwendet wird, treten häufig Probleme mit den Berechtigungen auf. Geben Sie daher einfach 777 ein (nur lokale Entwicklung).

Symbolkomponente

Laden Sie die Icon.vue-Datei herunter

Gehen Sie hier, um die Icon.vue-Datei herunterzuladen. Es wird empfohlen, das gesamte Projekt zu giten.

Diese Komponente wird zum Erstellen <icon name="your icon name"></icon> benutzerdefinierter Tags verwendet.

Dann legen Sie Icon.vue im Komponentenverzeichnis ab (Sie können entscheiden, wo es abgelegt werden soll)

Erstellen Sie eine registrierte Symboldatei in src/icons

Legen Sie die registrierten js-Dateien aller Symbole zentral im Verzeichnis ab

Erstellen Sie die Exportdatei index.js, die alle Symbol-js-Dateien importiert

// src/icons/index.js
import './chevron-right.js';
// ...... 其他需要的图标文件

Klicken Sie mit der rechten Maustaste auf das Symbol als ein Beispiel: (chevron-right.js)

import Icon from '../components/Icon.vue';
Icon.register({
 'chevron-right': {
  'width': 1280,
  'height': 1792,
  'paths': [{
   'd': 'M1107 877l-742 742q-19 19-45 19t-45-19l-166-166q-19-19-19-45t19-45l531-531-531-531q-19-19-19-45t19-45l166-166q19-19 45-19t45 19l742 742q19 19 19 45t-19 45z'
  }]
 }
});

Der Projekteintrag main.js verweist auf die Schriftartenbibliothek

Die Projekthaupteintragsdatei main.js führt den < ein 🎜>Bibliothek und die vue-awesome -Dateiicons/index.js

Führen Sie die Symbolkomponente ein

import Icon from './components/Icon';

Führen Sie die Symbolinhaltsdatei ein

import './icons/index.js';

Registrieren Sie dann das Symbol als Vue-Komponente

Vue.component('icon', Icon);

Nachdem die Registrierung abgeschlossen ist, können wir sie direkt im Code verwenden

Tag <icon></icon>

Ende

Die Schritte sind nach den oben genannten Schritten sehr einfach , wir können die Symbolbibliothek normal verwenden

Zusammenfassend sind die Schritte eigentlich die folgenden Schritte

1. Icon.vue-Komponente importieren

2. neues you-icon.js, das das Symbol über Icon.register registriert

3. [Optional] Erstellen Sie eine neue Symboldatei-Exportdatei. Dies ist praktischer, wenn Sie viele Symbole verwenden

4. Referenzsymbol

5. Legen Sie den Stil für das Symbol fest ( Die Größe kann durch transform: scale())

PS: Sie können die Schriftart direkt festlegen und die Größe nicht ändern

Das Obige ist das, was ich zusammengestellt habe für alle. Ich hoffe, dass es in Zukunft für alle hilfreich sein wird.

Verwandte Artikel:

So implementieren Sie Änderungen in Überwachungsobjekten und entsprechenden Werten in Vue

Bei Verwendung von $emit in vue, Wie kann man erkennen, dass die übergeordnete Komponente die Ereignisse der untergeordneten Komponente nicht abhören kann?

Wie verwende ich die globale Eingabeaufforderungsbox-Komponente in Vue?

Das obige ist der detaillierte Inhalt vonÜber die Verwendung von vue-fontawesome in vue.js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!