Native-material-icons NPM

Why this library?

Because it is:

📦 Tiny - each downloaded svg is optimized by svgo and minified. This results in 0.5 kilobytes icon size in average.
🌳 Tree shakable - your app won't grow dramatically, metro will automatically throw out unused icons from the bundle, resulting in small bundle size.
💪 Strongly typed - comes with TypeScript declarations, which will help you avoid common mistakes.
👋 Developer-friendly - doesn't require any additional configuration - simply install react-native-svg as well as this package, and instantly begin using awesome icons.

Installation

Install react-native-svg as well as this package:

npm i react-native-svg native-material-icons

Or with yarn:

yarn add react-native-svg native-material-icons

Usage

// Filled style
import { LightbulbIcon } from 'native-material-icons';

// Outlined style
import { LightbulbOutlinedIcon } from 'native-material-icons';

// Rounded style
import { LightbulbRoundIcon } from 'native-material-icons';

// Sharp style
import { LightbulbSharpIcon } from 'native-material-icons';

// Two tone style
import { LightbulbTwoToneIcon } from 'native-material-icons';

Or:

// Filled style
import LightbulbIcon from 'native-material-icons/LightbulbIcon';

// Outlined style
import LightbulbOutlinedIcon from 'native-material-icons/LightbulbOutlinedIcon';

// Rounded style
import LightbulbRoundIcon from 'native-material-icons/LightbulbRoundIcon';

// Sharp style
import LightbulbSharpIcon from 'native-material-icons/LightbulbSharpIcon';

// Two tone style
import LightbulbTwoToneIcon from 'native-material-icons/LightbulbTwoToneIcon';

Examples

Usage with Native Base:

import { Icon } from 'native-base';
import LightbulbIcon from 'native-material-icons/LightbulbIcon';

const App = () => {
    return (
        <Icon
            /* Specify icon component */
            as={LightbulbIcon}
            /* Supports color */
            color="gray.500"
            /* Supports sizes */
            size="md"
        />
    );
};