UNPKG

2.33 kBMarkdownView Raw
1# react-fontawesome
2
3[![Travis CI build status](https://img.shields.io/travis/danawoodman/react-fontawesome.svg)](https://travis-ci.org/danawoodman/react-fontawesome)
4[![Dependency Status](https://img.shields.io/david/danawoodman/react-fontawesome.svg)](https://david-dm.org/danawoodman/react-fontawesome)
5[![View on npm](https://img.shields.io/npm/dm/react-fontawesome.svg)](https://www.npmjs.com/package/react-fontawesome)
6[![View on npm](https://img.shields.io/npm/v/react-fontawesome.svg)](https://www.npmjs.com/package/react-fontawesome)
7
8> A React component for the font-awesome icon library.
9
10- Simple API that mirrors Font Awesome's classes.
11- Supports all Font Awesome modifiers (see [API](#API) below).
12- Add your own `className`s, styles and other props (all additional props are passed directly to the component).
13- Standard, non-ES6 JavaScript, so should work most places without a build step.
14 - Packaged as a CommonJS/npm module.
15 - Doesn't use JSX so no transforms needed.
16 - Does not require a specific build process/tool other than something that supports npm.
17
18
19## Install
20
21```
22npm install --save react-fontawesome
23```
24
25
26## Usage
27
28Basic usage:
29
30```js
31var React = require('react');
32var FontAwesome = require('react-fontawesome');
33
34React.render(<FontAwesome name='person' />, document.body);
35```
36
37Advanced usage:
38
39```js
40var React = require('react');
41var FontAwesome = require('react-fontawesome');
42
43var MyComponent = React.createClass({
44 render: function () {
45 return (
46 <FontAwesome
47 className='super-crazy-colors'
48 name='rocket'
49 size='2x'
50 spin
51 style={{ textShadow: '0 1px 0 rgba(0, 0, 0, 0.1)' }}
52 />
53 );
54 }
55});
56```
57
58This component does not include any of the Font Awesome CSS or fonts, so you'll need to make sure to include those on your end somehow, either by adding them to your build process or linking to the CDN versions.
59
60
61## API
62
63See [the API docs](api.md) for full documentation.
64
65
66## Contributing
67
68Pull requests welcome!
69
70Please use the `.editorconfig`, `.eslintrc` configurations in your editor to ensure proper formatting.
71
72Run the test suite with `npm test`, make sure tests are passing and that you write tests for new features.
73
74
75## License
76
77[MIT](license) &copy; [Dana Woodman][author]
78
79
80[author]: https://github.com/danawoodman