Geek Answers Handbook

How to increase SVG icon in ui iconButtons file?

Does anyone create web pages using the react.js and Material Design Lite library? How to resize icon? This is the svg icon. I just created the Create New component, which is a piece of material paper with a button for adding content at the top. Here is the code.

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;

It looks normal (make sure you view it in full size), but the icon is too small. Then I opened the chrome dev tool and saw the following html code.

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

Using the chrome dev tool, I revised the size of the svg icon and the viewbox svg property and made the icon bigger in the browser. But I'm not sure how to resize the icon in my code. If I write a CSS file to revise svg, it will be problematic if there are several svg elements.

+6
source share
4 answers

You must set the icon size in iconStyle prop to <IconButton> . Example below from material-ui docs .

From my experience, if you set only the height or width, nothing happens - it only seems to work when you set the height and width to the same value.

 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> );
+13
source

do it

 <SomeIcon className="svg_icons"/> .svg_icons{ transform: scale(1.8); }

just use the scale: D works

0
source

I am using the IconStyle icon to resize the svg icon.

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

There are two ways to increase svg: override the style using the _Style icon , the other is to edit the code found at https://github.com/callemall/material-ui/blob/master/src/SvgIcon/SvgIcon.js

Note: ContentAdd import from SvgIcon

 const mergedStyles = Object.assign({ .. height: 24, // <-- change default height width: 24, // <-- change default width .. }, style); return ( <svg {...other} .. style={prepareStyles(mergedStyles)} .. >
-one
source

More articles:


All Articles