में एक SvgIcon में एक एसवीजी फ़ाइल का उपयोग कैसे करें मुझे एक एसवीजी फ़ाइल मिली है और मैं इसके बारे में एक SvgIcon घटक बनाना चाहता हूं, मुझे यह कैसे करना चाहिए?सामग्री-यूआई
documentation में, सभी उदाहरण पूर्वनिर्धारित सामग्री आइकन या <path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z" /> की एक अजीब नोटेशन का उपयोग करते हैं जो मुझे नहीं पता कि यह क्या है!
<path /> एक एसवीजी पथ है, यानी एसवीजी की आंतरिक बिट्स। SvgIcon घटक वास्तव में एक रास्ता लेने के लिए सक्षम होना चाहिए, लेकिन यह नहीं है :(
बजाय आप की तरह https://github.com/callemall/material-ui/blob/56c113217d7d05d8bb0712771b727df81984d04b/src/svg-icons/action/home.js
path के स्थान पर अपने svg स्रोत के साथ
एक घटक बना सकते हैं। (मैं इसे कम करने की सलाह देते हैं https://jakearchibald.github.io/svgomg/)
यदि एक से अधिक आइकन बनाने का उपयोग कर एक सा है, तो आप उदाहरण के स्वीकार किए जाते हैं जवाब में संदर्भित में सभी बॉयलरप्लेट को दोहराना नहीं चाहते हो सकता है आप की तरह एक आवरण घटक जनरेटर का उपयोग कर सकते हैं:।
const wrapSvgPath = (path, viewBox='0 0 24 24') => (props) => (
<SvgIcon {...props} viewBox={viewBox}>{path}</SvgIcon>
)
की तरह इस्तेमाल किया:
const facebookPath = (<path
d="M17,2V2H17V6H15C14.31,6 14,6.81 14,7.5V10H14L17,10V14H14V22H10V14H7V10H10V6A4,4 0 0,1 14,2H17Z" />
)
export const FacebookIcon = wrapSvgPath(facebookPath)
SvgIcon, पाठ संपादक के साथ खुला एसवीजी फ़ाइल के लिए पथ प्राप्त और इसी पथ अभिव्यक्ति कॉपी करने के लिए।