Used react-native-svg
as base to create icons for react native
How it works:
- we export svg icons first
- then we convert the svg code into nested array syntax, check any dist/icons/{icon}.tsx file for more info.
- now we can use that nested array to generate svg in any framework/for any platform
- createIcon method converts these nestedArrays to Svgs in react native. while doing so it uses
react-native-svg
's Svg Elements.
npm i @touchblack/icons
npm i react-native-svg
(cuz i'm not bundling the icons at my side as they're gonna get bundled again to be included in the app, so you'll need to add this package so that it creates app bundles alongwith the icons used)
import {ActionDirector} from '@touchblack/icons'
const App = () => {
return <View>
<ActionDirector color="red" size="300" strokeColor="blue" />
<View>
}
Props:
- color | required: false, description: can be any color value(hex, name etc.). similar to fill in svgs
- size | required: false, description: can be any size value
- strokeColor | required: false, description: can be any color value(hex, name etc.) similar to color in svgs to assign stroke a specific color