Τι είναι το Iconify και πώς να το ενσωματώσετε στις εφαρμογές Vue;

Οι καλύτερες διαδικτυακές εφαρμογές είναι πραγματικά μια συλλογή από κείμενο και εικόνες. Εκτός από την αισθητική αίσθηση που παρέχουν οι εικόνες σε μια εφαρμογή Ιστού, παρέχουν επίσης οπτικές ενδείξεις και βελτιώνουν το ενδιαφέρον των χρηστών για την εφαρμογή.

Το Iconify είναι ένα πλαίσιο εικονιδίων που παρέχει μια μεγάλη συλλογή εικονιδίων απόδοσης SVG από διάφορα πακέτα εικονιδίων, συμπεριλαμβανομένων εικονιδίων Bootstrap και Material Design. Το Iconify υποστηρίζει διαφορετικά πλαίσια JavaScript διεπαφής καθιστώντας το μια ευέλικτη λύση για την προσθήκη εικονιδίων στις εφαρμογές ιστού σας.

Πώς να ενσωματώσετε το Iconify στην εφαρμογή Vue σας

Μπορείτε να αξιοποιήσετε το Iconify στην εφαρμογή Vue με το @iconify/vue πακέτο npm. Αυτό το πακέτο npm είναι μια ενοποίηση του Vue για το πλαίσιο εικονιδίων Iconify.

@iconify/vue παρέχει έναν απρόσκοπτο τρόπο χρήσης εικονιδίων εντός των εφαρμογών Vue. Αυτό το πακέτο σάς επιτρέπει να προσθέτετε και να προσαρμόζετε γρήγορα εικονίδια στο έργο σας. Για εγκατάσταση

@iconify/vue στην εφαρμογή Vue, εκτελέστε την ακόλουθη εντολή npm στο τερματικό του ριζικού καταλόγου της εφαρμογής σας:

npm install --save-dev @iconify/vue

Αυτή η εντολή εγκαθιστά το @iconify/vue συσκευασία ως α εξάρτηση από την ανάπτυξη στην εφαρμογή Vue.

Αυτό το πακέτο θα λειτουργεί μόνο για εφαρμογές Vue 3, τις οποίες χρειάζεστε για να ακολουθήσετε αυτό το άρθρο. Το πακέτο δεν υποστηρίζει εφαρμογές Vue 2. Ωστόσο, για να χρησιμοποιήσετε το Iconify στο Vue 2, εκτελέστε την ακόλουθη εντολή npm:

npm install @iconify/vue2

Καθώς η διαχείριση του Vue 2 δεν θα γίνεται πλέον από τις 31 Δεκεμβρίου 2023, θα πρέπει να μάθετε πώς να χρησιμοποιείτε το Vue 3 και τις δυνατότητές του. Αυτό γίνεται για να διασφαλιστεί ότι παραμένετε ενημερωμένοι και σχετικοί με την κοινότητα του Vue.

Πώς να προσθέσετε εικονίδια στα στοιχεία Vue σας

Μπορείτε να προσθέσετε εικονίδια εισάγοντας το Εικόνισμα στοιχείο από το πακέτο στα στοιχεία Vue. Για να προσθέσετε εικονίδια, επικολλήστε τον ακόλουθο κώδικα στο μπλοκ δέσμης ενεργειών του στοιχείου Vue:

<scriptsetup>
import { Icon } from '@iconify/vue'
script>

Μετά από αυτό το βήμα, μπορείτε να αποκτήσετε πρόσβαση σε όλα τα εικονίδια στη βιβλιοθήκη Iconify. Για να προσθέσετε ένα εικονίδιο, μεταβείτε στο Εικονοποιώ δικτυακός τόπος. Κατά την πλοήγηση στον ιστότοπο, θα εισαγάγετε το όνομα του εικονιδίου που χρειάζεστε στην εφαρμογή σας.

Η παρακάτω εικόνα δείχνει τα αποτελέσματα αναζήτησης για ένα εικονίδιο ελέγχου.

