Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/react-pakistan/react-icon-collection

React Icon Collection built upon React StoryBook
https://github.com/react-pakistan/react-icon-collection

Last synced: about 2 months ago
JSON representation

React Icon Collection built upon React StoryBook

Awesome Lists containing this project

README

        

# πŸ“Œ React Pakistan πŸ”₯πŸ”₯πŸ”₯



React Pakistan - React Icon Collection


Taimoor Khan - React Icon Collection Author

React Pakistan is an OpenSource & Free Software (FOSS) platform, creating React software solutions for the global community. ⭐⭐⭐

[![License](https://img.shields.io/github/license/react-pakistan/react-native-boilerplate.svg)](https://github.com/react-pakistan/react-native-boilerplate/blob/master/LICENSE)
[![Followers](https://img.shields.io/github/followers/taimoormk.svg?style=social)](https://github.com/taimoormk)
[![Forks](https://img.shields.io/github/forks/react-pakistan/react-native-boilerplate.svg?style=social)](https://github.com/react-pakistan/react-native-boilerplate)
[![Stars](https://img.shields.io/github/stars/react-pakistan/react-native-boilerplate.svg?style=social)](https://github.com/react-pakistan/react-native-boilerplate)

[![Maintenance](https://img.shields.io/badge/Maintained%3F-yes-green.svg)](https://GitHub.com/Taimoormk/StrapDown.js/graphs/commit-activity)
![Maintaner](https://img.shields.io/badge/maintainer-TaimoorKhan-blue)
[![Website shields.io](https://img.shields.io/website-up-down-green-red/http/shields.io.svg)](http://shields.io/)
[![Ask Me Anything !](https://img.shields.io/badge/Ask%20me-anything-1abc9c.svg)](https://GitHub.com/Taimoormk/ama)

[![Ryo-ma's github trophy](https://github-profile-trophy.vercel.app/?username=Taimoormk&row=1)](https://github.com/ryo-ma/github-profile-trophy)

[![DenverCoder1's github streak](https://github-readme-streak-stats.herokuapp.com/?user=Taimoormk&theme=blue-green)](https://github.com/DenverCoder1/github-readme-streak-stats)

[![Sparkline](https://stars.medv.io/Naereen/badges.svg)](https://stars.medv.io/react-pakistan/react-native-icon-collection)

[![saythanks](https://img.shields.io/badge/say-thanks-ff69b4.svg)](https://saythanks.io/to/Taimoormk)

## πŸ“Œ React Icon Collection ✌



React Pakistan - React Icon Collection


React Pakistan - React Icon Collection - NPM Package

A generic, Icons library for React web apps, following modern approach by building your project's UI in isolation using state of the art Storybook along with React.

### πŸ“Œ Table of Contents πŸš€

- [Demo](#-demo-) ✨
- [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-) ✨

### πŸ“Œ Demo πŸš€

Checkout [React Icon Collection](https://react-pakistan.github.io/react-icon-collection)

### πŸ“Œ Technology Stack πŸš€

- [React](https://reactjs.org/) ✨
- [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 πŸš€

- 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 start local dev server
yarn start
// to run all tests locally
yarn test
```
OR
```console
// to install dependencies
npm install
// to start local dev server
npm start
// to run all tests locally
npm test
```

### πŸ“Œ Usage πŸš€

Add React Icon Collection to your project.

```console
yarn add @react-pakistan/react-icon-collection
```
OR
```console
npm install @react-pakistan/react-icon-collection
```

Add React Icon Collection base theme to your project.

```console
yarn add @react-pakistan/util-functions
```
OR
```console
npm install @react-pakistan/util-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 icons 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 πŸš€



React Pakistan - React Commons Collection


React Pakistan - React Commons Collection - NPM Package



React Pakistan - React UI Collection


React Pakistan - React UI Collection - NPM Package



React Pakistan - React Logo Collection


React Pakistan - React Logo Collection - NPM Package



React Pakistan - React Emoji Collection


React Pakistan - React Emoji Collection - NPM Package



React Pakistan - React Native Commons Collection


React Pakistan - React Native Commons Collection - NPM Package




React Pakistan - React Native Ui Collection


React Pakistan - React Native Ui Collection - NPM Package



React Pakistan - React Native Icon Collection


React Pakistan - React Native Icon Collection - NPM Package



React Pakistan - React Native Logo Collection


React Pakistan - React Native Logo Collection - NPM Package



React Pakistan - React Native Emoji Collection


React Pakistan - React Native Emoji Collection - NPM Package

### πŸ“Œ 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 πŸš€


Buy Me A Coffee