Apa itu Iconify dan Bagaimana Mengintegrasikannya di Aplikasi Vue?

Aplikasi web terbaik sebenarnya adalah kumpulan teks dan gambar. Selain dari perasaan estetika yang diberikan oleh gambar ke aplikasi web, mereka juga memberikan isyarat visual dan meningkatkan minat pengguna pada aplikasi tersebut.

Iconify adalah kerangka ikon yang menyediakan banyak koleksi ikon yang dirender SVG dari berbagai paket ikon, termasuk ikon Bootstrap dan Desain Material. Iconify mendukung kerangka JavaScript front-end yang berbeda menjadikannya solusi serbaguna untuk menambahkan ikon ke aplikasi web Anda.

Cara Mengintegrasikan Iconify di Aplikasi Vue Anda

Anda dapat memanfaatkan Iconify di aplikasi Vue Anda dengan @ iconify/vue paket npm. Paket npm ini adalah integrasi Vue untuk kerangka icon Iconify.

@ iconify/vue menyediakan cara yang mulus untuk menggunakan ikon di dalam aplikasi Vue. Paket ini memungkinkan Anda menambahkan dan menyesuaikan ikon dengan cepat di proyek Anda. Untuk memasang

@ iconify/vue di aplikasi Vue Anda, jalankan perintah npm berikut di terminal direktori root aplikasi Anda:

npm install --save-dev @iconify/vue

Perintah ini menginstal @ iconify/vue paket sebagai ketergantungan pembangunan di aplikasi Vue Anda.

Paket ini hanya akan berfungsi untuk aplikasi Vue 3 yang Anda butuhkan untuk menindaklanjuti artikel ini. Paket tidak mendukung aplikasi Vue 2. Namun, untuk menggunakan Iconify di Vue 2, jalankan perintah npm berikut:

npm install @iconify/vue2

Karena Vue 2 tidak lagi dikelola mulai 31 Desember 2023, Anda harus mempelajari cara menggunakan Vue 3 dan fitur-fiturnya. Ini untuk memastikan Anda tetap up-to-date dan relevan di komunitas Vue.

Cara Menambahkan Ikon ke Komponen Vue Anda

Anda dapat menambahkan ikon dengan mengimpor Ikon komponen dari paket di komponen Vue Anda. Untuk menambahkan ikon, tempel kode berikut di blok skrip komponen Vue:

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

Setelah langkah ini, Anda dapat mengakses semua ikon di perpustakaan Iconify. Untuk menambahkan ikon, pergilah ke Buat ikon situs web. Saat menavigasi ke situs web, Anda akan memasukkan nama ikon yang Anda butuhkan di aplikasi Anda.

Gambar berikut menunjukkan hasil pencarian untuk ikon centang.

Anda kemudian dapat memilih gaya ikon centang yang Anda butuhkan dengan mengklik ikon tersebut. Anda selanjutnya dapat menyesuaikan ikon Anda dengan menyediakan Warna, Ukuran, Balik, Dan Memutar bidang.

Dengan bidang-bidang ini, Anda dapat menentukan warna, ukuran, posisi, dan orientasi ikon yang diperlukan. Setelah Anda menyesuaikan ikon, Anda sekarang dapat menggunakan komponen ikon di aplikasi Vue Anda dengan menyalin kode komponen di halaman web.

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

Blok kode di atas menyetel warna ikon menjadi merah. Ini juga menentukan tinggi dan lebar masing-masing menjadi 500 piksel.

Pratinjau aplikasi, Anda akan mendapatkan gambar yang mirip dengan gambar di bawah ini:

Meskipun menambahkan ikon ke aplikasi Anda dengan @ iconify/vue paket umumnya mudah, kadang-kadang dapat menyebabkan masalah. Beberapa masalah umum termasuk masalah pra-rendering, pesan kesalahan di Model Objek Dokumen (DOM), dan Vue tidak merender komponen dengan benar.

