如何修改ant-input的高度_图标如何对齐文本

当前的最佳实践是，创建一个局部的容器，生成不可见文本（零宽空格，模拟 strut），可使任意内联元素能对齐邻近的文本：

const StrutAlign = ({
    children}) => (
  <span style={
    {
    display: 'inline-flex', alignItems: 'center'}}>
    {
    'u200b'/* ZWSP(zero-width space) */}
    {
    children}
  </span>
)

<p>
  <StrutAlign><MyIcon ></StrutAlign>左侧的任意按钮都能与我对齐
</p>
<p>
  <StrutAlign><MyImage ></StrutAlign>左侧的任意图片都能与我对齐
</p>

---

关于对齐的常见问题

1. 浏览器本身如何对齐图标和文本？
2. 如何封装一个图标组件，使其无论大小如何变化，都能自动对齐临近的文本？
3. 为什么明明使用了 flex，图标还是看起来差了 1 像素没对齐？

有两种让浏览器自行对齐的方式（CodePen demo：浏览器对齐）：

一、 flex container

<button style={
    {
    display: 'inline-flex', alignItems: 'center'}}>
  <Icons.Heart />
  Like
</button>

缺陷：需要创建 flex 容器来包裹图标和文本，而不是仅仅通过修改图标的样式。

二、 vertical-align middle

<button>
  <Icons.Heart style={
    {
    verticalAlign: 'middle'}} />
  <span style={
    {
    verticalAlign: 'middle'}}>Like</span>
</button>

缺陷：需要创建额外标签将文本包裹起来，并且文本偏移了 baseline（将影响上下间距和相邻元素的对齐）。

---

虽然上面的方式达到了对齐效果，但浏览器本身如何决定图标放置，参照什么来放置？