Iconify là gì? Cách tích hợp Iconify vào trong app Vue

Bạn muốn nâng cao ứng dụng Vue bằng các biểu tượng. Vậy thì hãy cùng nhau học cách tích hợp Iconify vào app Vue nhé!

Ứng dụng web tốt nhất thực sự là một bộ sưu tập văn bản và hình ảnh. Ngoài cảm giác thẩm mỹ mà ảnh mang tới cho app web, chúng cũng cung cấp tín hiệu trực quan, đồng thời cải thiện sự quan tâm của người dùng với ứng dụng.

Iconify là một framework biểu tượng cung cấp bộ sưu tập icon SVG quy mô lớn từ các gói icon khác nhau, bao gồm icon Bootstrap và Material Design. Iconify hỗ trợ các framework JavaScript front-end khác nhau, khiến nó trở thành một giải pháp linh hoạt cho việc thêm icon vào ứng dụng web.

Cách tích hợp Iconify trong ứng dụng Vue

Bạn có thể tận dụng Iconify trong ứng dụng Vue bằng gói npm @iconify/vue. Gói này tích hợp Vue cho framework icon Iconify.

@iconify/vue cung cấp giải pháp liền mạch để dùng các biểu tượng trong app Vue. Gói này cho phép bạn nhanh chóng thêm và tùy biến icon trong dự án. Để cài đặt @iconify/vue trong ứng dụng Vue của bạn, chạy lệnh npm sau trong terminal của thư mục gốc trong ứng dụng.

npm install --save-dev @iconify/vue

Lệnh này cài đặt gói @iconify/vue là phần phụ thuộc phát triển trong ứng dụng Vue.

Gói này sẽ chỉ hoạt động cho 3 ứng dụng mà bạn cần để theo dõi ở ví dụ này. Gói này không hỗ trợ ứng dụng Vue 2. Tuy nhiên, để dùng Iconify trong Vue 2, bạn chỉ cần chạy lệnh npm sau:

npm install @iconify/vue2

Vì Vue 2 không còn được hỗ trợ từ 31/12/2023, bạn nên học cách dùng Vue 3 và các tính năng của nó. Điều này đảm bảo bạn luôn được cập nhật thông tin mới nhất & liên quan ở cộng đồng Vue.

Cách thêm icon vào thành phần Vue

Bạn có thể thêm icon bằng cách nhập thành phần Icon từ package trong thành phần Vue. Để thêm icon, dán code sau vào khối lệnh của thành phần Vue:

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

Sau bước này, bạn có thể truy cập tất cả icon trong thư viện Iconify. Để thêm icon, tới web Iconify. Khi điều hướng trên web, bạn sẽ nhập tên của icon cần trong ứng dụng.

Ảnh sau hiện kết quả tìm kiếm cho icon check.

Sau đó, bạn có thể chọn kiểu icon check cần thiết bằng cách click vào biểu tượng đó. Bạn có thể tùy biến icon sâu hơn ở các trường Color, Size, Flip và Rotate.

Với những trường trên, bạn có thể chọn màu, kích thước, vị trí và hướng cho icon. Sau đó, dùng icon trong app Vue bằng cách sao chép code của thành phần trên trang web.

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

Khối code trên đặt màu của icon sang màu đỏ. Nó cũng xác định chiều cao và rộng mỗi cạnh là 500 pixel.

Xem trước ứng dụng, bạn sẽ thấy một ảnh tương tự như hình dưới:

Mặc dù, thêm icon vào ứng dụng bằng package @iconify/vue thường đơn giản nhưng đôi khi nó vẫn xảy ra lỗi. Một số vấn đề phổ biến bao gồm lỗi hiển thị trước, thông báo lỗi trong DOM, và Vue không hiện thành phần phù hợp.

Những vấn đề này phát sinh do thời gian của quá trình gắn thành phần liên quan tới tải icon. Bạn có thể giải quyết vấn đề này bằng thư viện unplugin-icons.

Thêm icon vào thư viện unplugin-Icons

Thư viện unplugin-icons cung cấp giải pháp thay thế không lỗi để nhập và dùng icon trực tiếp trong mẫu của bạn.

Phương pháp tích hợp icon xử lý lỗi được highlight bởi @iconify/vue, đảm bảo Vue sẽ tự động bao gồm mỗi icon bạn dùng vào ứng dụng đi kèm.

Để bắt đầu với thư viện unplugin-icons, mở terminal và cài đặt thư viện bằng cách chạy lệnh npm sau:

npm install unplugin-icons

Sau khi cài đặt, bạn cần cấu hình công cụ xây dựng. Vue 3 dùng Vite là công cụ build. Tới vite.config.js và cấu hình file này để nó trông chính xác như khối code bên dưới:

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/
export default defineConfig({
  plugins: [vue(), Icons()],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})

Khối code trên mô tả file cấu hình Vite. Đoạn code này nhập plugin Icons từ unplugin-icon/vite. Khối code này sau đó đặt Icons làm một plugin trong mảng plugins.

Bạn có thể cài đặt toàn bộ icon để tối đa hóa lựa chọn của biểu tượng. Để cài đặt tất cả tập icon, chạy lệnh npm sau trong terminal của thư mục ứng dụng:

npm i -D @iconify/json

Code này cài đặt tất cả tập icon có sẵn cho Iconify. Kích thước cài đặt của package này là khoảng 200 MB. Bạn cũng có thể chỉ cài một tập icon cụ thể, thay vì tất cả tập để giảm kích thước package:

npm i -D @iconify-json/ph

Đoạn code trên chỉ cài icon từ tập biểu tượng Phosphor, mà Iconify biểu thị bằng ph.

Sau khi cài đặt, bạn có thể nhập thành phần icon này vào app Vue. Bạn phải nhập tên icon theo quy ước ~icons/{set}/{iconName} để dùng các biểu tượng trong thành phần.

Mô tả quy ước nhập biểu tượng như sau:

• ~icons: Chỉ đường dẫn icon
• { set }: Chỉ bộ sưu tập icon
• { iconName }: Chỉ tên của icon trong kebab-case.

Ví dụ hiện thành phần nhập và sử dụng icon CheckFill:

<script setup>
import CheckFill from "~icons/ph/check-fill"
</script>

<template>
  <CheckFill color="red" width="500" height="500" />
</template>

Đoạn code này trình bày cách nhập tên icon theo quy ước ~icons/ph/check-fill. Ngoài ra, nó cũng nhập thành phần icon CheckFill từ bộ icon Phosphor. Sau đó, nó đặt thuộc tính màu, chiều rộng và cao của thành phần trong mẫu Vue.

Xem trước ứng dụng từ khối code trên sẽ cho kết quả giống ảnh bạn đã thấy trước đó.

Iconify là một thư viện giá trị cho app được tạo bằng Vue bởi nó cho phép bạn tích hợp dễ dàng vào giao diện của ứng dụng. Thư viện icon lớn của Iconify cung cấp các lựa chọn tùy biến tốt hơn cho ứng dụng của bạn.