Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/react-pakistan/react-native-icon-collection
React Native Icon Collection built upon React Native StoryBook
https://github.com/react-pakistan/react-native-icon-collection
react react-native storybook styled-components typescript
Last synced: 7 days ago
JSON representation
React Native Icon Collection built upon React Native StoryBook
- Host: GitHub
- URL: https://github.com/react-pakistan/react-native-icon-collection
- Owner: react-pakistan
- License: mit
- Created: 2020-02-11T13:25:12.000Z (almost 5 years ago)
- Default Branch: dev
- Last Pushed: 2023-01-27T09:59:37.000Z (almost 2 years ago)
- Last Synced: 2024-11-29T17:50:02.543Z (24 days ago)
- Topics: react, react-native, storybook, styled-components, typescript
- Language: TypeScript
- Homepage:
- Size: 16.3 MB
- Stars: 0
- Watchers: 2
- Forks: 1
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
- License: LICENSE
- Codeowners: .github/CODEOWNERS
Awesome Lists containing this project
README
# 📌 React Pakistan 🔥🔥🔥
React Pakistan is an OpenSource & Free Software (FOSS) platform, creating React software solutions for the global community. ⭐⭐⭐
[](https://github.com/react-pakistan/react-native-boilerplate/blob/master/LICENSE)
[](https://github.com/taimoormk)
[](https://github.com/react-pakistan/react-native-boilerplate)
[](https://github.com/react-pakistan/react-native-boilerplate)
[](https://GitHub.com/Taimoormk/StrapDown.js/graphs/commit-activity)
[](http://shields.io/)
[](https://GitHub.com/Taimoormk/ama)
[](https://github.com/ryo-ma/github-profile-trophy)
[](https://github.com/DenverCoder1/github-readme-streak-stats)
[](https://stars.medv.io/react-pakistan/react-native-icon-collection)
[](https://saythanks.io/to/Taimoormk)
## 📌 React Native Icon Collection ✌
A generic, Icon library for React Native apps, following modern approach by building your project's UI in isolation using state of the art Storybook along with React.
### 📌 Table of Contents 🚀
- [Technology Stack](#-technology-stack-) ✨
- [Installation](#-installation-) ✨
- [Usage](#-usage-) ✨
- [Styles](#-styles-) ✨
- [Tested](#-tested-) ✨
- [Contributors](#-contributors-) ✨
- [Other Libraries from ReactPakistan](#-other-libraries-from-reactpakistan–) ✨
- [Support](#-support-) ✨
- [Contact](#-contact-) ✨
- [Buy Me Coffee](#-buy-me-coffee-) ✨
### 📌 Technology Stack 🚀
- [React](https://reactjs.org/) ✨
- [React Native](https://reactnative.dev/) ✨
- [Storybook](https://storybook.js.org/) ✨
- [TypeScript](https://www.typescriptlang.org/) ✨
- [JavaScript](https://javascript.info/) ✨
- [Styled Components](https://styled-components.com/) ✨
- [Jest](https://jestjs.io/) ✨
- [Eslint](https://eslint.org/) ✨
### 📌 Installation 🚀
- You should have React Native environment setup, prior proceeding with the following steps, if you don't please refer to [React Native Getting Started docs](https://reactnative.dev/docs/getting-started) to setup that.
- Clone the repo
- Cd into the project folder
- Figure out which package manager you have on your system, then run following commands for their specific use cases.
```console
// to install dependencies
yarn
// to build and run app on ios Simulator
yarn ios
// to build and run app on android Simulator
yarn android
// to run all tests locally
yarn test
```
OR
```console
// to install dependencies
npm install
// to build and run app on ios Simulator
npm run ios
// to build and run app on android Simulator
npm run android
// to run all tests locally
npm test
```
### 📌 Usage 🚀
Add React Native Icon Collection to your project.
```console
yarn add @react-pakistan/react-native-icon-collection
```
OR
```console
npm install @react-pakistan/react-native-icon-collection
```
Add React Native Icon Collection base theme to your project.
```console
yarn add @react-pakistan/util-react-native-functions
```
OR
```console
npm install @react-pakistan/util-react-native-functions
```
Refer to [React Pakistan Docs](https://react-pakistan.github.io/react-pakistan-docs) for detail usage docs.
### 📌 Styles 🚀
Styled Components are employed to maintain and update theme for this project. Please consider adding Styled Component Provider wrapper to the entry point of your application, following is the sample code.
You could either use the default theme as shown below or wire your custom theme object instead.
```javascript
import { ThemeProvider } from 'styled-components';
import { theme } from '@react-pakistan/util-functions';
```
### 📌 Tested 🚀
Since we wrote a script that generates all the logos on the fly, we don't feel the need to test all 1000's of React SVG components.
Should you like this project and would like to see more coming in future, please consider giving a ⭐ on Github project repo.
### 📌 Contributors 🚀
Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):
| Contributors | GitHub | Emoji |
| ------------- |:-------------:|:-----:|
| 
| Taimoor Khan | 🎨🤔🚧📆👀⚠️ |
### 📌 Other Libraries from ReactPakistan 🚀
### 📌 Support 🚀
If you need any help or have any question, please feel free to join ReactPakistan community at [React Pakistan Slack](reactpakistan.slack.com).
### 📌 Contact 🚀
I can be reachable via [Taimoor Web](https://taimoor.io) or else should you wish to send over an expression of your interest to contribute towards ReactPakistan, please shoot an [email](mailto:[email protected]).
### 📌 Buy me Coffee 🚀
