@ticmakers-react-native/icon

1.0.1 • Public • Published

TIC Makers - React Native Icon

React native component for icon.

Powered by TIC Makers

Demo

Icon Expo's snack

Install

Install @ticmakers-react-native/icon package and save into package.json:

NPM

$ npm install @ticmakers-react-native/icon --save

Yarn

$ yarn add @ticmakers-react-native/icon

How to use?

import React from 'react'
import { AppLoading, Font } from 'expo'
import Icon from '@ticmakers-react-native/icon'

export default class App extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      isReady: false,
    }
  }

  render() {
    if (!this.state.isReady) {
      return (
        <AppLoading
          startAsync={ this.loadAssets }
          onFinish={ () => this.setState({ isReady: true }) }
          onError={ console.error }
        />
      )
    }

    return (
      <Icon name="star" />  // <- type by default is material
      // OR
      <Icon name="star" type="font-awesome" />
    )
  }

  async loadAssets() {
    await Font.loadAsync({
      AntDesign: require('@expo/vector-icons/website/src/fonts/AntDesign.ttf'),
      Entypo: require('@expo/vector-icons/website/src/fonts/Entypo.ttf'),
      EvilIcons: require('@expo/vector-icons/website/src/fonts/EvilIcons.ttf'),
      Feather: require('@expo/vector-icons/website/src/fonts/Feather.ttf'),
      FontAwesome: require('@expo/vector-icons/website/src/fonts/FontAwesome.ttf'),
      Foundation: require('@expo/vector-icons/website/src/fonts/Foundation.ttf'),
      Ionicons: require('@expo/vector-icons/website/src/fonts/Ionicons.ttf'),
      MaterialCommunityIcons: require('@expo/vector-icons/website/src/fonts/MaterialCommunityIcons.ttf'),
      MaterialIcons: require('@expo/vector-icons/website/src/fonts/MaterialIcons.ttf'),
      Octicons: require('@expo/vector-icons/website/src/fonts/Octicons.ttf'),
      SimpleLineIcons: require('@expo/vector-icons/website/src/fonts/SimpleLineIcons.ttf'),
      Zocial: require('@expo/vector-icons/website/src/fonts/Zocial.ttf'),
    })
  }
}

Properties

Name Type Default Value Definition
name - - -

Todo

  • Test on iOS
  • Improve and add new features
  • Add more styles
  • Improve readme (example & demo)
  • Create tests

Version 1.0.1 (Changelog)

Package Sidebar

Install

npm i @ticmakers-react-native/icon

Weekly Downloads

7

Version

1.0.1

License

BSD-3-Clause

Unpacked Size

453 kB

Total Files

50

Last publish

Collaborators

  • ticmakers