Chcesz wzbogacić swoje aplikacje Vue o ikony? Dowiedz się, jak bez wysiłku zintegrować Iconify z aplikacją Vue.

Najlepsze aplikacje internetowe są tak naprawdę zbiorem tekstu i obrazów. Oprócz wrażenia estetycznego, jakie obrazy zapewniają aplikacji internetowej, dostarczają one również wskazówek wizualnych i zwiększają zainteresowanie użytkowników aplikacją.

Iconify to platforma ikon zapewniająca dużą kolekcję ikon renderowanych w formacie SVG z różnych pakietów ikon, w tym ikon Bootstrap i Material Design. Iconify obsługuje różne front-endowe frameworki JavaScript, dzięki czemu jest wszechstronnym rozwiązaniem do dodawania ikon do aplikacji internetowych.

Jak zintegrować Iconify z aplikacją Vue

Możesz wykorzystać Iconify w swojej aplikacji Vue za pomocą @iconify/vue pakiet npm. Ten pakiet npm jest integracją Vue dla struktury ikon Iconify.

@iconify/vue zapewnia bezproblemowy sposób używania ikon w aplikacjach Vue. Ten pakiet umożliwia szybkie dodawanie i dostosowywanie ikon w projekcie. Żeby zainstalować

instagram viewer
@iconify/vue w aplikacji Vue uruchom następującą komendę npm w terminalu katalogu głównego aplikacji:

npm install --save-dev @iconify/vue

To polecenie instaluje @iconify/vue paczka jako A zależność rozwojowa w Twojej aplikacji Vue.

Ten pakiet będzie działał tylko z aplikacjami Vue 3, których potrzebujesz, aby zapoznać się z tym artykułem. Pakiet nie obsługuje aplikacji Vue 2. Aby jednak użyć Iconify w Vue 2, uruchom następującą komendę npm:

npm install @iconify/vue2

Ponieważ Vue 2 nie będzie już zarządzane od 31 grudnia 2023 r., powinieneś nauczyć się korzystać z Vue 3 i jego funkcji. Ma to na celu zapewnienie, że będziesz na bieżąco i odpowiedni w społeczności Vue.

Jak dodawać ikony do komponentów Vue

Możesz dodać ikony, importując plik Ikona komponent z pakietu w komponentach Vue. Aby dodać ikony, wklej następujący kod w bloku skryptu komponentu Vue:

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

Po tym kroku możesz uzyskać dostęp do wszystkich ikon w bibliotece Iconify. Aby dodać ikonę, przejdź do Ikonifikuj strona internetowa. Wchodząc na stronę internetową, wpiszesz nazwę ikony, której potrzebujesz w swojej aplikacji.

Poniższy obraz przedstawia wyniki wyszukiwania ikony wyboru.

Następnie możesz wybrać styl ikony wyboru, której potrzebujesz, klikając ikonę. Możesz dodatkowo dostosować swoje ikony, udostępniając Kolor, Rozmiar, Trzepnięcie, I Obracać się pola.

Za pomocą tych pól możesz określić wymagany kolor, rozmiar, położenie i orientację ikony. Po dostosowaniu ikony możesz teraz użyć komponentu ikony w swojej aplikacji Vue, kopiując kod komponentu na stronie internetowej.

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

Powyższy blok kodu ustawia kolor ikony na czerwony. Określa również wysokość i szerokość na 500 pikseli każda.

Wyświetlając podgląd aplikacji, otrzymasz obraz podobny do poniższego:

Chociaż dodawanie ikon do aplikacji za pomocą @iconify/vue pakiet jest ogólnie prosty, czasami może powodować problemy. Niektóre typowe problemy obejmują problemy z renderowaniem wstępnym, komunikaty o błędach w pliku Obiektowy model dokumentu (DOM), a Vue nie renderuje poprawnie komponentu.

Problemy te wynikają z synchronizacji procesu montowania komponentów w stosunku do ładowania ikon. Możesz rozwiązać ten problem za pomocą ikony-odłączania biblioteka.

Dodawanie ikon za pomocą biblioteki ikon odłączających

The ikony-odłączania oferuje alternatywny, bezbłędny sposób importowania i używania ikon bezpośrednio w szablonie.

Takie podejście do integracji ikon rozwiązuje problemy wyróżnione za pomocą @iconify/vue, zapewniając, że Vue automatycznie dołączy każdą ikonę, której używasz w dołączonej aplikacji.

Aby rozpocząć z ikony-odłączania biblioteka, otwórz terminal i zainstaluj bibliotekę, uruchamiając następującą komendę npm:

npm install unplugin-icons

Po instalacji musisz skonfigurować narzędzie do budowania. Zastosowania Vue 3 Vite jako narzędzie do budowania. Zmierzać do vite.config.js i skonfiguruj plik tak, aby wyglądał dokładnie tak, jak blok kodu poniżej:

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))
 }
 }
})

Powyższy blok kodu przedstawia plik konfiguracyjny Vite. Fragment kodu importuje plik Ikony wtyczka z ikona odłączenia/vite. Następnie blok kodu ustawia się Ikony() jako wtyczka w wtyczki szyk.

Możesz zainstalować wszystkie zestawy ikon, aby zmaksymalizować wybór ikon. Aby zainstalować wszystkie zestawy ikon, uruchom następujące polecenie npm w terminalu katalogu aplikacji:

npm i -D @iconify/json

Kod instaluje wszystkie zestawy ikon dostępne dla Iconify. Rozmiar instalacyjny tego pakietu wynosi około 200 MB. Możesz także zainstalować tylko określony zestaw ikon zamiast wszystkich zestawów, aby zmniejszyć rozmiar pakietu:

npm i -D @iconify-json/ph

Powyższy fragment kodu instaluje tylko ikony z zestawu ikon Phosphor, który oznacza Iconify ph.

Po instalacji możesz zaimportować komponent icon do swojej aplikacji Vue. Musisz zaimportować nazwy ikon zgodnie z konwencją ~icons/{set}/{iconName} wykorzystać ikony w komponentach.

Opis konwencji importowania ikon jest następujący:

  • ~ikony: Odnosi się do ścieżki ikony.
  • { ustawić }: Odnosi się do zestawu ikon lub kolekcji.
  • { nazwa ikony }: Odnosi się do nazwy ikony w pudełku z kebabem.

Oto przykład pokazujący import i użycie SprawdźWypełnij składnik ikony:

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

Ten fragment kodu pokazuje, jak importować nazwy ikon z konwencją ~icons/ph/check-fill. Fragment kodu importuje plik SprawdźWypełnij składnik ikona z zestawu ikon fosforu. Następnie ustawia atrybuty koloru, szerokości i wysokości komponentu ikony w szablonie Vue.

Podgląd aplikacji z powyższego bloku kodu spowoduje wyświetlenie tego samego obrazu aplikacji, co wcześniej.

Zwiększ dostępność swoich aplikacji Vue

Iconify to cenna biblioteka dla aplikacji Vue, ponieważ pozwala łatwo zintegrować ikony z interfejsem aplikacji. Obszerna biblioteka ikon Iconify zapewnia lepsze opcje dostosowywania dla Twojej aplikacji.

Jako programista Vue musisz udostępniać swoje aplikacje internetowe wszystkim typom ludzi. Dzieje się tak, ponieważ różni ludzie mają różne sposoby korzystania z aplikacji, na przykład osoby niewidome i głuche. Poznaj narzędzia, dzięki którym Twoje aplikacje internetowe będą łatwo dostępne dla tych osób.