In Ant Design, how can we center an icon vertically in <Row>?

Question

Please see my React code example:

import { Row, Col, Icon } from 'antd';
const MyRow = () => (
  <Row align="middle">
    <Col md={10}>Trouble is a friend</Col>
    <Col md={10}><Icon type="play-circle-o" /></Col>
    <Col md={4}><div>Lenka</div></Col>
  </Row>
);

...

When I rendered <MyRow />, I found that the text in <Row> was centered vertically well, but the <Icon> component didn't do so. So that my <MyRow> didn't look good. I expected all the content, not only the text but also the SVG in <Row> could be centered vertically.

I also tried other icon library, e.g. react-icons-kit, which did not work.

Does anyone have an idea?

Answer 1

Fortunately, I found some solutions to this small problem myself.

For icons in @ant-design/icons:

import { PlayCircleFilled } from '@ant-design/icons';

<Row align="middle">
  <Col>
    <PlayCircleFilled
      style={{
        verticalAlign: 'middle',
      }}
    />
  </Col>
</Row>

For icons in react-icons:

import { RiVolumeUpLine } from "react-icons/ri";

<Row align="middle">
  <Col>
    <RiVolumeUpLine
      style={{
        verticalAlign: 'middle',
      }}
    />
  </Col>
</Row>

For Icon in old antd:

<Row type="flex" align="middle">
  <Col>
    <div
      style={{
        display: 'inline-flex',
        justifyContent: 'center',
        alignItems: 'center',
      }}
    >
      <Icon
        type="play-circle-o"
        style={{
          display: 'inline-block',
          verticalAlign: 'middle',
        }}
      />
    </div>
  </Col>
</Row>

For Icon in react-icons-kit:

import Icon from 'react-icons-kit';
import { ic_play_circle_outline } from 'react-icons-kit/md/ic_play_circle_outline';
...
<Row align="middle">
  <Col>
    <Icon icon={ic_play_circle_outline} style={{ verticalAlign: 'middle' }} />
  </Col>
</Row>