Vue uygulamalarınızı simgelerle geliştirmek ister misiniz? Iconify'ı zahmetsizce Vue uygulamanıza nasıl entegre edeceğinizi öğrenin.

En iyi web uygulamaları gerçekten bir metin ve resim koleksiyonudur. Görsellerin bir web uygulamasına sağladığı estetik duygunun yanı sıra görsel ipuçları da sağlar ve kullanıcıların uygulamaya olan ilgisini artırır.

Iconify, Bootstrap ve Material Design simgeleri de dahil olmak üzere çeşitli simge paketlerinden SVG ile oluşturulmuş simgelerden oluşan geniş bir koleksiyon sağlayan bir simge çerçevesidir. Iconify, web uygulamalarınıza simgeler eklemek için çok yönlü bir çözüm haline getiren farklı ön uç JavaScript çerçevelerini destekler.

Iconify'ı Vue Uygulamanıza Nasıl Entegre Edebilirsiniz?

Vue uygulamanızda Iconify'dan yararlanabilirsiniz. @iconify/vue npm paketi. Bu npm paketi, Iconify simge çerçevesi için bir Vue entegrasyonudur.

@iconify/vue Vue uygulamalarında simgeleri kullanmanın sorunsuz bir yolunu sunar. Bu paket, projenize hızlı bir şekilde simgeler eklemenizi ve özelleştirmenizi sağlar. Yüklemek

instagram viewer
@iconify/vue Vue uygulamanızda, uygulamanızın kök dizininin terminalinde aşağıdaki npm komutunu çalıştırın:

npm install --save-dev @iconify/vue

Bu komut, @iconify/vue olarak paket geliştirme bağımlılığı Vue uygulamanızda.

Bu paket sadece bu makaleyi takip etmeniz gereken Vue 3 uygulamaları için çalışacaktır. Paket, Vue 2 uygulamalarını desteklemez. Ancak, Vue 2'de Iconify'ı kullanmak için aşağıdaki npm komutunu çalıştırın:

npm install @iconify/vue2

31 Aralık 2023 tarihinden itibaren Vue 2 artık yönetilemeyeceği için Vue 3'ü ve özelliklerini nasıl kullanacağınızı öğrenmelisiniz. Bu, Vue topluluğunda güncel ve alakalı kalmanızı sağlamak içindir.

Vue Bileşenlerinize Simgeler Nasıl Eklenir?

içe aktararak simgeler ekleyebilirsiniz. Simge Vue bileşenlerinizdeki paketten bileşen. Simge eklemek için aşağıdaki kodu Vue bileşeninin komut dosyası bloğuna yapıştırın:

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

Bu adımdan sonra Iconify kitaplığındaki tüm simgelere erişebilirsiniz. Bir simge eklemek için şuraya gidin: Simgeleştirmek İnternet sitesi. Web sitesinde gezinirken, uygulamanıza ihtiyacınız olan simgenin adını gireceksiniz.

Aşağıdaki resim size bir onay simgesi için arama sonuçlarını gösterir.

Ardından, simgeye tıklayarak ihtiyacınız olan onay simgesinin stilini seçebilirsiniz. Sağlayarak simgelerinizi daha da özelleştirebilirsiniz. Renk, Boyut, çevir, Ve Döndür alanlar.

Bu alanlarla, simgenizin gerekli rengini, boyutunu, konumunu ve yönünü belirleyebilirsiniz. Simgenizi özelleştirdikten sonra, artık web sayfasındaki bileşenin kodunu kopyalayarak simge bileşenini Vue uygulamanızda kullanabilirsiniz.

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

Yukarıdaki kod bloğu, simgenin rengini kırmızı olarak ayarlar. Ayrıca, yüksekliği ve genişliği her biri 500 piksel olacak şekilde belirtir.

Uygulamayı önizlerken, aşağıdaki resme benzer bir resim elde edeceksiniz:

ile uygulamanıza simgeler eklemesine rağmen, @iconify/vue paket genellikle basittir, bazen sorunlara yol açabilir. Bazı yaygın sorunlar arasında ön işleme sorunları, hata mesajları yer alır. Belge Nesne Modeli (DOM)ve Vue, bileşeni düzgün şekilde oluşturmuyor.

