सामग्री-ui आइकनबटन में एसवीजी आइकन कैसे बढ़ाएं?

Question

क्या कोई भी react.js और Material Design Lite लाइब्रेरी का उपयोग कर वेबपृष्ठों का निर्माण करता है? मुझे आइकन आकार का आकार कैसे बदलना चाहिए? यह एक एसवीजी आइकन है। मैंने अभी "एक नया बनाएं" घटक बनाया है, जो शीर्ष पर एक सामग्री जोड़ें बटन के साथ सामग्री पेपर का एक टुकड़ा है। कोड यहाँ है।

import React from 'react'; 
 
import Paper from 'material-ui/lib/paper'; 
 
import ContentAdd from 'material-ui/lib/svg-icons/content/add'; 
 
import IconButton from 'material-ui/lib/icon-button'; 
 

 

 
const styleForPaper = { 
 
    width: '96vw', 
 
    height: '20vh', 
 
    margin: 20, 
 
    textAlign: 'center', 
 
    display: 'inline-block', 
 
}; 
 

 
const styleForButton = { 
 
    'marginTop': '7vh', 
 
}; 
 

 

 
const PaperToAddNewWidgets =() => (
 
    <div> 
 

 
    <Paper style={styleForPaper} zDepth={2}> 
 

 
    <IconButton 
 
     style={styleForButton} 
 
     touch={true} 
 
     tooltip="Add New Widget"> 
 

 
    <ContentAdd/> 
 

 
    </IconButton> 
 

 
    </Paper> 
 
    </div> 
 
); 
 

 
export default PaperToAddNewWidgets;

यह ठीक लग रहा है (सुनिश्चित करें कि आप पूर्ण आकार में इसे देख रहे हैं), लेकिन आइकन बहुत छोटा है। फिर मैंने क्रोम देव उपकरण खोला, और निम्नलिखित एचटीएमएल कोड देखा।

<div style="background-color:#ffffff;transition:all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;box-sizing:border-box;font-family:Roboto, sans-serif;-webkit-tap-highlight-color:rgba(0,0,0,0);box-shadow:0 3px 10px rgba(0,0,0,0.16), 
 
     0 3px 10px rgba(0,0,0,0.23);border-radius:2px;width:96vw;height:20vh;margin:20px;text-align:center;display:inline-block;mui-prepared:;" data-reactid=".0.2.0.1.0"><button style="border:10px;background:none;box-sizing:border-box;display:inline-block;font:inherit;font-family:Roboto, sans-serif;tap-highlight-color:rgba(0, 0, 0, 0);cursor:pointer;text-decoration:none;outline:none;transform:translate3d(0, 0, 0);position:relative;transition:all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;padding:12px;width:48px;height:48px;font-size:0;margin-top:7vh;mui-prepared:;-webkit-appearance:button;" tabindex="0" type="button" data-reactid=".0.2.0.1.0.0"><div data-reactid=".0.2.0.1.0.0.0"><span style="height:100%;width:100%;position:absolute;top:0;left:0;overflow:hidden;mui-prepared:;" data-reactid=".0.2.0.1.0.0.0.0"></span><div style="position: absolute; font-family: Roboto, sans-serif; font-size: 14px; line-height: 32px; padding: 0px 16px; z-index: 3000; color: rgb(255, 255, 255); overflow: hidden; top: -10000px; border-radius: 2px; opacity: 0; left: -44px; transition: top 0ms cubic-bezier(0.23, 1, 0.32, 1) 450ms, transform 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms, opacity 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms; box-sizing: border-box; -webkit-user-select: none;" data-reactid=".0.2.0.1.0.0.0.1:0"><div style="position: absolute; left: 50%; top: 0px; transform: translate(-50%, -50%); border-radius: 50%; transition: width 0ms cubic-bezier(0.23, 1, 0.32, 1) 450ms, height 0ms cubic-bezier(0.23, 1, 0.32, 1) 450ms, backgroundColor 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms; width: 0px; height: 0px; background-color: transparent;" data-reactid=".0.2.0.1.0.0.0.1:0.0"></div><span style="position:relative;white-space:nowrap;mui-prepared:;" data-reactid=".0.2.0.1.0.0.0.1:0.1">Add New Widget</span></div><svg style="display:inline-block;height:24px;width:24px;transition:all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;fill:rgba(0, 0, 0, 0.87);mui-prepared:;-webkit-user-select:none;" viewBox="0 0 24 24" data-reactid=".0.2.0.1.0.0.0.1:2:$/=10"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" data-reactid=".0.2.0.1.0.0.0.1:2:$/=10.0"></path></svg></div></button></div>

क्रोम देव उपकरण का उपयोग करना, मैं svg आइकन आकार और svg की viewbox संपत्ति संशोधित और आइकन ब्राउज़र में बड़ा बना दिया। लेकिन मुझे यकीन नहीं है कि मैं अपने कोड में आइकन आकार का आकार कैसे बदल सकता हूं। यदि मैं svg को संशोधित करने के लिए एक सीएसएस फ़ाइल लिखता हूं तो एक से अधिक svg तत्व हैं तो यह समस्याग्रस्त हो जाएगा।

Answer 1

वहाँ svg के विस्तार के दो तरीके हैं, एक, override the style with iconStyle है अन्य कोड https://github.com/callemall/material-ui/blob/master/src/SvgIcon/SvgIcon.js

नोट में पाया संपादित करने के लिए है: से SvgIcon

const mergedStyles = Object.assign({ 
.. 
    height: 24, // <-- change default height 
    width: 24, // <-- change default width 
.. 
}, style); 

return (
    <svg 
    {...other} 
    .. 
    style={prepareStyles(mergedStyles)} 
    .. 
    > 

Answer 2

आपके पास ContentAdd आयात स्थापित करने के लिए iconStyle में आइकन का आकार <IconButton> में प्रोप। from the material-ui docs से नीचे उदाहरण।

मेरे अनुभव से, यदि आप केवल ऊंचाई या चौड़ाई निर्धारित करते हैं, तो कुछ नहीं होता - केवल तभी काम करता है जब आप & चौड़ाई को उसी मान पर सेट करते हैं।

import React from 'react'; 
import IconButton from 'material-ui/IconButton'; 
import ActionHome from 'material-ui/svg-icons/action/home'; 

const styles = { 

    largeIcon: { 
    width: 60, 
    height: 60, 
    }, 

}; 

const IconButtonExampleSize =() => (
    <div> 
    <IconButton 
     iconStyle={styles.largeIcon} 

    > 
     <ActionHome /> 
    </IconButton> 
    </div> 
); 

Answer 3

इस

<SomeIcon className="svg_icons"/> 

.svg_icons{ 
    transform: scale(1.8); 
} 

सिर्फ पैमाने का उपयोग करते हैं: डी यह

Answer 4

काम करता है मैं IconStyle प्रोप उपयोग कर रहा हूँ svg आइकन का आकार बदलने के।

<IconButton 
    tooltip="Add New Group" 
    tooltipPosition="top-center" 
    style={{padding: 0, height: 0}} 
    iconStyle={{height: 31, width: 48}} 
    onClick={e => this.openNewList()} 
    disabled={!this.state.newAvailable}> 

    <ActionHome /> 

</IconButton>