脉轮 ui 文本和图标没有水平对齐

Question

我正在使用 React。
我正在使用脉轮 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>

Answer 1

经过一番调查，我发现了问题所在。问题出在您的 svg viewBox 中。默认的 viewBox 似乎在您的元素上占用了额外的 space 。因此，要解决此问题，您可以添加 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>

Answer 2

显示与 Chakra UI 内联的任何内容的最佳方法是使用 HStack。将您要使用的所有内容包装在 HStack 中。（不仅是文字：您还可以在一行中将图片放在文字旁边。）

像这样：

<HStack>
 <Image src="" alt=""/>
 <Text>This is my picture</Text>
 <Text>Photo with another text</Text>
</HStack>

脉轮 ui 文本和图标没有水平对齐

chakra ui text and icons do not line up horizontally

chakra

reactjs