خبر و ترفند روز

خبر و ترفند های روز را اینجا بخوانید!

Iconify چیست؟ نحوه ادغام آن در برنامه های Vue

ارشیا یوسفی ادیب ۱۴ مرداد, ۱۴۰۲ 4 min read

آیا می خواهید برنامه های Vue خود را با آیکون ها تقویت کنید؟ بیاموزید که چگونه بدون زحمت Iconify را در برنامه Vue خود ادغام کنید.

بهترین برنامه های کاربردی وب در واقع مجموعه ای از متن و تصاویر هستند. جدا از حس زیبایی شناختی که تصاویر به یک برنامه وب ارائه می کنند، آنها همچنین نشانه های بصری را ارائه می دهند و علاقه کاربران را به برنامه بهبود می بخشند.

Iconify یک چارچوب آیکون است که مجموعه بزرگی از آیکون‌های رندر شده با SVG را از بسته‌های آیکون مختلف، از جمله آیکون‌های Bootstrap و Material Design ارائه می‌کند. Iconify از فریم ورک های مختلف جاوا اسکریپت جلویی پشتیبانی می کند و آن را به یک راه حل همه کاره برای افزودن آیکون به برنامه های وب شما تبدیل می کند.

چگونه 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 قرار دهید:

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

پس از این مرحله می توانید به تمام آیکون های موجود در کتابخانه Iconify دسترسی داشته باشید. برای افزودن یک نماد، به وب سایت Iconify بروید. در پیمایش به وب سایت، نام نماد مورد نیاز خود را در برنامه خود وارد خواهید کرد.

Iconify-website-interface

تصویر زیر نتایج جستجوی یک نماد چک را به شما نشان می دهد.

iconify-check-icon-options

سپس می توانید با کلیک بر روی نماد، سبک علامت چک مورد نیاز خود را انتخاب کنید. با ارائه فیلدهای Color، Size، Flip و Rotate می توانید نمادهای خود را بیشتر سفارشی کنید.

با استفاده از این فیلدها، می توانید رنگ، اندازه، موقعیت و جهت نماد مورد نیاز خود را مشخص کنید. پس از اینکه نماد خود را سفارشی کردید، اکنون می توانید با کپی کردن کد مؤلفه در صفحه وب، از مؤلفه نماد در برنامه Vue خود استفاده کنید.

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

بلوک کد بالا رنگ آیکون را قرمز می کند. همچنین ارتفاع و عرض هر کدام 500 پیکسل باشد.

با پیش نمایش برنامه، تصویری مشابه تصویر زیر دریافت خواهید کرد:

نماد چک قرمز

اگرچه افزودن نمادها به برنامه خود با بسته @iconify/vue معمولاً ساده است، اما گاهی اوقات ممکن است به مشکلاتی منجر شود. برخی از مشکلات رایج عبارتند از: مشکلات پیش از رندر، پیام های خطا در مدل شیء سند (DOM) و عدم رندر صحیح کامپوننت توسط Vue.

این مشکلات به دلیل زمان بندی فرآیند نصب قطعات در رابطه با بارگذاری آیکون ها ایجاد می شود. شما می توانید این مشکل را با کتابخانه unplugin-icons حل کنید.

مطلب مرتبط:   نحوه مدیریت واکشی داده در Next.js

افزودن آیکون ها با Unplugin-Icons Library

کتابخانه unplugin-icons یک روش جایگزین و بدون خطا برای وارد کردن و استفاده از نمادها به طور مستقیم در قالب شما ارائه می دهد.

این رویکرد یکپارچه‌سازی نمادها، مشکلات برجسته‌شده با @iconify/vue را حل می‌کند، و اطمینان می‌دهد که Vue به‌طور خودکار هر نمادی را که استفاده می‌کنید در برنامه همراه خود قرار می‌دهد.

برای شروع کار با کتابخانه unplugin-icons، ترمینال خود را باز کرده و با اجرای دستور 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/
export default defineConfig({
  plugins: [vue(), Icons()],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})

بلوک کد بالا فایل پیکربندی Vite را نشان می دهد. قطعه کد افزونه Icons را از unplugin-icon/vite وارد می کند. سپس بلوک کد، Icons() را به عنوان یک افزونه در آرایه پلاگین ها تنظیم می کند.

شما می توانید تمام مجموعه آیکون ها را نصب کنید تا انتخاب نماد خود را به حداکثر برسانید. برای نصب تمام مجموعه‌های آیکون، دستور npm زیر را در ترمینال فهرست برنامه‌تان اجرا کنید:

npm i -D @iconify/json

کد تمام مجموعه آیکون های موجود برای Iconify را نصب می کند. حجم نصب این بسته حدود 200 مگابایت است. همچنین می‌توانید به جای همه مجموعه‌ها، فقط یک مجموعه آیکون خاص را برای کاهش اندازه بسته نصب کنید:

npm i -D @iconify-json/ph

قطعه کد بالا فقط نمادهایی را از مجموعه نمادهای Phosphor نصب می کند که Iconify با ph نشان می دهد.

مطلب مرتبط:   چگونه در سی شارپ لیست کارهایی بسازیم

پس از نصب، می‌توانید مؤلفه نماد را به برنامه Vue خود وارد کنید. شما باید نام نمادها را با قرارداد ~icons/{set}/{iconName} وارد کنید تا از نمادها در اجزای خود استفاده کنید.

شرح کنوانسیون واردات آیکون ها به شرح زیر است:

  • ~icons: به مسیر نماد اشاره دارد.
  • { set }: به مجموعه یا مجموعه نمادها اشاره دارد.
  • { iconName }: به نام نماد در جعبه کباب اشاره دارد.

در اینجا نمونه ای وجود دارد که واردات و استفاده از مؤلفه آیکون CheckFill را نشان می دهد:

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

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

این قطعه کد نحوه وارد کردن نام نمادها را با قرارداد ~icons/ph/check-fill نشان می‌دهد. قطعه کد مولفه آیکون CheckFill را از مجموعه آیکون فسفر وارد می کند. سپس ویژگی های رنگ، عرض و ارتفاع جزء نماد را در قالب Vue تنظیم می کند.

پیش‌نمایش برنامه از بلوک کد بالا، همان تصویر برنامه را که قبلاً دیده بودید، ایجاد می‌کند.

برنامه های Vue خود را در دسترس تر کنید

Iconify یک کتابخانه ارزشمند برای برنامه های Vue شما است زیرا به شما امکان می دهد آیکون ها را به راحتی در رابط برنامه خود ادغام کنید. کتابخانه آیکون وسیع Iconify گزینه های سفارشی سازی بهتری را برای برنامه شما فراهم می کند.

به‌عنوان یک توسعه‌دهنده Vue، باید برنامه‌های تحت وب خود را برای همه نوع افراد در دسترس قرار دهید. این به این دلیل است که افراد مختلف راه های مختلفی برای استفاده از برنامه های شما دارند، به عنوان مثال، افراد نابینا و ناشنوا. ابزارهایی را بیاموزید تا برنامه های وب خود را به راحتی برای این افراد در دسترس قرار دهید.

Tags: