दिखाने के लिए एसवीजी आइकन से रिएक्ट आइकन घटक उत्पन्न करें
रिएक्ट एसवीजी आइकन जेनरेटर। एसवीजी आइकनों से रिएक्ट आइकन कंपोनेंट को दिखाने, आकार बदलने और उन्हें फिर से रंगने के लिए।
हमने आपके लिए लाइव डेमो तैयार किया है प्रतिक्रिया एसवीजी चिह्न लाइव जेनरेटर
प्रतिक्रिया मूल निवासी का समर्थन करता है
अपने svg को रिएक्ट कंपोनेंट में बदलने का सबसे तेज़ तरीका
yarn global add react-svg-icon-generator yarn svg-icon-generate -- --svgDir ./icons --destination ./Icon.tsx विस्तृत विकल्पों के लिए बस |_+_| . चलाएं
उत्पन्न घटक का पूर्वावलोकन
एसवीजी के साथ स्रोत निर्देशिका तथा यह गल्प कार्य से आउटपुट घटक है इसलिए उत्पादन में आप बिना किसी निर्भरता के हैं।
इंस्टालेशन
आपको इसे केवल विकास में जोड़ने की आवश्यकता है, क्योंकि यह सीधे आपके कोडबेस में स्वयं निहित प्रतिक्रिया घटक उत्पन्न करेगा
अपने कंप्यूटर पर शोटाइम कभी भी.com/सक्रिय करें
yarn react-svg-icon-generatorसेटअप गल्प कार्य सरल
npm install --save-dev react-svg-icon-generator - एसवीजीडीआईआर (आवश्यक) - svg फ़ाइलों के साथ आपकी निर्देशिका का पथ। सापेक्ष पथ हो सकता है लेकिन इसका उपयोग करना बेहतर है |_+_| निरपेक्ष पथ तो यह परियोजना की किसी भी निर्देशिका में काम करेगा
- गंतव्य (आवश्यक) - path.join(__dirname, 'घटक', 'Icon.js')
द्वारा चलाएं |_+_|
सेटअप गल्प कार्य पूर्ण
const configureSvgIcon = require('react-svg-icon-generator').default; configureSvgIcon({ destination: path.join(__dirname, 'components', 'Icon.js'), svgDir: './icons', }); - टिप्पणी (वैकल्पिक) - इसे उत्पन्न घटक में जोड़ा जाएगा, इसलिए अन्य डेवलपर को पता चल जाएगा कि क्या करना है
- घटक का नाम (वैकल्पिक) - यह घटक का नाम बदल देगा, डिफ़ॉल्ट रूप से 'आइकन'
- रंग भरें (वैकल्पिक) - यदि आप अपने आइकन में एकाधिक रंगों का उपयोग करना चाहते हैं तो यह आयातित एसवीजी से मूल रंग भरता रहेगा, इसलिए आप इसका उपयोग नहीं कर पाएंगे |_+_| प्रोप
- मूल निवासी (वैकल्पिक) - यह घटक उत्पन्न करेगा जिसका उपयोग प्रतिक्रियाशील मूल परियोजनाओं में किया जा सकता है। यह कार्यक्षमता निर्भर करती है प्रतिक्रिया देशी-svg पुस्तकालय जिसे अलग से स्थापित किया जाना है (यह निर्भरता में शामिल नहीं है)। आप डिफ़ॉल्ट देशी टेम्पलेट का उपयोग करके आसानी से अधिलेखित कर सकते हैं टेम्पलेट विकल्प
- प्रतिक्रिया शुद्ध रेंडर (वैकल्पिक) - यह |_+_| . का उपयोग करेगा के बजाय |_+_|। यदि आप इसका उपयोग करते हैं, तो सुनिश्चित करें कि आप React>= v15.3.0 का उपयोग करते हैं।
- रेडियम (वैकल्पिक) - यह रेडियम आयात करेगा और रेडियम रैपर के साथ आइकन घटक को लपेटेगा। रेडियम का उपयोग करने के लिए इसे अलग से स्थापित करना होगा (यह निर्भरता का हिस्सा नहीं है)।
- टेम्पलेट (वैकल्पिक) - अपने कस्टम टेम्पलेट को पथ प्रदान करें, आप Icon.template पर उदाहरण देख सकते हैं
द्वारा चलाएं |_+_|
सेटअप गल्प कार्य स्वयं का नाम
path.join(__dirname, 'icons')पिछले के समान + आपका अपना कार्य नाम
जनरेट आइकन घटक का उपयोग करें
gulp svg-iconकोई भी प्रोप जो सूचीबद्ध नहीं है उसे सीधे svg को बाकी प्रॉप्स के रूप में पास किया जाएगा।
विकास
const configureSvgIcon = require('react-svg-icon-generator').default; configureSvgIcon({ comment: 'Generated by gulp svg-icon, if you add new icon run gulp svg-icon', componentName: 'Icon', destination: path.join(__dirname, 'components', 'Icon.js'), keepFillColor: false, native: false, radium: true, reactPureRender: true, svgDir: path.join(__dirname, 'icons'), template: path.join(__dirname, 'template', 'icon.nunjucks'), }); विवरण डाउनलोड करें:
लेखक: ब्लूबेरी ऐप्स
गिटहब: https://github.com/blueberryapps/react-svg-icon-generator
हाईचार्ट्स-प्रतिक्रिया-आधिकारिक
#reactjs #जावास्क्रिप्ट