À propos de l'utilisation de vue-fontawesome dans vue.js

Cet article présente principalement l'utilisation de vue-fontawesome dans la série vue.js. Les amis qui en ont besoin peuvent s'y référer

Préface de Tossing

Mon travail actuel utilise principalement le framework vue.js pour le développement. Je ne connais pas grand-chose à vue, et je suis encore à moitié cuit, je dois donc intensifier mes efforts et me familiariser avec lui. ces deux derniers jours, j'utilise des échafaudages

pour créer des projets et jouer sur lesquels je travaille vue-cli depuis longtemps. J'ai appris grâce à github que certains grands avaient déjà créé vue-awesome, alors j'ai commencé. pour s'en amuser... font-awesome

Sans plus attendre, commençons !

Préparation

Voici l'adresse github de l'auteur : Avion

Afin de démontrer les étapes complètes, utilisez un échafaudage pour créer un nouveau projet

Création...

Profitez-en pour discuter quelques mots

L'avantage d'utiliser cette méthode est que vous pouvez personnaliser vous-même n'importe quelle icône, cela c'est-à-dire, affichez-le au format SVG. Utilisez ensuite

pour enregistrer une icône. La méthode d'enregistrement est la suivante : Icon.register

S'il y a beaucoup d'icônes, il peut y avoir un grand nombre de balises SVG dispersées dans le DOM. . Je ne sais pas si c'est un inconvénient.

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 C'est le nom de l'icône Lorsque vous l'utilisez, utilisez

Quant au style, suivez simplement la définition normale. <icon name="chevron-right"></icon>

paths contient les informations de chemin lors du dessin du svg de l'icône

L'installation est OK, allons droit au but...

Préparation :

• Installer vue-awesome

$ npm install vue-awesome --save

Cette installation simple est OK.

Aperçu du résultat

Comme vous pouvez le voir sur la photo, l'icône est en fait une balise SVG à la fin

Répertoire de stockage d'icônes

Pour faciliter le développement, créez un nouveau répertoire src/icons pour stocker de manière centralisée les fichiers icon js

$ cd src/
$ mkdir icons && cmod

Le cmod ici a Autorisations 777. Puisqu'il s'agit d'une machine virtuelle, il y a souvent un problème d'autorisation, alors téléchargez simplement le fichier Icon.vue sur 777 (développement local uniquement)

composant icône

Allez ici pour télécharger le fichier Icon .vue, il est recommandé de giter l'intégralité du projet.

Ce composant est utilisé pour créer des

balises personnalisées.

Ensuite, mettez Icon.vue dans le répertoire des composants (vous pouvez décider où le mettre) <icon name="your icon name"></icon>

Créez un fichier d'icône enregistré dans src/icons

Ceci place les fichiers js enregistrés de toutes les icônes dans le répertoire

Créez le fichier d'exportation index.js qui importera tous les fichiers js d'icône

Prenez l'icône d'en-tête avec le clic droit à titre d'exemple : (chevron-right. js)

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

L'entrée du projet main.js fait référence à la bibliothèque de polices

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'
  }]
 }
});

Le fichier d'entrée principale du projet main.js présente la bibliothèque et le

fichier

vue-awesome Introduisez le composant icôneicons/index.js

Introduisez le fichier de contenu de l'icône

import Icon from './components/Icon';

Ensuite, enregistrez l'icône en tant que composant vue

import './icons/index.js';

Une fois l'enregistrement terminé, nous pouvons utiliser la balise

directement dans le code

Vue.component('icon', Icon);

<icon></icon>Fin

Les étapes sont très simples. Après les étapes ci-dessus, nous pouvons utiliser l'icône normalement.

Pour résumer, les étapes sont en fait les étapes suivantes

importer le composant Icon.vue.

1. nouveau you-icon. js, qui enregistre les icônes via Icon.register

2. [Facultatif] Créez un nouveau fichier d'exportation de fichier d'icône, qui est plus pratique lorsque vous utilisez beaucoup d'icônes

3. Icône de référence

4. Définissez le style de l'icône (la taille peut être définie par transform: scale())

5. PS : définissez la police directement et ne pouvez pas modifier la taille
Ce qui précède est ce que j'ai compilé pour tout le monde. J'espère que cela sera utile à tout le monde à l'avenir.

Articles connexes :

Comment implémenter les modifications dans les objets de surveillance de la surveillance et les valeurs correspondantes dans vue

Lors de l'utilisation de $emit dans vue ,Comment se rendre compte que le composant parent ne peut pas écouter les événements du composant enfant ?

Comment utiliser le composant de boîte d'invite globale dans vue ?

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!