https://github.com/react-melon/melon-svg-icon
Material Design SVG icon components for React
https://github.com/react-melon/melon-svg-icon
component-library material-design react svg-icons
Last synced: 3 months ago
JSON representation
Material Design SVG icon components for React
- Host: GitHub
- URL: https://github.com/react-melon/melon-svg-icon
- Owner: react-melon
- Created: 2017-09-12T14:11:10.000Z (almost 9 years ago)
- Default Branch: master
- Last Pushed: 2017-09-12T14:52:54.000Z (almost 9 years ago)
- Last Synced: 2025-04-05T21:15:24.515Z (over 1 year ago)
- Topics: component-library, material-design, react, svg-icons
- Language: CSS
- Homepage: https://melon-svg-icon.surge.sh/
- Size: 84 KB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
Awesome Lists containing this project
README
## Melon SVG Icon
This package provides the [Google Material Icons](https://material.io/icons/) packaged as a set of React Components.
### Demo
please check out the [demo](https://melon-svg-icon.surge.sh/#All_Icons)
### Installation
Install the pacakge in ypur project directory with:
```sh
npm i -S melon-svg-icon
```
### Usage
The import path for each icon component includes the icon name in PascalCase.
For example to use `access alarm` icon component, you should write like this:
```js
import AccessAlarm from 'melon-svg-icon/AccessAlarm';
```
We provide the whole `svg` as a React PureComponent, so you can set all the available props for a `svg` element.
> Note:
>
> if you want to change the icon color, you should set `fill` prop;
>
> if you want to change the icon size, you should set `width` / `height` props;
```js
import AccessAlarm from 'melon-svg-icon/AccessAlarm';
export default () => {
return (
);
}
```
> Note: One Exception is `3d rotation` which is rename to `ThreeDRatation`.
### Examples
All the icons size are very large, so you had better only import those icons you needed. We have two ways to use:
1. We recommend to import icons by this way if your tool chain does not support `tree shaking`:
```js
import AccessAlarm from 'melon-svg-icon/AccessAlarm';
import ThreeDRatation from 'melon-svg-icon/ThreeDRatation';
```
2. You can also import icons from main module if your tool chain is `tree shaking`-supported:
```js
import {AccessAlarm, ThreeDRatation} from 'melon-svg-icon';
```
### Meta
We provide a `icons.json` which lists all the icon names.
### Develop
1. We use this [repo](https://github.com/google/material-design-icons) as svg resource which will installed as a devDependence.
2. Then we use `gulp` find all these svg files and transform them into jsx using [svg-to-jsx](https://github.com/janjakubnanista/svg-to-jsx).
3. Next, wrap the jsx in a `PureComponent`
4. Finally, tranlate all the components generated into es5
### All Icons
---
See all the icon, please check out the [demo](https://melon-svg-icon.surge.sh/#All_Icons)