با کمک کتابخانه react-useAnimation  می توانید آیکن های انیمیشن دار (مثل لایک و ذخیره) اینستاگرام بسازید.

ابتدا react-useAnimation را نصب کنید:

npm install -S react-useanimations

سپس بصورت زیر از آن استفاده کنید:

import React from 'react';
import UseAnimations from 'react-useanimations';
// EVERY ANIMATION NEEDS TO BE IMPORTED FIRST -> YOUR BUNDLE WILL INCLUDE ONLY WHAT IT NEEDS
import github from 'react-useanimations/lib/github'

const App = () => <UseAnimations animation={github} />;

export default App;

*نکته: باید هر آیکنی که مدنظرتان هست را جداگانه ایمپورت کنید. لیست آیکن ها و سایر پراپرتی های react-useAnimation را می توانید از این لینک پیدا کنید.

*نکته: این لینک هم نوع دیگری از پیاده سازی این نوع آیکن ها با کتابخانه دیگری است.

اگر می خواهید بصورت کنترل شده استفاده کنید (اینکه چه زمان select یا unselect شود یا موقع کلیک کاربر چه اتفاقی بیفتد):

export const RadioButton = () => {
  // JUST EXAMPLE - THIS PART OF THE STATE WILL PROBABLY COME FROM A PARENT FORM COMPONENT
  const [checked, setChecked] = useState(true);

  return (
    <div style={{ padding: '20px' }}>
      <span>radioButton</span>
      <UseAnimation
        reverse={checked}
        onClick={() => {
          setChecked(!checked);
        }}
        size={40}
        wrapperStyle={{ marginTop: '5px' }}
        animation={radioButton}
      />
    </div>
  );
};