מה זה 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 פיקסלים כל אחד.

בתצוגה מקדימה של האפליקציה, תקבל תמונה דומה לתמונה למטה:

למרות הוספת סמלים ליישום שלך עם ה @iconify/vue החבילה היא בדרך כלל פשוטה, היא עלולה להוביל מדי פעם לבעיות. כמה בעיות נפוצות כוללות בעיות עיבוד מראש, הודעות שגיאה ב- מודל אובייקט מסמך (DOM), ו-Vue לא מעבד את הרכיב כראוי.

בעיות אלו מתעוררות עקב התזמון של תהליך הרכבת הרכיבים ביחס לטעינת האייקונים. אתה יכול לפתור בעיה זו עם אייקוני ביטול פלאגין סִפְרִיָה.

הוספת אייקונים עם ספריית ה-Icons של הניתוק

ה אייקוני ביטול פלאגין הספרייה מציעה דרך חלופית נטולת שגיאות לייבא ולהשתמש בסמלים ישירות בתוך התבנית שלך.

גישה זו של שילוב אייקונים פותרת את הבעיות המודגשות עם @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 מגה-בייט. אתה יכול גם להתקין רק ערכת אייקונים מסוימת במקום כל הסטים כדי להקטין את גודל החבילה:

npm i -D @iconify-json/ph

קטע הקוד שלמעלה מתקין רק אייקונים מקבוצת האייקונים של Phosphor, ש-Iconify מציינת עם ph.

לאחר ההתקנה, תוכל לייבא את רכיב הסמלים לאפליקציית Vue שלך. עליך לייבא שמות אייקונים עם האמנה ~icons/{set}/{iconName} כדי להשתמש בסמלים ברכיבים שלך.

התיאור של האמנה לייבוא ​​אייקונים הוא כדלקמן:

• ~אייקונים: זה מתייחס לנתיב הסמל.
• { סט }: זה מתייחס לערכת הסמלים או לאוסף.
• { iconName }: זה מתייחס לשם הסמל במארז הקבב.

הנה דוגמה המציגה את הייבוא ​​והשימוש ב- CheckFill רכיב סמל:

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

קטע קוד זה מדגים כיצד לייבא שמות אייקונים עם האמנה ~ icons/ph/check-fill. קטע הקוד מייבא את ה CheckFill רכיב סמלים מתוך ערכת הסמלים של Phosphor. לאחר מכן הוא מגדיר את תכונות הצבע, הרוחב והגובה של רכיב הסמלים בתבנית Vue.

תצוגה מקדימה של האפליקציה מבלוק הקוד שלמעלה תגרום לאותה תמונת אפליקציה כפי שנראתה קודם לכן.

הפוך את אפליקציות Vue שלך ​​לנגישות יותר

Iconify היא ספרייה בעלת ערך עבור יישומי Vue שלך ​​מכיוון שהיא מאפשרת לך לשלב בקלות אייקונים בממשק האפליקציה שלך. ספריית הסמלים העצומה של Iconify מספקת אפשרויות התאמה אישית טובות יותר עבור האפליקציה שלך.

כמפתח Vue, אתה צריך להפוך את יישומי האינטרנט שלך לנגישים לכל סוגי האנשים. הסיבה לכך היא שלאנשים שונים יש דרכים שונות להשתמש ביישומים שלך, למשל, אנשים עיוורים וחירשים. למד כלים להפיכת יישומי האינטרנט שלך לנגישים בקלות לאנשים אלה.