feat: new icon component usage logic

[enesozturk]

Previously, to use icon in <MenuItem/>, you have to provide icon component in list that goes with items prop of <HoldMenu/> component like below.

const list = [
  {
  title: 'Home',
  icon: () => <Icon name="home" size={18} />
  },
  {
    title: 'Delete',
    icon: () => <Icon name="trash" size={18} />
   }
]

<HoldMenu items={list}>{...}</HoldMenu>

Now I decided to create animated icon component and use it in every <MenuItem/>. So only thing to do is providing an Icon component to <HoldMenuProvider/> and in the menu list, just set the name of the icon. It is possible to use Reanimated for the props for styles of the icon. I noticed that this made the animations little bit more performant. New usage is like below.

const list = [
  { title: 'Home, icon: 'home' },
  { title: 'Trash', icon: 'trash' }
]

// In App.js
import FeatherIcon from 'react-native-vector-icons/Feather';

<HoldMenuProvider iconComponent={FeatherIcon} theme="light">
  {...}
</HoldMenuProvider>

Cons

So far I worked with the 'react-native-vector-icons' for the example project. I will try to use expo vector icons as well and try to make it work.