https://github.com/gaetanozappi/react-native-material-letter-icon
React Native library to generate Google Inbox style material list icons.
https://github.com/gaetanozappi/react-native-material-letter-icon
icons material-icons react-native
Last synced: 8 months ago
JSON representation
React Native library to generate Google Inbox style material list icons.
- Host: GitHub
- URL: https://github.com/gaetanozappi/react-native-material-letter-icon
- Owner: gaetanozappi
- License: apache-2.0
- Created: 2018-06-27T12:51:09.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2018-11-30T21:21:39.000Z (almost 7 years ago)
- Last Synced: 2025-01-15T20:31:54.799Z (9 months ago)
- Topics: icons, material-icons, react-native
- Language: Java
- Homepage:
- Size: 456 KB
- Stars: 4
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# React Native: react-native-material-letter-icon
[](https://github.com/gaetanozappi/react-native-material-letter-icon)
[](https://www.npmjs.com/package/react-native-material-letter-icon)
[](https://github.com/gaetanozappi/react-native-material-letter-icon)
[](https://www.npmjs.com/package/react-native-material-letter-icon)
[](https://github.com/gaetanozappi/react-native-material-letter-icon/issues)
[](https://github.com/gaetanozappi/react-native-material-letter-icon/issues?q=is%3Aissue+is%3Aclosed)
[](http://github.com/gaetanozappi/react-native-material-letter-icon/issues)
[]()
Variations
----------
- [Usage](#-usage)
- [License](#-license)
## 📖 Getting started
`$ npm install react-native-material-letter-icon --save`
`$ react-native link react-native-material-letter-icon`
#### Android
1. Open up `android/app/src/main/java/[...]/MainActivity.java`
- Add `import com.zappi.ui.material.letter.icon.RNMaterialLetterIconPackage;` to the imports at the top of the file
- Add `new RNMaterialLetterIconPackage()` to the list returned by the `getPackages()` method
2. Append the following lines to `android/settings.gradle`:
```
include ':react-native-material-letter-icon'
project(':react-native-material-letter-icon').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-material-letter-icon/android')
```
3. Insert the following lines inside the dependencies block in `android/app/build.gradle`:
```
compile project(':react-native-material-letter-icon')
```
## 💻 Usage
```javascript
import React, { Component } from 'react';
import {
Platform,
StyleSheet,
Text,
View
} from 'react-native';
import RNMaterialLetterIcon from 'react-native-material-letter-icon';
type Props = {};
export default class App extends Component {
render() {
return (
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
}
});
```
## 💡 Props
| Prop | Type | Default | Note |
| ----------------- | ---------- | ------- | ---------------------------------------------------------------------------------------------------------- |
| `shapeColor` | `string` | `#1e95cc` | Shape color resource
| `shapeType` | `string` | `circle` | Shape type (circle,rectangle,rect,round)
| `letter` | `string` |`Leonardo Wilhelm DiCaprio` | Letter, string or initials to get letters from
| `letterColor` | `string` | `#ffffff` | Letter color
| `letterSize` | `number` | `26` | Letter size
| `lettersNumber` | `number` | | Letter number
| `initials` | `bool` | `true` | Initials enabled
| `initialsNumber` | `number` | `3` | Initials number
| `border` | `bool` | | Border enabled
| `borderColor` | `string` | | Border color
| `borderSize` | `string` | | Border size
## ✨ Credits
- Android Material Letter Icon: [IvBaranov/MaterialLetterIcon](https://github.com/IvBaranov/MaterialLetterIcon)
## 💫 Contribute
- Pranav Raj Singh Chauhan: [prscx](https://github.com/prscx)
## 📜 License
This library is provided under the Apache License.