Jak powiększyć ikonę SVG w ikonie materiałów-ui?

Question

Czy ktoś zbudował strony internetowe przy użyciu biblioteki react.js i Material Design Lite? Jak zmienić rozmiar ikony? Jest to ikona svg. Właśnie zbudowałem komponent "utwórz nowy", który jest kawałkiem papieru materiałowego z przyciskiem dodawania zawartości na górze. Oto kod.

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;

Wygląda OK (upewnij się, że oglądanie go w pełnym rozmiarze), ale ikona jest zbyt mała. Następnie otworzyłem narzędzie do tworzenia chrome i zobaczyłem następujący kod HTML.

<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>

Korzystanie chrom narzędzia dev, ja zrewidowała svg rozmiar ikon i właściwość viewbox SVG i uczynił ikonę powiększenie w przeglądarce. Ale nie jestem pewien, jak mogę zmienić rozmiar ikony w moim kodzie. Jeśli napiszę plik CSS, aby zmienić svg, będzie problematyczne, jeśli istnieje więcej niż jeden element svg.

Answer 1

Istnieją dwa sposoby powiększania SVG, jeden jest do override the style with iconStyle, drugi jest do edycji kodu znalezione w https://github.com/callemall/material-ui/blob/master/src/SvgIcon/SvgIcon.js

Uwaga: ContentAdd import z SvgIcon

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

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

Answer 2

Musisz ustawić rozmiar ikony w podpunkcie iconStyle w <IconButton>. Przykład poniżej: from the material-ui docs.

Z mojego doświadczenia wynika, że ​​jeśli ustawisz tylko wysokość lub szerokość, nic się nie dzieje - wydaje się, że działa tylko wtedy, gdy ustawisz wysokość na szerokość & na tę samą wartość.

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

zrobić

<SomeIcon className="svg_icons"/> 

.svg_icons{ 
    transform: scale(1.8); 
} 

wystarczy użyć skali: D działa

Answer 4

Używam IconStyle rekwizyt do zmiany rozmiaru ikony 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>