material-ui iconButtonsでSVGアイコンを拡大するには？

Question

誰もがreact.jsとMaterial Design Liteライブラリを使用してウェブページを作成していますか？アイコンのサイズをどのように変更する必要がありますか？それはsvgアイコンです。 「新規作成」コンポーネントを作成しました。これは、上部にコンテンツ追加ボタンがある素材用紙です。ここにコードがあります。

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;

それは（あなたがフルサイズでそれを見ていることを確認してください）OKに見えますが、アイコンが小さすぎます。次に、chrome開発ツールを開き、次のHTMLコードを見ました。クロームのdevのツールを使用して

<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のビューボックスのプロパティを改訂し、ブラウザのアイコンが大きくなります。しかし、私は自分のコードでアイコンのサイズをどのようにサイズ変更できるか分かりません。 svgを修正するためのCSSファイルを書くと、複数のsvg要素があると問題になります。あなたが持っているSvgIcon

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

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

Answer 1

は、一方が他方にはhttps://github.com/callemall/material-ui/blob/master/src/SvgIcon/SvgIcon.jsが

ノートで見つけたコードを編集することで、override the style with iconStyleにあります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 2

からContentAdd輸入が設定する：SVGを拡大する2つの方法があります

Answer 3

この

<SomeIcon className="svg_icons"/> 

.svg_icons{ 
    transform: scale(1.8); 
} 

だけでスケールを使用してください：Dそれは私がSVGアイコンのサイズを変更するIconStyle小道具を使用しています

Answer 4

に動作します。

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