Show different content img

Question

I want to show a "Fleche" when I'm on desktop and show an other fleche when I'm under 768px.

Using react styled components.

I tried something like that :

index.js  
        <Column2>
            <ContentWrapper>
                    <MiniIcons blueText={false}>
      ////this one ----->  <Fleches />
                    </MiniIcons>
            </ContentWrapper>
        </Column2>

And my react styled component :

import {FaArrowRight, FaArrowCircleDown} from 'react-icons/fa'
[...]
export const Fleches = styled.img`
content: url(${FaArrowRight});

@media screen and (max-width: 768px) {
     content: url(${FaArrowCircleDown});
}
`

Answer 1

I found a solution : I show display block to the first wrapper "MiniIcons" and display none when the screen is under 768px and for the "MiniIcons2", display none to desktop and display block under 768px.

But I'd like to do it more dynamically.

    <MiniIcons blueText={false}>
        <FaArrowRight />
    </MiniIcons>

    <MiniIcons2 blueText={false}>
        <FaArrowDown />
    </MiniIcons2>

React styled component :

export const MiniIcons = styled.p`
    // color: blue;
    font-size: 52px;
    color: ${({ blueText }) => (blueText ? '#095A9B' : 'white')};

    @media screen and (max-width: 768px) {
        display: none;
    }
`

export const MiniIcons2 = styled.p`
    // color: blue;
    font-size: 52px;
    color: ${({ blueText }) => (blueText ? '#095A9B' : 'white')};
    display: none;

    @media screen and (max-width: 768px) {
        display: block;
    }
`