我正在使用反应。
我正在使用 chakra 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>