Стилизованные компоненты, SVG без анимации - PullRequest
Новая
       23

Стилизованные компоненты, SVG без анимации

1 голос
/ 07 мая 2020

Я использую стилизованные компоненты вместе с React, и у меня есть такой компонент: 

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

Когда я использую этот компонент следующим образом: 

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

Я вижу этот компонент, но он не анимируется . Что не так?

1 Ответ

1 голос
/ 07 мая 2020

Попробуйте следующее: 

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

если это не сработает для вас, пожалуйста, поделитесь и своим файлом svg. Также вам, вероятно, понадобится использовать функцию linear вместо easy-in `

...