调整 Material UI Icon 高度的最佳实践答案

【问题标题】：Best Practice to adjust height of Material UI Icon调整 Material UI Icon 高度的最佳实践
【发布时间】：2021-06-17 00:02:50
【问题描述】：

我将 Material UI Icons 中的两个图标连续放置。高度本身是相同的：24px。但是路径的高度不同。一个是 18px，另一个是 22px。它们看起来并不酷。

如何调整高度？我的意思是“用户看到的高度”。

import {
  Delete,
  FileCopy
} from "@material-ui/icons";

...

<Box display="flex">
  <FileCopy onClick={handleCopy} />
  <Delete onClick={handleDelete} />
</Box>

我尝试设置 SVG 的高度，它使垂直对齐变得丑陋...

【问题讨论】：

标签： css reactjs material-ui

【解决方案1】：

图标具有fontSize 属性 - 例如<HomeIcon fontSize="large" />.

您也可以显式设置它 - <DeleteIcon style={{fontSize: "10px"}}/>。

【讨论】：

那么，我将计算高度并将边距设置为对齐...

【解决方案2】：

如果没有更多关于组件的上下文以及可以传递给它们的内容以及从它们返回的内容，很难回答这个问题。

假设 <FileCopy /> 返回一个 SVG 元素，您可以将有效的 svg 属性传递给该元素，调整大小的正确方法是传递它的高度和宽度属性。

<FileCopy height='48' width='48' />

另一种思考方式是 svg 可能有一个 viewBox 作为画布。 svg 的 height 和 width 属性将改变 viewBox/canvas 的大小，其中的图标/路径会随之缩放。

<div>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" height='24' width='24'><circle fill="#FF4500" cx="10" cy="10" r="10"/><path fill="#FFF" d="M16.67 10a1.46 1.46 0 00-2.47-1 7.12 7.12 0 00-3.85-1.23L11 4.65l2.14.45a1 1 0 10.13-.61L10.82 4a.31.31 0 00-.37.24l-.74 3.47a7.14 7.14 0 00-3.9 1.23 1.46 1.46 0 10-1.61 2.39 2.87 2.87 0 000 .44c0 2.24 2.61 4.06 5.83 4.06s5.83-1.82 5.83-4.06a2.87 2.87 0 000-.44 1.46 1.46 0 00.81-1.33zm-10 1a1 1 0 111 1 1 1 0 01-1-1zm5.81 2.75a3.84 3.84 0 01-2.47.77 3.84 3.84 0 01-2.47-.77.27.27 0 01.38-.38A3.27 3.27 0 0010 14a3.28 3.28 0 002.09-.61.27.27 0 11.39.4zm-.18-1.71a1 1 0 111-1 1 1 0 01-1.01 1.04z"/></svg>
</div>
<div>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" height='48' width='48'><circle fill="#FF4500" cx="10" cy="10" r="10"/><path fill="#FFF" d="M16.67 10a1.46 1.46 0 00-2.47-1 7.12 7.12 0 00-3.85-1.23L11 4.65l2.14.45a1 1 0 10.13-.61L10.82 4a.31.31 0 00-.37.24l-.74 3.47a7.14 7.14 0 00-3.9 1.23 1.46 1.46 0 10-1.61 2.39 2.87 2.87 0 000 .44c0 2.24 2.61 4.06 5.83 4.06s5.83-1.82 5.83-4.06a2.87 2.87 0 000-.44 1.46 1.46 0 00.81-1.33zm-10 1a1 1 0 111 1 1 1 0 01-1-1zm5.81 2.75a3.84 3.84 0 01-2.47.77 3.84 3.84 0 01-2.47-.77.27.27 0 01.38-.38A3.27 3.27 0 0010 14a3.28 3.28 0 002.09-.61.27.27 0 11.39.4zm-.18-1.71a1 1 0 111-1 1 1 0 01-1.01 1.04z"/></svg>
</div>

【讨论】：