| 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 |
|
| 8 | [build-badge]: https://img.shields.io/travis/heroku/react-malibu/master.png?style=flat-square
|
| 9 | [build]: https://travis-ci.org/heroku/react-malibu
|
| 10 |
|
| 11 | [npm-badge]: https://img.shields.io/npm/v/@heroku/react-malibu.png?style=flat-square
|
| 12 | [npm]: https://www.npmjs.org/package/@heroku/react-malibu
|
| 13 |
|
| 14 | [](https://github.com/feross/standard)
|
| 15 |
|
| 16 |
|
| 17 | ## Setup
|
| 18 |
|
| 19 | 1. `yarn add @heroku/react-malibu`
|
| 20 | 2. Make sure that the [purple3](https://github.com/heroku/purple3) stylesheet is included in your website, or the fills will not work.
|
| 21 | 3. `import { MalibuSprites, MalibuIcon } from '@heroku/react-malibu'`
|
| 22 | 4. Profit!
|
| 23 |
|
| 24 | ## Development
|
| 25 |
|
| 26 | 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.
|
| 27 |
|
| 28 | You cannot currently publish to NPM using yarn, because [there are bugs](https://github.com/yarnpkg/yarn/issues/754).
|
| 29 |
|
| 30 | See more in CONTRIBUTING.md.
|
| 31 |
|
| 32 | ## Usage
|
| 33 |
|
| 34 | This package offers two components: `<MalibuSprites>` and `<MalibuIcon>`.
|
| 35 |
|
| 36 | #### `<MalibuSprites>`
|
| 37 |
|
| 38 | Put this component on your page only once, it fetches and displays the entire spritesheet.
|
| 39 |
|
| 40 | By default this will load the product sprites. To load the marketing sprites, add the `set` property.
|
| 41 |
|
| 42 | ```js
|
| 43 | <MalibuSprites set='marketing'/>
|
| 44 | ```
|
| 45 |
|
| 46 | #### `<MalibuIcon>`
|
| 47 |
|
| 48 | Use this component to instantiate an icon.
|
| 49 |
|
| 50 | ```js
|
| 51 | <MalibuIcon name='add-badge-16' size={20} fillClass='dark-gray' extraClasses='foo bar baz'/>
|
| 52 | ```
|
| 53 |
|
| 54 | ##### Properties
|
| 55 |
|
| 56 | * **`name`** (required): the name of the icon. See the full list at https://hk-malibu.herokuapp.com/.
|
| 57 | * **`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.
|
| 58 | * **`fillClass`** (default: purple): the desired icon fill. Must be one of
|
| 59 | - `purple`
|
| 60 | - `dark-gray`
|
| 61 | - `red`
|
| 62 | - `orange`
|
| 63 | - `green`
|
| 64 | - `blue`
|
| 65 | * **`extraClasses`** (optional): a string containing space-separated classnames to apply to the rendered `<svg>` element.
|