Masalah ini muncul karena waktu proses pemasangan komponen sehubungan dengan pemuatan ikon. Anda dapat mengatasi masalah ini dengan ikon cabut plugin perpustakaan.

Menambahkan Ikon Dengan Unplugin-Icons Library

Itu ikon cabut plugin library menawarkan alternatif, cara bebas kesalahan untuk mengimpor dan menggunakan ikon secara langsung di dalam template Anda.

Pendekatan pengintegrasian ikon ini menyelesaikan masalah yang disorot @ iconify/vue, memastikan bahwa Vue akan secara otomatis menyertakan setiap ikon yang Anda gunakan dalam paket aplikasi Anda.

Untuk memulai dengan ikon cabut plugin library, buka terminal Anda dan instal library dengan menjalankan perintah npm berikut:

npm install unplugin-icons

Setelah instalasi, Anda perlu mengonfigurasi alat build Anda. Penggunaan Vue 3 Vite sebagai alat pembuatannya. Menuju ke vite.config.js dan konfigurasikan file agar terlihat persis seperti blok kode di bawah ini:

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

Blok kode di atas menggambarkan file konfigurasi Vite. Cuplikan kode mengimpor file Ikon plugin dari cabut ikon-plugin/vite. Blok kode kemudian disetel Ikon() sebagai plugin di plugin Himpunan.

Anda dapat menginstal semua kumpulan ikon untuk memaksimalkan pilihan ikon Anda. Untuk menginstal semua kumpulan ikon, jalankan perintah npm berikut di terminal direktori aplikasi Anda:

npm i -D @iconify/json

Kode menginstal semua kumpulan ikon yang tersedia untuk Iconify. Ukuran instalasi paket ini adalah sekitar 200 MB. Anda juga dapat menginstal hanya set ikon tertentu daripada semua set untuk mengurangi ukuran paket:

npm i -D @iconify-json/ph

Cuplikan kode di atas hanya menginstal ikon dari kumpulan ikon Fosfor, yang dilambangkan oleh Iconify ph.

Setelah instalasi, Anda dapat mengimpor komponen ikon ke aplikasi Vue Anda. Anda harus mengimpor nama ikon dengan konvensi ~ikon/{set}/{iconName} untuk memanfaatkan ikon di komponen Anda.

Deskripsi konvensi untuk mengimpor ikon adalah sebagai berikut:

• ~ ikon: Ini mengacu pada jalur ikon.
• { mengatur }: Ini mengacu pada set ikon atau koleksi.
• { namaikon }: Ini mengacu pada nama ikon di wadah kebab.

Berikut adalah contoh yang menunjukkan impor dan penggunaan Periksa Isi komponen ikon:

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

Cuplikan kode ini menunjukkan cara mengimpor nama ikon dengan konvensi ~ikon/ph/periksa-isi. Cuplikan kode mengimpor file Periksa Isi komponen ikon dari kumpulan ikon Fosfor. Ini kemudian mengatur atribut warna, lebar, dan tinggi komponen ikon di template Vue.

Pratinjau aplikasi dari blok kode di atas akan menghasilkan gambar aplikasi yang sama seperti yang terlihat sebelumnya.

Jadikan Aplikasi Vue Anda Lebih Mudah Diakses

Iconify adalah perpustakaan berharga untuk aplikasi Vue Anda karena memungkinkan Anda mengintegrasikan ikon dengan mudah ke dalam antarmuka aplikasi Anda. Pustaka ikon Iconify yang luas menyediakan opsi penyesuaian yang lebih baik untuk aplikasi Anda.

Sebagai pengembang Vue, Anda perlu membuat aplikasi web Anda dapat diakses oleh semua jenis orang. Ini karena orang yang berbeda memiliki cara yang berbeda untuk menggunakan aplikasi Anda, misalnya, orang buta dan tuli. Pelajari alat untuk membuat aplikasi web Anda mudah diakses oleh orang-orang ini.