Bu sorunlar, simgelerin yüklenmesiyle ilişkili olarak bileşen takma işleminin zamanlamasından kaynaklanır. ile bu sorunu çözebilirsiniz. eklenti simgeleri kütüphane.

Unplugin-Icons Kitaplığı ile Simgeler Ekleme

bu eklenti simgeleri kitaplığı, simgeleri içe aktarmanın ve doğrudan şablonunuzun içinde kullanmanın alternatif, hatasız bir yolunu sunar.

Simgeleri entegre etmeye yönelik bu yaklaşım, vurgulanan sorunları çözer. @iconify/vue, Vue'nun paket uygulamanızda kullandığınız her simgeyi otomatik olarak içermesini sağlamak.

ile başlamak için eklenti simgeleri kütüphane, terminalinizi açın ve aşağıdaki npm komutunu çalıştırarak kütüphaneyi kurun:

npm install unplugin-icons

Yüklemeden sonra derleme aracınızı yapılandırmanız gerekir. Vue 3 kullanımları Oluşturma aracı olarak Vite. şuraya git: vite.config.js ve dosyayı tam olarak aşağıdaki kod bloğu gibi görünecek şekilde yapılandırın:

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

Yukarıdaki kod bloğu, Vite yapılandırma dosyasını göstermektedir. Kod parçacığı şunları içe aktarır: simgeler gelen eklenti unplugin-icon/vite. Kod bloğu daha sonra ayarlar simgeler() içinde bir eklenti olarak eklentiler sıralamak.

Simge seçiminizi en üst düzeye çıkarmak için tüm simge setlerini kurabilirsiniz. Tüm simge setlerini yüklemek için, uygulamanızın dizininin terminalinde aşağıdaki npm komutunu çalıştırın:

npm i -D @iconify/json

Kod, Iconify için mevcut olan tüm simge setlerini yükler. Bu paketin kurulum boyutu yaklaşık 200 MB'dir. Paket boyutunu azaltmak için tüm setler yerine yalnızca belirli bir simge seti de kurabilirsiniz:

npm i -D @iconify-json/ph

Yukarıdaki kod parçacığı, yalnızca Iconify'ın şununla ifade ettiği Fosfor simge setindeki simgeleri yükler: ph.

Yüklemeden sonra, simge bileşenini Vue uygulamanıza aktarabilirsiniz. Simge adlarını kurala göre içe aktarmalısınız ~simgeler/{set}/{iconName} bileşenlerinizdeki simgeleri kullanmak için.

Simgeleri içe aktarma kuralının açıklaması aşağıdaki gibidir:

  • ~simgeler: Simge yolunu ifade eder.
  • { ayarlamak }: Simge seti veya koleksiyonu ifade eder.
  • { ikon adı }: Kebap kutusundaki ikonun adını ifade eder.

İşte içe aktarma ve kullanımını gösteren bir örnek Kontrol Doldur simge bileşeni:

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

Bu kod parçacığı, simge adlarının kuralla nasıl içe aktarılacağını gösterir. ~icons/ph/check-fill. Kod parçacığı şunları içe aktarır: Kontrol Doldur Fosfor simge setinden simge bileşeni. Daha sonra Vue şablonundaki simge bileşeninin renk, genişlik ve yükseklik niteliklerini ayarlar.

Uygulamayı yukarıdaki kod bloğundan önizlemek, daha önce görüldüğü gibi aynı uygulama görüntüsüyle sonuçlanacaktır.

Vue Uygulamalarınızı Daha Erişilebilir Hale Getirin

Iconify, simgeleri uygulamanızın arayüzüne kolayca entegre etmenize izin verdiği için Vue uygulamalarınız için değerli bir kitaplıktır. Iconify'ın geniş simge kitaplığı, uygulamanız için daha iyi özelleştirme seçenekleri sunar.

Bir Vue geliştiricisi olarak, web uygulamalarınızı her türden insan için erişilebilir kılmanız gerekir. Bunun nedeni, farklı kişilerin, örneğin kör ve sağır insanlar gibi, uygulamalarınızı farklı şekillerde kullanmalarıdır. Web uygulamalarınızı bu kişiler için kolayca erişilebilir hale getirecek araçları öğrenin.