Блог

Я пытаюсь создать кнопку значка, которая выглядит следующим образом:

Пока что у меня получилось следующее:

Вот код:

 import { SvgIcon, IconButton } from '@material-ui/core';

import {ReactComponent as homemadePlayIcon} from "./play-icon.svg"

<IconButton onClick={this.playIconButtonClick} disableRipple={true} style={{color: "rgb(0,0,0,0)", width: '35px', height: '35px', backgroundColor: '#f5f5f5', boxShadow: "3px 3px 10px rgba(0, 0, 0, 0.2)"}}>

    <SvgIcon component={homemadePlayIcon} />

</IconButton> 
  

Как выровнять значок по центру внутри кнопки значка?

Спасибо, Джеймс

Я получил желаемый результат, используя @svgr с параметром —icon (чтобы сохранить свойство viewbox SVG) и включив сгенерированный компонент в IconButton следующим образом:

 import { IconButton } from '@material-ui/core';

import PlayIcon from "./icons/PlayIcon.js"

<IconButton onClick={this.playIconButtonClick} disableRipple={true} style={{color: "rgb(0,0,0,0)", width: '35px', height: '35px', backgroundColor: '#f5f5f5', boxShadow: "3px 3px 10px rgba(0, 0, 0, 0.2)"}}>
    <PlayIcon />
</IconButton> 
  

Отредактируйте это с помощью этого:

 <IconButton onClick={this.playIconButtonClick} disableRipple={true} style={{color: "rgb(0,0,0,0)", width: '35px', height: '35px', backgroundColor: '#f5f5f5', boxShadow: "3px 3px 10px rgba(0, 0, 0, 0.2)", display: "flex", justifyContent: "center", alignItems: "center"}}>