Στη συνέχεια, μπορείτε να επιλέξετε το στυλ του εικονιδίου ελέγχου που χρειάζεστε κάνοντας κλικ στο εικονίδιο. Μπορείτε να προσαρμόσετε περαιτέρω τα εικονίδια σας παρέχοντας το Χρώμα, Μέγεθος, Αναρρίπτω, και Γυρίζω χωράφια.

Με αυτά τα πεδία, μπορείτε να καθορίσετε το απαιτούμενο χρώμα, το μέγεθος, τη θέση και τον προσανατολισμό του εικονιδίου σας. Αφού προσαρμόσετε το εικονίδιό σας, μπορείτε πλέον να χρησιμοποιήσετε το στοιχείο εικονιδίου στην εφαρμογή Vue αντιγράφοντας τον κώδικα του στοιχείου στην ιστοσελίδα.

<template>
<Iconicon="ph: check-fill"color="red"width="500"height="500" />
template>

Το μπλοκ κώδικα παραπάνω ορίζει το χρώμα του εικονιδίου σε κόκκινο. Καθορίζει επίσης το ύψος και το πλάτος να είναι 500 pixel το καθένα.

Κάνοντας προεπισκόπηση της εφαρμογής, θα λάβετε μια εικόνα παρόμοια με την παρακάτω εικόνα:

Αν και προσθέτετε εικονίδια στην εφαρμογή σας με το @iconify/vue Το πακέτο είναι γενικά απλό, μπορεί περιστασιακά να οδηγήσει σε προβλήματα. Ορισμένα κοινά προβλήματα περιλαμβάνουν προβλήματα προ-απόδοσης, μηνύματα σφάλματος στο Μοντέλο αντικειμένου εγγράφου (DOM), και το Vue δεν αποδίδει σωστά το στοιχείο.

Αυτά τα προβλήματα προκύπτουν λόγω του χρονισμού της διαδικασίας τοποθέτησης εξαρτημάτων σε σχέση με τη φόρτωση των εικονιδίων. Μπορείτε να λύσετε αυτό το πρόβλημα με το εικονίδια αποσύνδεσης βιβλιοθήκη.

Προσθήκη εικονιδίων με το unplugin-Icons Library

ο εικονίδια αποσύνδεσης Η βιβλιοθήκη προσφέρει έναν εναλλακτικό, χωρίς σφάλματα τρόπο εισαγωγής και χρήσης εικονιδίων απευθείας στο πρότυπό σας.

Αυτή η προσέγγιση ενσωμάτωσης εικονιδίων επιλύει τα ζητήματα που επισημαίνονται με @iconify/vue, διασφαλίζοντας ότι το Vue θα περιλαμβάνει αυτόματα κάθε εικονίδιο που χρησιμοποιείτε στη ομαδοποιημένη εφαρμογή σας.

Για να ξεκινήσετε με το εικονίδια αποσύνδεσης βιβλιοθήκη, ανοίξτε το τερματικό σας και εγκαταστήστε τη βιβλιοθήκη εκτελώντας την ακόλουθη εντολή npm:

npm install unplugin-icons

Μετά την εγκατάσταση, πρέπει να διαμορφώσετε το εργαλείο κατασκευής σας. Vue 3 χρήσεις Vite ως εργαλείο κατασκευής του. Κατευθύνομαι προς vite.config.js και ρυθμίστε το αρχείο ώστε να μοιάζει ακριβώς με το μπλοκ κώδικα παρακάτω:

import { fileURLToPath, URL } from'node: url'
import { defineConfig } from'vite'
import vue from'@vitejs/plugin-vue'
import Icons from'unplugin-icons/vite';
// https://vitejs.dev/config/
exportdefault defineConfig({
 plugins: [vue(), Icons()],
 resolve: {
 alias: {
'@': fileURLToPath(new URL('./src', import.meta.url))
 }
 }
})

Το μπλοκ κώδικα παραπάνω απεικονίζει το αρχείο διαμόρφωσης Vite. Το απόσπασμα κώδικα εισάγει το εικονίδια πρόσθετο από unplugin-icon/vite. Το μπλοκ κώδικα στη συνέχεια ρυθμίζεται Εικονίδια () ως πρόσθετο στο πρόσθετα πίνακας.

