How to create Lossless Scalable Icons in a React Native application.

June 10, 2018 0 Comments

How to create Lossless Scalable Icons in a React Native application.

 

 

Time to build our icon component!

import React from 'react'; import { StyleSheet, View } from 'react-native'; import { createIconSetFromIcoMoon } from 'react-native-vector-icons'; import icoMoonConfig from '#/assets/selection.json'; const Icon = createIconSetFromIcoMoon(icoMoonConfig); const styles = StyleSheet.create({ backdrop: { alignItems: 'center', justifyContent: 'center', }, }); const RadIcon = ({ backdrop, color, name, size, style, }) => { if (!name) return null; const IconComponent = ( <Icon name={name} size={size} color={color} style={!backdrop && style} /> ); return backdrop ? ( <View backgroundColor={backdrop} style={[{ borderRadius: size, height: size * 2, width: size * 2 }, styles.backdrop, style]} > {IconComponent} </View> ) : IconComponent; }; 


Tag cloud