search

wmira / react-icons-kit

React Svg Icons
https://react-icons-kit.vercel.app/
MIT License
370 stars 45 forks source link

Animate font awesome icons #31

Closed DavidCasillasRivero closed 6 years ago

DavidCasillasRivero commented 6 years ago

Font Awesome icons support animation via fa-spin (rotating icon) or fa-pulse (rotating icon in discrete steps) classes. https://fontawesome.com/v4.7.0/examples/

Is it possible to add this effect to React Icons Kit version of these icons?

wmira commented 6 years ago

Hi @DavidCasillasRivero

Will doing something like this work for you? https://codesandbox.io/s/r4z7z64q6p

You should be able to do some if statements to change which container ( or even directly pass attribute )

DavidCasillasRivero commented 6 years ago

Yes I manage to add the effect adding a class with some CSS to an outer component wrapper of the icon. I don't have any animation knowledge but this copied & pasted CSS did the job for me:

.csl-spin {
  animation: rotate 1s linear infinite;
}

@keyframes rotate {
  to {
    transform: rotate(360deg);
  }
}

Just wondering if there was an easier approach build in in your library to set the fa-spin class and avoid any custom CSS.

Thanks.

wmira commented 6 years ago

@DavidCasillasRivero unfortunately we dont have canned animations within react-icons-kit for now. Closing this and there should be other animation css libraries that can be used with the library