CODEWITHSUNDEEP
reactjschakra-ui
aahhuhuhu
aahhuhuhu

Reputation: 493

Chakra UI Text and Icons do not line up horizontally

I am using react and Chakra UI

I want the icons and text to be side by side.
Icons are displayed out of alignment.

  <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>

enter image description here

Upvotes: 6

Views: 12507

Answers (3)

Kalyan Sundar
Kalyan Sundar

Reputation: 33

<HStack>
<Box>
<Image  borderRadius={'8px'} boxSize={'30px'} src={}></Image>
</Box>
<Text fontSize='sm'>{}</Text>
</HStack>

Hstack is the best element to display the images horizontally. Just customize the border radius and box radius as per your wish

Upvotes: 0

Owais Ali
Owais Ali

Reputation: 1034

The best way to display anything inline with Chakra UI is to use HStack. Wrap everything you want to use inside an HStack. (Not only text: you can also put images next to text in one line.)

Like this:

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

Upvotes: 5

Yadab
Yadab

Reputation: 1883

After some investigation I found the problem. The problem is within your svg viewBox. The default viewBox seems to be taking extra space on your element. So to fix this, you can add viewBox and set its value to 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>

Upvotes: 5

Related Questions