https://github.com/consensysmesh/rimble-icons
Cryptocurrency icons and Material app icons for React with styled-components
https://github.com/consensysmesh/rimble-icons
Last synced: 12 months ago
JSON representation
Cryptocurrency icons and Material app icons for React with styled-components
- Host: GitHub
- URL: https://github.com/consensysmesh/rimble-icons
- Owner: ConsenSysMesh
- License: mit
- Created: 2019-11-26T20:22:27.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2023-01-05T08:11:30.000Z (over 3 years ago)
- Last Synced: 2024-10-22T23:39:12.755Z (over 1 year ago)
- Language: JavaScript
- Homepage: https://rimble-icons.netlify.com/
- Size: 10.1 MB
- Stars: 6
- Watchers: 9
- Forks: 9
- Open Issues: 36
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# Rimble Icons
Crypto icons and Material icons as ES6 React styled-components
```sh
yarn add @rimble/icons styled-components
```
```jsx
// import icons individually for better tree-shaking
import { Accessibility, Eth, Btc } from '@rimble/icons'
const App = props => (
)
```
```jsx
// import all icons as a single component
import { Icon } from "@rimble/icons";
const App = props => ;
```
## List of Icons
See the [icon list](ICONS.md) for a complete list of all icons available
## Props
| Prop | Type | Description |
| ------- | ------ | ---------------------------------------------------------- |
| `size` | number | width and height in pixels |
| `color` | string | fill color, uses Styled System's [`color`][color] function |
## Contributing
```sh
yarn install
```
The build process will:
1. Parse the `material-design-icons` package for SVG source code
1. Parse the `crypto-icons` repo folder
1. Copy all the icons to the `svg/` folder
1. Run svgr over all icons to wrap in a react template with styled-system props
1. Replace default color prop with original background color for token icons
1. Create index files that imports all icons per directory
1. Create an `examples/` folder for tests and development
1. Run Babel on the `src/` folder and output to `lib/` for CommonJS compatible icons
1. Run Babel on the `src/` folder and output to `es/` for ES6 compatible icons
To run the development server:
1. First navigate to the `demo` directory
2. Install all the dependencies for the demo
3. Run the demo app
```sh
cd demo
yarn install
yarn start
```
Should start a local web server that displays all the icons
## Related
- [RMDI](https://jxnblk.com/rmdi)
- [Google Material Design Icons](https://github.com/google/material-design-icons)
- [Pixo](https://github.com/c8r/pixo)
- [Styled Components](https://www.styled-components.com/)
- [Styled System](https://styled-system.com/)
- [React Icons](https://github.com/gorangajic/react-icons)
- [Cryptocurrency Icons](https://github.com/atomiclabs/cryptocurrency-icons)
[MIT License](LICENSE.md)