Icônes

Afin de changer votre bibliothèque de polices, ajoutez l'option iconfont lors de l'instanciation.

L'utilisation d'une option prédéfinie préféra les valeurs par défaut basées sur le préréglage sélectionné. Ceci remplacera les valeurs par défaut des composants ayant des valeurs par défaut icône . Pour plus d'informations, consultez la valeur par défaut valeurs de preset de l'icône.

Vous devez inclure la bibliothèque d'icônes spécifiée (même si vous utilisez l'option par défaut). Cela peut être fait en incluant un lien CDN ou en important la bibliothèque d'icônes dans votre application

C'est la police d'icône par défaut pour Vuetify. Vous pouvez l'inclure via un CDN :

Ou comme dépendance locale :

Utilisez les path SVG comme désignés dans @mdi/js. C'est l'installation recommandée lors de l'optimisation de votre application pour la production. Vous devez inclure ceci SEULEMENT si vous prévoyez d'utiliser plus que les icônes par défaut.

Spécifiez la police d'icônes mdiSvg :

Vous pouvez importer sur mesure uniquement les icônes que vous utilisez permettant de réduire considérablement la taille du paquet.

L'installation est la même que celle ci-dessus. Pour les projets sans processus de build, il est recommandé d'importer les icônes depuis un CDN

Alternativement, il est possible d'installer localement en utilisant yarn ou npm. Gardez à l'esprit que ceci n'est pas un dépôt Google officiel et qu'il est possible qu'il ne pas reçoive pas de mises à jour

Une fois que vous avez installé le paquet, importez-le dans votre fichier js principal. Ceci est typiquement le fichier main.js, index.js ou app.js situé dans votre dossier src/. Si vous utilisez une application SSR, vous avez probablement un fichier client.js ou entry-client.js.

La façon la plus simple de commencer avec FontAwesome est d'utiliser un CDN. Dans la section head de votre index.html principal placez ce snippet :

Pour installer localement, vous pouvez pull la version Free de FontAwesome en utilisant votre gestionnaire de paquets préféré :

Dans votre point d'entrée principal, il vous suffit d'importer le paquet all.css. Si vous utilisez un projet configuré de webpack, vous devrez configurer le support des fichiers .css en utilisant le webpack css loader. Si vous utilisez déjà Vue CLI, cela est fait pour vous automatiquement.

Comme ci-dessus. Installer FontAwesome via CDN est la façon la plus simple de l'intégrer dans votre projet :

L'installation de FontAwesome4 est la même que sa version plus récente, juste à partir d'un autre dépôt. Vous ciblerez le dépôt font-awesome par opposition au @fortawesome.

N'oubliez pas que votre projet devra reconnaître css. Si vous utilisez webpack, installez et configurez le css loader.

Ajoutez les dépendances nécessaires.

Ensuite, ajoutez globalement le composant font-awesome-icon et définissez faSvg comme iconfont dans la configuration Vuetify.

Disons que votre application ait besoin d'une icône personnalisée dans un composant Vuetify. Au lieu de créer un composant wrapper ou de définir manuellement l'icône spécifique chaque fois qu'un composant apparaît, vous pouvez la configurer globalement.

Disons que votre application ait besoin d'une icône personnalisée dans un composant Vuetify. Au lieu de créer un composant wrapper ou de définir manuellement l'icône spécifique chaque fois qu'un composant apparaît, vous pouvez la configurer globalement.

Vuetify va automatiquement fusionner toutes les strings d'icônes fournies dans l'ensemble des presets disponibles. Cela vous permet de créer des strings personnalisées qui peuvent être utilisées dans votre application en référençant simplement les icônes globales.

Ceci peut vous aider à garantir que votre application utilise toujours une icône spécifique donnée pour une string fournie. Voici quelques manières d'utiliser <v-icon> avec ce système.

Vous pouvez utiliser les mêmes chaînes d'icônes dans vos propres composants personnalisés. Tout moment $vuetify.icons (ou raccourci $) est passé par v-text, v-html ou par texte, <v-icon> va regarder cette valeur spécifiée. Cela vous permet de créer des solutions personnalisées faciles à construire et faciles à gérer.

Vous pouvez utiliser les icônes des composants avec Font Awesome Pro pour sélectionner des poids d'icônes individuels :

Au lieu des presets de polices d'icônes fournies, vous pouvez utiliser vos propres composants icônes. Vous pouvez aussi changer les icônes utilisées dans le composant Vuetify avec les vôtres.

Si vous voulez que vos icônes SVG héritent correctement des couleurs et de l'échelle - assurez-vous d'y ajouter le css suivant :

Certaines icônes Material sont manquantes par défaut. Par exemple, person et person_outline sont disponibles, mais visibility_outline ne l'est pas, même si visibility l'est. Pour utiliser des icônes Material manquantes, incluez la police ci-dessous (supprimez une autre police matérielle si déjà enregistrée).

Vous pouvez ajouter votre composant personnalisé. Supposons que ça soit @/components/MaterialIcon.vue.

Vous devez alors enregistrer les icônes Material exactes que vous voulez.

Enfin, vous pouvez utiliser les icônes Material comme ceci.