Icon

Icons symbolize meaning and represent common actions. - Material Docs

import { Icon } from 'material-bread';

Icon s are provided by react-native-vector-icons , you can learn more about these icons in the style section on icons. The default icon pack is MaterialIcons, but you can use aany that react-native-vector-icons supports.

















Live Editing

class IconPage extends React.Component {
  constructor(props) {
    super(props)
    this.state = {

    }
  }
  render() {
    return (
      <View style={{flexDirection: 'row', flexWrap: 'wrap'}}>
        <Icon name="adb" size={12} color={'#F44336'} />
        <Icon name="album" size={24} color={'#E91E63'} />
        <Icon name="battery-full" size={32} color={'#9C27B0'} />
     
        <Icon name="camera" size={48} color={'#009688'} />
        <Icon name="create" size={24} color={'#00BCD4'} />
        <Icon name="dashboard" size={32} color={'#607D8B'} />
        <Icon name="directions-walk" size={48} color={'#8BC34A'} />

        <Icon name="flash-on" size={64} color={'#FFEB3B'} />
      </View>
    );
  }
}

import React, { Component } from 'react';
import { View } from 'react-native';
import { Icon } from 'material-bread';

class IconPage extends React.Component {
  constructor(props) {
    super(props)
    this.state = {

    }
  }
  render() {
    return (
      <View>
        <Icon name="favorite" size={48} />
      </View>
    );
  }
}

Name

Description

Type

Default

color

Icon Color

string

iconComponent

One of the Icon components from react-native-vector-icons

function

name

Name of icon that matches material names

string

size

Size of icon

number

style

Styles root element

object

You can see even more examples in the Storybook environment.

You can use other icon packs from react-native-vector-icons by passing them into MaterialCommunityIcons and providing the icon name in the string.

精







Live Editing

class DialogPage extends React.Component {
  constructor(props) {
    super(props)
  }
  render() {
    return (
      <View style={{ flexDirection: 'row', marginBottom: 20 }}>
        <Icon
          name="visual-studio-code"
          size={24}
          color={'#373177'}
          iconComponent={MaterialCommunityIcons}
        />
        <Icon
          name="android-head"
          size={32}
          color={'#69B342'}
          iconComponent={MaterialCommunityIcons}
        />
        <Icon
          name="apple-ios"
          size={48}
          color={'#000000'}
          iconComponent={MaterialCommunityIcons}
        />
        <Icon
          name="react"
          size={64}
          color={'#5FDAFB'}
          iconComponent={MaterialCommunityIcons}
        />
      </View>
    );
  }
}

Icon

Component #

Usage #

Props #

Demos #

Source #