Search code examples
cssreactjsstyled-components

Styled-components, SVG not animating

I use styled-components alongside React and I have such component:

import styled, { keyframes } from 'styled-components'
import { ReactComponent as SpinnerIcon } from './spinner.svg'

const rotate = keyframes`
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
`

const Spinner = styled(SpinnerIcon)`
    margin-top: 50px;
    animation: ${rotate} 2s ease-in infinite;
`

export default Spinner

When I use this component like this: 

<Spinner width='50px' height='50px' />

I see this component but it's not animating. What's wrong?

Solution

  • Try this: 

      const Spinner = styled.img.attrs({
      src: SpinnerIcon,
    })`
        margin-top: 50px;
        animation: ${rotate} 2s ease-in infinite;

    if this doesn't work for you please share your svg file too. Also you probably need use linear function instead of ease-in `