CODEWITHSUNDEEP
cssreactjssvgstyled-components
cts
cts

Reputation: 1084

Displaying text next to an icon using styled components in React

new to React and using styled components, but I'm building a header component that essentially has two black bars - the top bar (StyledApplicationBanner) which contains the logo and then (StyledBackBar) which contains the back arrow (an SVG) - my current code has everything where I want it in terms of positioning but I'm not sure how to make my <p>``back</p> text align alongside the arrow? Can anyone suggest a starting point for making this happen?

import styled from "styled-components";
import icon from "./myicons-icon-light.png";
import arrow from "./arrow-left.svg";

const StyledApplicationBanner = styled.header`
  background: black;
  height: 64px;
  width: 100%;
  border-bottom: 1px solid rgb(151, 153, 155);
`;

const StyledBackBar = styled.div`
background: black;  
height: 48px;
width: 100%;
color: white;

p {
  color: white;
  font-size: 12px;
  font-weight: bold;
  letter-spacing: 1px;
  line-height: 16px;
  text-transform: uppercase;
}
`;

const Icon = styled.img`
  height: 22px;
  width: 116px;
  margin-top: 21px;
  margin-left: 96px;
`;

const Arrow = styled.img`
  height: 32px;
  width: 32px;
  margin-top: 8px;
  margin-left: 88px;
`
  return (

      <StyledApplicationBanner>
        <Icon src={icon} alt="Icon" />
      </StyledApplicationBanner>
      <StyledBackBar>
        <Arrow src={arrow} alt="Back arrow" />
        <p>Back</p>
      </StyledBackBar>

  );
};



export default ApplicationHeader;

Upvotes: 0

Views: 1578

Answers (1)

Michael Rovinsky
Michael Rovinsky

Reputation: 7210

Use display: flex with align-items: center :

const StyledBackArrow = styled.div`
  display: flex;
  flex-direction: row;
  align-items: center;
`;

...
<StyledBackArrow>
  <img />
  <span>Back</span>
</StyledBackArrow>
...


div {
  display: flex;
  flex-direction: row;
  align-items: center;
}

img {
  margin-right: 10px;
}
<div>
  <img src="https://www.flaticon.com/svg/vstatic/svg/271/271218.svg?token=exp=1620141549~hmac=67502fda00fa10153b12a47f64e7ed81" width="32" />
  <span>Back</span>
</div>

Upvotes: 2

Related Questions