I'd like set link for my Facebook and Instagram React icons. I have simply this code which is imporant for this question. For links inside the project i used React Router Dom but i've never needed link something outsite. How can i proper do it please? I tried something like <FacebookIcon to = "" /> and <FacebookIcon href = "" /> but nothing happened.
index.js
<SocialWrapper>
<FacebookIcon/>
<InstagramIcon/>
</SocialWrapper>
styles.js
export const SocialWrapper = styled.div`
width: 100%;
display: flex;
gap: 10px;
margin-bottom: 10px;
`
export const FacebookIcon = styled(FaFacebookF)`
color: ${white};
font-size: 2.3rem;
&:hover{
color: ${red}
}
`
export const InstagramIcon = styled(FaInstagram)`
color: ${white};
font-size: 2.3rem;
&:hover{
color: ${red}
}
`
Your going to want to wrap the Styled icon in an anchor tag with a href to your profiles. You wouldn't be able to use React Router Link to go to an external page as you have already seen and you wouldn't want to just throw a href or a button event onto an icon. Something like this should be what your after:
<a href="https://facebook.com/ProfileName">
<StyledIcon />
</a>
MDN Anchor element: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a
You can just put in the style or css this property
background-image: url()
Where you pass a string of a file directory or a web address