https://github.com/emasuriano/maintainable-icon-system-react
Implementation of a maintainable icon system for React and React Native
https://github.com/emasuriano/maintainable-icon-system-react
Last synced: 10 days ago
JSON representation
Implementation of a maintainable icon system for React and React Native
- Host: GitHub
- URL: https://github.com/emasuriano/maintainable-icon-system-react
- Owner: EmaSuriano
- Created: 2019-06-27T17:21:10.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2024-03-31T00:32:16.000Z (about 1 year ago)
- Last Synced: 2025-03-29T03:41:25.324Z (28 days ago)
- Language: JavaScript
- Homepage: https://emasuriano.github.io/maintainable-icon-system-react
- Size: 3.57 MB
- Stars: 14
- Watchers: 2
- Forks: 10
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
\# maintainable-icon-system-react
> Demo Repository to setup an icon system that can be easily maintainable between React and React Native
This repository serves as example of this article: [Building a Maintainable Icon System in React and React Native][article-link]
## Demo
### [Live Web Demo ⚛️][demo-link]
Collection of icons used: [Material Design](https://material.io/resources/icons/?style=baseline).
## Setup the project
In case you want to run the Android or iOS project you need to first setup the environment for both:
- [iOS Setup](https://facebook.github.io/react-native/docs/getting-started#installing-dependencies)
- [Android Setup](https://facebook.github.io/react-native/docs/getting-started#installing-dependencies-1)
```bash
> git clone https://github.com/EmaSuriano/maintainable-icon-system-react.git
> cd maintainable-icon-system-react
> yarn
```
## Commands
- `start-web`: Run the web project using React in the browser.
- `build-web`: Build the web project using React for the browser.
- `start-ios`: Run the iOS project using React Native in the emulator.
- `start-android`: Run the Android project using React Native in the emulator.
- `generate-icon`: Generate the Icon Components given the icons inside the assets folder.
- `lint`: Run `eslint` with the `create-react-app` config.
## Dependencies
- `react`: UI component library.
- `react-dom`: to render in the browser.
- `react-native`: UI mobile library.
- `styled-components`: to style both web and native components.
- `react-scripts`: provides the `start` command.
- `icon-font-generator`: generate a font from the `svg` icons.
- `randomcolor`: generate fancy colors for the icons 🦄.
- `eslint`: linter for the whole project. The configuration is the default from `create-react-app`.
## License
MIT.
[article-link]: https://emasuriano.com/blog/building-a-maintainable-icon-system-for-react-and-react-native
[demo-link]: https://emasuriano.github.io/maintainable-icon-system-react/index.html