@material-inborn/icons

A material design icons component for react native (MDC ReactNative). Guidelines from https://material.io

This package provides the Google Material icons packaged as a set of React components.

Installation

Install the package in your project directory with:

npm install @material-inborn/icons

// with yarn
yarn @material-inborn/icons

These components use the MaterialInborn-UI Svg component to render the SVG path for each icon which relies on react-native-svg to provide support for Svg in react-native, and so a have a peer-dependency on the next release of Material-UI.

If you are not already using MaterialInborn-UI in your project, you can add it with:

// with npm
npm install @material-inborn/ui

// with yarn
yarn add @material-inborn/ui

Because react native does not support svg native, we have to use a provided package to give support for svg in react native react-native-svg

// with npm
npm install react-native-svg

// with yarn
yarn add react-native-svg

Depending on your react and react-native version, you will have to install the compatible version of the package in you project and link properly, read the documentation here.

After installing the package you will have link the native dependencies. To link automatically you can run react-native link react-native-svg or read the documentation to link it manually on the react-native-svg repo

Usage

You can use material.io/tools/icons to find a specific icon. When importing an icon, keep in mind that the names of the icons are PascalCase, for instance:

delete is exposed as @material-inborn/icons/Delete
delete forever is exposed as @material-inborn/icons/DeleteForever

For "themed" icons, append the theme name to the icon name. For instance with the

The Outlined delete icon is exposed as @material-inborn/icons/DeleteOutlined
The Rounded delete icon is exposed as @material-inborn/icons/DeleteRounded
The Two Tone delete icon is exposed as @material-inborn/icons/DeleteTwoTone
The Sharp delete icon is exposed as @material-inborn/icons/DeleteSharp

There are three exceptions to this rule:

3d_rotation is exposed as @material-inborn/icons/ThreeDRotation
4k is exposed as @material-inborn/icons/FourK
360 is exposed as @material-inborn/icons/ThreeSixty

Imports

import { AccessAlarm, ThreeDRotation } from '@material-inborn/icons';

TODO

Support for tree shaking for the package to import the only needed part of the package. We have already made attempt to implement babel-module-resolver but it seems not to work, if you can be lucky one to help solve we will be so glad.

Note

This package on;y provide support for material icons, if you want to use other icons or custom icons we suggest you read the documentation on material-inborn-ui library which house the full implementation of the package and provide a resource for implementing your own svg based icons or font based icon.