Package Exports

material-symbols-react-native
material-symbols-react-native/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (material-symbols-react-native) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

material-symbols-react-native

An icon placer component for Google's Material Symbols to use with React Native.

Icons definitions are distributed as individual packages for reducing download size. Also, each icon can be imported separately to reduce build size.

It also works with ExpoGo.

Installation

Make sure that you have installed the react-native-svg library.

See https://github.com/react-native-community/react-native-svg#installation
Install this library.

npm install material-symbols-react-native

Install an icon definition package.

npm install @material-symbols-react-native/variant-000

Current available definitions

Usage

import { MsIcon } from 'material-symbols-react-native';
import { msIconDefinition } from '@material-symbols-react-native/outlined-400';

<MsIcon icon={msIconDefinition} color="red" size={48} />;

In the above example, msIconDefinition is one of the icons provided by the definitions packages. The names of the icons are the same that can be found in Material Symbols website but camel-cased and starting with ms. Filled option is made by adding Fill to the end of the name.

Icon name examples:

ms1KPlus
msArrowBack
msCheckBoxFill
msRadioButtonUncheckedFill

Acknowledgements

This library uses the scripts of material-design-icons for downloading Material Symbols SVG's. Outstanding job!

This library is inspired in the mechanics of react-native-fontawesome. By far, the most beautiful icons ever made!