Iconify क्या है और इसे Vue ऐप्स में कैसे एकीकृत करें?

सर्वोत्तम वेब एप्लिकेशन वास्तव में टेक्स्ट और छवियों का एक संग्रह हैं। छवियां एक वेब ऐप को जो सौंदर्य बोध प्रदान करती हैं, उसके अलावा वे दृश्य संकेत भी प्रदान करते हैं और एप्लिकेशन में उपयोगकर्ताओं की रुचि में सुधार करते हैं।

Iconify एक आइकन फ्रेमवर्क है जो बूटस्ट्रैप और मटेरियल डिज़ाइन आइकन सहित विभिन्न आइकन पैक से SVG-रेंडर किए गए आइकन का एक बड़ा संग्रह प्रदान करता है। Iconify विभिन्न फ्रंट-एंड जावास्क्रिप्ट फ्रेमवर्क का समर्थन करता है जो इसे आपके वेब ऐप्स में आइकन जोड़ने के लिए एक बहुमुखी समाधान बनाता है।

अपने Vue एप्लिकेशन में Iconify को कैसे एकीकृत करें

आप अपने Vue एप्लिकेशन में Iconify का लाभ उठा सकते हैं @iconify/vue एनपीएम पैकेज। यह npm पैकेज Iconify आइकन फ्रेमवर्क के लिए एक Vue एकीकरण है।

@iconify/vue Vue ऐप्स के भीतर आइकन का उपयोग करने का एक सहज तरीका प्रदान करता है। यह पैकेज आपको अपने प्रोजेक्ट में शीघ्रता से आइकन जोड़ने और अनुकूलित करने की अनुमति देता है। स्थापित करने के लिए

@iconify/vue अपने Vue एप्लिकेशन में, अपने ऐप के रूट डायरेक्टरी के टर्मिनल में निम्नलिखित npm कमांड चलाएँ:

npm install --save-dev @iconify/vue

यह कमांड इंस्टॉल करता है @iconify/vue पैकेज के रूप में विकास निर्भरता आपके Vue एप्लिकेशन में।

यह पैकेज केवल Vue 3 अनुप्रयोगों के लिए काम करेगा जिसके लिए आपको इस लेख का अनुसरण करना होगा। पैकेज Vue 2 अनुप्रयोगों का समर्थन नहीं करता है। हालाँकि, Vue 2 में Iconify का उपयोग करने के लिए, निम्नलिखित 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 घटक को ठीक से प्रस्तुत नहीं कर रहा है।

ये समस्याएँ आइकनों की लोडिंग के संबंध में घटक माउंटिंग प्रक्रिया के समय के कारण उत्पन्न होती हैं। आप इस समस्या को हल कर सकते हैं अनप्लगइन-आइकन पुस्तकालय।

अनप्लगइन-आइकन लाइब्रेरी के साथ चिह्न जोड़ना

अनप्लगइन-आइकन लाइब्रेरी आपके टेम्पलेट में सीधे आइकन आयात करने और उपयोग करने का एक वैकल्पिक, त्रुटि-मुक्त तरीका प्रदान करती है।

आइकनों को एकीकृत करने का यह दृष्टिकोण हाइलाइट की गई समस्याओं का समाधान करता है @iconify/vue, यह सुनिश्चित करते हुए कि Vue स्वचालित रूप से आपके बंडल किए गए एप्लिकेशन में आपके द्वारा उपयोग किए जाने वाले प्रत्येक आइकन को शामिल करेगा।

के साथ आरंभ करने के लिए अनप्लगइन-आइकन लाइब्रेरी, अपना टर्मिनल खोलें और निम्नलिखित एनपीएम कमांड चलाकर लाइब्रेरी स्थापित करें:

npm install unplugin-icons

इंस्टालेशन के बाद, आपको अपने बिल्ड टूल को कॉन्फ़िगर करना होगा। व्यू 3 उपयोग इसके निर्माण उपकरण के रूप में वाइट करें. की ओर जाना 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 कॉन्फ़िगरेशन फ़ाइल को दर्शाता है। कोड स्निपेट आयात करता है माउस से प्लगइन अनप्लगइन-आइकन/वाइट. फिर कोड ब्लॉक सेट हो जाता है प्रतीक() में एक प्लगइन के रूप में प्लग-इन सरणी.

आप अपनी पसंद के आइकन को अधिकतम करने के लिए सभी आइकन सेट इंस्टॉल कर सकते हैं। सभी आइकन सेट स्थापित करने के लिए, अपने ऐप की निर्देशिका के टर्मिनल में निम्नलिखित एनपीएम कमांड चलाएँ:

npm i -D @iconify/json

कोड Iconify के लिए उपलब्ध सभी आइकन सेट इंस्टॉल करता है। इस पैकेज का इंस्टॉलेशन आकार लगभग 200 एमबी है। आप पैकेज आकार को कम करने के लिए सभी सेटों के बजाय केवल एक विशेष आइकन सेट भी स्थापित कर सकते हैं:

npm i -D @iconify-json/ph

ऊपर दिया गया कोड स्निपेट केवल फॉस्फोर आइकन सेट से आइकन इंस्टॉल करता है, जिसे Iconify दर्शाता है पीएच.

इंस्टॉलेशन के बाद, आप आइकन घटक को अपने Vue ऐप में आयात कर सकते हैं। आपको कन्वेंशन के साथ आइकन नाम आयात करने होंगे ~आइकन/{सेट}/{आइकॉननाम} अपने घटकों में आइकन का उपयोग करने के लिए।

आइकन आयात करने के सम्मेलन का विवरण इस प्रकार है:

• ~आइकन: यह आइकन पथ को संदर्भित करता है।
• { तय करना }: यह आइकन सेट या संग्रह को संदर्भित करता है।
• {आइकॉननाम}: यह कबाब-केस में आइकन के नाम को संदर्भित करता है।

यहां आयात और उपयोग को दर्शाने वाला एक उदाहरण दिया गया है चेकफिल आइकन घटक:

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

यह कोड स्निपेट दर्शाता है कि कन्वेंशन के साथ आइकन नाम कैसे आयात करें ~आइकन/पीएच/चेक-फिल. कोड स्निपेट आयात करता है चेकफिल फॉस्फोर आइकन सेट से आइकन घटक। इसके बाद यह Vue टेम्पलेट में आइकन घटक के रंग, चौड़ाई और ऊंचाई विशेषताओं को सेट करता है।

उपरोक्त कोड ब्लॉक से एप्लिकेशन का पूर्वावलोकन करने पर वही ऐप छवि प्राप्त होगी जो पहले देखी गई थी।

अपने Vue ऐप्स को अधिक सुलभ बनाएं

Iconify आपके Vue अनुप्रयोगों के लिए एक मूल्यवान लाइब्रेरी है क्योंकि यह आपको अपने ऐप के इंटरफ़ेस में आसानी से आइकन एकीकृत करने की अनुमति देता है। Iconify की विशाल आइकन लाइब्रेरी आपके एप्लिकेशन के लिए बेहतर अनुकूलन विकल्प प्रदान करती है।

एक Vue डेवलपर के रूप में, आपको अपने वेब एप्लिकेशन को सभी प्रकार के लोगों के लिए सुलभ बनाना होगा। ऐसा इसलिए है क्योंकि अलग-अलग लोगों के पास आपके एप्लिकेशन का उपयोग करने के अलग-अलग तरीके होते हैं, उदाहरण के लिए, अंधे और बहरे लोग। अपने वेब ऐप्स को इन लोगों तक आसानी से पहुंचाने के लिए टूल सीखें।