| 1 | # react-malibu
|
| 2 |
|
| 3 | React components for using the [Malibu SVG spritesheet](https://github.com/heroku/malibu).
|
| 4 |
|
| 5 | [![Travis][build-badge]][build]
|
| 6 | [![npm package][npm-badge]][npm]
|
| 7 | [![Coveralls][coveralls-badge]][coveralls]
|
| 8 |
|
| 9 | [build-badge]: https://img.shields.io/travis/user/repo/master.png?style=flat-square
|
| 10 | [build]: https://travis-ci.org/user/repo
|
| 11 |
|
| 12 | [npm-badge]: https://img.shields.io/npm/v/@heroku/react-malibu.png?style=flat-square
|
| 13 | [npm]: https://www.npmjs.org/package/@heroku/react-malibu
|
| 14 |
|
| 15 | [coveralls-badge]: https://img.shields.io/coveralls/user/repo/master.png?style=flat-square
|
| 16 | [coveralls]: https://coveralls.io/github/user/repo
|
| 17 |
|
| 18 |
|
| 19 | ## Setup
|
| 20 |
|
| 21 | 1. `yarn install @heroku/react-malibu`
|
| 22 | 2. `import { MalibuSprites, MalibuIcon } from 'react-malibu'`
|
| 23 | 3. Profit!
|
| 24 |
|
| 25 | ## Development
|
| 26 |
|
| 27 | Clone the repo, then `yarn install`. If you want to see the demo server, run `yarn start` and visit http://localhost:3000 to browse the icons.
|
| 28 |
|
| 29 | ## Usage
|
| 30 |
|
| 31 | This package offers two components: `<MalibuSprites>` and `<MalibuIcon>`.
|
| 32 |
|
| 33 | #### `<MalibuSprites>`
|
| 34 |
|
| 35 | Put this component on your page only once, it fetches and displays the entire spritesheet.
|
| 36 |
|
| 37 | #### `<MalibuIcon>`
|
| 38 |
|
| 39 | Use this component to instantiate an icon.
|
| 40 |
|
| 41 | ```js
|
| 42 | <MalibuIcon name='add-badge-16' size={20} fillClass='dark-gray' />
|
| 43 | ```
|
| 44 |
|
| 45 | ##### Properties
|
| 46 |
|
| 47 | * **`name`** (required): the name of the icon. See the full list at https://hk-malibu.herokuapp.com/.
|
| 48 | * **`size`** (default: undefined): the desired rendering size in pixels. Note that most icons come in `-16` and `-28` pixel variants. Choose the appropriate variant for the scale you wish to render at — for example, if you're rendering an icon at 12px, use the `-16` icon as the base and `12` as the `size`. If you do not specify a size, the icon's native size will be used.
|
| 49 | * **`fillClass`** (default: purple): the desired icon fill. Must be one of
|
| 50 | - `purple`
|
| 51 | - `dark-gray`
|
| 52 | - `red`
|
| 53 | - `orange`
|
| 54 | - `green`
|
| 55 | - `blue`
|