脉轮 ui 文本和图标不水平排列答案

【问题标题】：chakra ui text and icons do not line up horizontally脉轮 ui 文本和图标不水平排列
【发布时间】：2021-03-22 00:18:50
【问题描述】：

我正在使用反应。
我正在使用脉轮 ui 我希望图标和文本并排显示。
图标显示不对齐。

  <HStack alignItems="center" gridGap="8px">
    <UsersIcon />
    <Text fontSize="sm">Text</Text>
  </HStack>

export const UsersIcon: FunctionComponent<Props> = ({ ...props }) => (
  <Icon {...props} fontSize={'24px'} verticalAlign="center">
    <path
      fillRule="evenodd"
      clipRule="evenodd"
      d="M10.667 7.33301C11.7737 7.33301 12.6603 6.43967 12.6603 5.33301C12.6603 4.22634 11.7737 3.33301 10.667 3.33301C9.56032 3.33301 8.66699 4.22634 8.66699 5.33301C8.66699 6.43967 9.56032 7.33301 10.667 7.33301ZM5.33366 7.33301C6.44033 7.33301 7.32699 6.43967 7.32699 5.33301C7.32699 4.22634 6.44033 3.33301 5.33366 3.33301C4.22699 3.33301 3.33366 4.22634 3.33366 5.33301C3.33366 6.43967 4.22699 7.33301 5.33366 7.33301ZM5.33366 8.66634C3.78033 8.66634 0.666992 9.44634 0.666992 10.9997V11.9997C0.666992 12.3663 0.966992 12.6663 1.33366 12.6663H9.33366C9.70033 12.6663 10.0003 12.3663 10.0003 11.9997V10.9997C10.0003 9.44634 6.88699 8.66634 5.33366 8.66634ZM10.667 8.66634C10.4737 8.66634 10.2537 8.67967 10.0203 8.69967C10.0337 8.70634 10.0403 8.71967 10.047 8.72634C10.807 9.27967 11.3337 10.0197 11.3337 10.9997V11.9997C11.3337 12.233 11.287 12.4597 11.2137 12.6663H14.667C15.0337 12.6663 15.3337 12.3663 15.3337 11.9997V10.9997C15.3337 9.44634 12.2203 8.66634 10.667 8.66634Z"
      fill="#A3AFBF"
    />
  </Icon>

【问题讨论】：

“Icon 和 text 水平对齐时如何让 Icon 和 text 水平对齐”是什么意思
已修复。对此感到抱歉。
能否也添加HStack组件代码？
我正在使用脉轮用户界面
chakra-ui.com/docs/layout/stack

标签： reactjs chakra

【解决方案1】：

经过一番调查，我发现了问题。问题出在您的 svg viewBox 中。默认的 viewBox 似乎在您的元素上占用了额外的空间。因此，要解决此问题，您可以添加 viewBox 并将其值设置为 viewBox="0 0 25 15"。

export const UsersIcon: FunctionComponent<Props> = ({ ...props }) => (
  <Icon {...props} fontSize={'24px'} verticalAlign="center" viewBox="0 0 25 15">
    <path
      fillRule="evenodd"
      clipRule="evenodd"
      d="M10.667 7.33301C11.7737 7.33301 12.6603 6.43967 12.6603 5.33301C12.6603 4.22634 11.7737 3.33301 10.667 3.33301C9.56032 3.33301 8.66699 4.22634 8.66699 5.33301C8.66699 6.43967 9.56032 7.33301 10.667 7.33301ZM5.33366 7.33301C6.44033 7.33301 7.32699 6.43967 7.32699 5.33301C7.32699 4.22634 6.44033 3.33301 5.33366 3.33301C4.22699 3.33301 3.33366 4.22634 3.33366 5.33301C3.33366 6.43967 4.22699 7.33301 5.33366 7.33301ZM5.33366 8.66634C3.78033 8.66634 0.666992 9.44634 0.666992 10.9997V11.9997C0.666992 12.3663 0.966992 12.6663 1.33366 12.6663H9.33366C9.70033 12.6663 10.0003 12.3663 10.0003 11.9997V10.9997C10.0003 9.44634 6.88699 8.66634 5.33366 8.66634ZM10.667 8.66634C10.4737 8.66634 10.2537 8.67967 10.0203 8.69967C10.0337 8.70634 10.0403 8.71967 10.047 8.72634C10.807 9.27967 11.3337 10.0197 11.3337 10.9997V11.9997C11.3337 12.233 11.287 12.4597 11.2137 12.6663H14.667C15.0337 12.6663 15.3337 12.3663 15.3337 11.9997V10.9997C15.3337 9.44634 12.2203 8.66634 10.667 8.66634Z"
      fill="#A3AFBF"
    />
  </Icon>

【讨论】：

很高兴我能帮上忙。