Μπορείτε να εγκαταστήσετε όλα τα σετ εικονιδίων για να μεγιστοποιήσετε την επιλογή εικονιδίων. Για να εγκαταστήσετε όλα τα σύνολα εικονιδίων, εκτελέστε την ακόλουθη εντολή npm στο τερματικό του καταλόγου της εφαρμογής σας:

npm i -D @iconify/json

Ο κώδικας εγκαθιστά όλα τα σύνολα εικονιδίων που είναι διαθέσιμα στο Iconify. Το μέγεθος εγκατάστασης αυτού του πακέτου είναι περίπου 200 MB. Μπορείτε επίσης να εγκαταστήσετε μόνο ένα συγκεκριμένο σύνολο εικονιδίων αντί για όλα τα σετ για να μειώσετε το μέγεθος του πακέτου:

npm i -D @iconify-json/ph

Το παραπάνω απόσπασμα κώδικα εγκαθιστά μόνο εικονίδια από το σύνολο εικονιδίων Phosphor, τα οποία το Iconify υποδηλώνει με ph.

Μετά την εγκατάσταση, μπορείτε να εισαγάγετε το στοιχείο εικονιδίου στην εφαρμογή Vue. Πρέπει να εισαγάγετε ονόματα εικονιδίων με τη σύμβαση ~icons/{set}/{iconName} για να χρησιμοποιήσετε τα εικονίδια στα στοιχεία σας.

Η περιγραφή της σύμβασης για την εισαγωγή εικονιδίων είναι η εξής:

• ~ εικονίδια: Αναφέρεται στη διαδρομή του εικονιδίου.
• { set }: Αναφέρεται στο σύνολο ή τη συλλογή εικονιδίων.
• { iconName }: Αναφέρεται στο όνομα της εικόνας στο κεμπάπ-θήκη.

Ακολουθεί ένα παράδειγμα που δείχνει την εισαγωγή και τη χρήση του CheckFill στοιχείο εικονιδίου:

<scriptsetup>
import CheckFill from "~icons/ph/check-fill"
script>
<template>
<CheckFillcolor="red"width="500"height="500" />
template>

Αυτό το απόσπασμα κώδικα δείχνει πώς να εισάγετε ονόματα εικονιδίων με τη σύμβαση ~cons/ph/check-fill. Το απόσπασμα κώδικα εισάγει το CheckFill στοιχείο εικονιδίου από το σύνολο εικονιδίων Phosphor. Στη συνέχεια, ορίζει τα χαρακτηριστικά χρώματος, πλάτους και ύψους του στοιχείου εικονιδίου στο πρότυπο Vue.

Η προεπισκόπηση της εφαρμογής από το παραπάνω μπλοκ κώδικα θα έχει ως αποτέλεσμα την ίδια εικόνα της εφαρμογής όπως φαίνεται προηγουμένως.

Κάντε τις εφαρμογές σας Vue πιο προσιτές

Το Iconify είναι μια πολύτιμη βιβλιοθήκη για τις εφαρμογές σας Vue, καθώς σας επιτρέπει να ενσωματώνετε εύκολα εικονίδια στη διεπαφή της εφαρμογής σας. Η τεράστια βιβλιοθήκη εικονιδίων του Iconify παρέχει καλύτερες επιλογές προσαρμογής για την εφαρμογή σας.

Ως προγραμματιστής του Vue, πρέπει να κάνετε τις εφαρμογές web σας προσβάσιμες σε όλους τους τύπους ανθρώπων. Αυτό συμβαίνει επειδή διαφορετικά άτομα έχουν διαφορετικούς τρόπους με τους οποίους μπορούν να χρησιμοποιήσουν τις εφαρμογές σας, για παράδειγμα, τυφλοί και κωφοί. Μάθετε εργαλεία για να κάνετε τις εφαρμογές ιστού σας εύκολα προσβάσιμες σε αυτά τα άτομα.