react-native-veel-icons

expo icons made for the veel react native app

Installation

1. Install peer dependencies

   npx expo install @react-native-masked-view/masked-view expo-linear-gradient

2. Install react-native-veel-icons

   yarn add react-native-veel-icons

3. Configure expo-fonts to load the Vicons.ttf font file located at project_root/node_modules/react-native-veel-icons/src/font/Vicons.ttf

Usage

import * as React from 'react';
import { StyleSheet, View, Text } from 'react-native';
import { useFonts } from 'expo-font';
import { Vicon } from 'react-native-veel-icons';

export default function App() {
  //NOTE: refer to expo-font docs for other approaches for loading custom fonts
  const [fontsLoaded, fontError] = useFonts({
    Vicons: require('project_root/node_modules/react-native-veel-icons/src/font/Vicons.ttf'),
  });

  return (
    <View style={styles.container}>
      {fontsLoaded && !fontError ? (
        <>
          {/* default */}
          <Vicon name="tag" />

          {/* with speicific size and color values */}
          <Vicon name="video" size={40} color={['red']} />

          {/* gradient */}
          <Vicon name="setting" size={50} color={['red', 'blue']} />
        </>
      ) : (
        <Text>Error while loading font</Text>
      )}
    </View>
  );
}

Name of all the icons

| | | | |-------------------------|-------------------------|-------------------------| | add | arrowhead-down | authenticity | | bell | bookmark | bug | | call | campaign | cancel-circle | | cancel-circle-filled | capture | chat | | check | check-cirlce | clock | | collaboration | content-creator | content-verified | | diamond | diamond-alter-filled | diamond-bold | | diamond-filled | disabled-filled | document | | document-alter | double-check | explore | | eye-close | eye-open | home | | information-circle | left-arrow | like | | link | location | logout | | mail-open | map | monetization | | next-mods | notification | pause-circle-filled | | payment | play-circle | plus | | plus-cirlce | radio | radio-filled | | retake | right-arrow | rocket | | search | send-campaign | send-cancel | | setting | star-full-filled | star-half-filled | | star-unfilled | tag | talent | | tax | up-arrow-circle | user | | user-video | users | users-plus | | video | video-pause | videos | | visibility | window | |

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT

Made with create-react-native-library