如何解决chakra ui 文本和图标没有水平对齐
我正在使用 react。
我正在使用 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>
解决方法
经过一番调查,我发现了问题。问题出在您的 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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。