SVG को Vue कॉम्पोनेंट में बदलें
SVG पेस्ट करें और सिंगल-फ़ाइल Vue 3 कॉम्पोनेंट (.vue) पाएँ, जिसे सीधे आपके प्रोजेक्ट में import किया जा सके और जिसमें एट्रिब्यूट (class, style, आकार) अपने-आप पैरेंट से आगे पहुँचते हैं।
SVG को जस का तस import करने की बजाय Vue कॉम्पोनेंट में क्यों बदलें?
आइकन के लिए बना अलग Vue कॉम्पोनेंट प्रोजेक्ट में कहीं भी आसानी से दोबारा इस्तेमाल किया जा सकता है, किसी भी पैरेंट कॉम्पोनेंट से उसे क्लास या स्टाइल (रंग, आकार) दिए जा सकते हैं, और आपके एडिटर की सिंटैक्स हाइलाइटिंग/जाँच का फ़ायदा वैसे ही मिलता है जैसे किसी और Vue कॉम्पोनेंट में।
क्या Vue में भी React की तरह एट्रिब्यूट को camelCase में बदलना पड़ता है?
नहीं, React/JSX के विपरीत Vue टेम्पलेट kebab-case एट्रिब्यूट (stroke-width, fill-rule...) को जैसा है वैसा ही स्वीकार करते हैं, इसलिए एट्रिब्यूट बदलने की कोई ज़रूरत नहीं है। सिर्फ़ v-bind="$attrs" जोड़ा जाता है, ताकि इस्तेमाल के समय कॉम्पोनेंट को कस्टमाइज़ किया जा सके।
क्या मैं पैरेंट कॉम्पोनेंट से आइकन का रंग बदल सकता हूँ?
अगर आपका SVG fill="currentColor" इस्तेमाल करता है (जैसा उदाहरण में है), तो आसपास का CSS टेक्स्ट रंग आइकन पर अपने-आप लागू हो जाता है: कॉम्पोनेंट को छुए बिना आइकन का रंग बदलने के लिए बस पैरेंट की CSS प्रॉपर्टी color बदलें।
आपकी SVG फ़ाइल निजी रहती है: Vue कॉम्पोनेंट में कन्वर्ज़न पूरी तरह आपके ब्राउज़र में चलता है, कुछ भी किसी सर्वर पर नहीं भेजा जाता।