html – How to display images within tags within tags?

I’m trying to create social media icons using SVG files in the footer. It works if I use inline CSS. If I don’t, it doesn’t show. I am using a package of styled ingredients.

Any idea how I can do this without inline CSS?

it works:

<div style={{ width: '25px', margin: '0 5px' }}>
  <a href={link}>
    <img src={iconName} alt={(iconName, 'icon')} />
  </a>
</div>

it does not work:

const iconSocial = styled.div`
  width: 25px;
  margin: 0 5px;
`;

<iconSocial>
  <a href={link}>
    <img src={iconName} alt={(iconName, 'icon')} />
  </a>
</iconSocial>

It also doesn’t work:

<div>
  <a href={link}>
    <img src={iconName} alt={(iconName, 'icon')} />
  </a>
</div>

Leave a Reply

Your email address will not be published.