├── .gitignore
├── package.json
├── README.md
├── LICENSE
└── index.js
/.gitignore:
--------------------------------------------------------------------------------
1 | # Logs
2 | logs
3 | *.log
4 |
5 | # Runtime data
6 | pids
7 | *.pid
8 | *.seed
9 |
10 | # Directory for instrumented libs generated by jscoverage/JSCover
11 | lib-cov
12 |
13 | # Coverage directory used by tools like istanbul
14 | coverage
15 |
16 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
17 | .grunt
18 |
19 | # Compiled binary addons (http://nodejs.org/api/addons.html)
20 | build/Release
21 |
22 | # Dependency directory
23 | # Deployed apps should consider commenting this line out:
24 | # see https://npmjs.org/doc/faq.html#Should-I-check-my-node_modules-folder-into-git
25 | node_modules
26 |
27 | #Idea
28 | .idea
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "react-font-awesome",
3 | "version": "1.0.3",
4 | "description": "React components for awesome work with FontAwesome",
5 | "main": "index.js",
6 | "scripts": {
7 | "test": "gulp test"
8 | },
9 | "repository": {
10 | "type": "git",
11 | "url": "git://github.com/Laiff/react-font-awesome.git"
12 | },
13 | "keywords": [
14 | "react",
15 | "font",
16 | "font-awesome",
17 | "components",
18 | "icon",
19 | "react-component"
20 | ],
21 | "author": "Andrew Laiff",
22 | "license": "MIT",
23 | "bugs": {
24 | "url": "https://github.com/Laiff/react-font-awesome/issues"
25 | },
26 | "peerDependencies": {
27 | "react": "~0.11.2"
28 | }
29 | }
30 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | [](https://travis-ci.org/Laiff/react-font-awesome)
2 | [](http://badge.fury.io/js/react-font-awesome)
3 | [](https://david-dm.org/Laiff/react-font-awesome)
4 |
5 | react-font-awesome
6 | ==================
7 |
8 | React components for FontAwesome
9 |
10 | ## Example
11 |
12 | ``` js
13 | var Icon = require('react-font-awesome').Icon;
14 |
15 | var IconExample = React.createClass({
16 | render: function(){
17 | return
18 | }
19 | });
20 |
21 | React.renderComponent(, document.body);
22 | ```
23 |
24 | ## Instalation
25 |
26 | ``` bash
27 | npm install --save react-font-awesome
28 | ```
29 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | The MIT License (MIT)
2 |
3 | Copyright (c) 2014 Andrew Laiff
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/index.js:
--------------------------------------------------------------------------------
1 | /** @jsx React.DOM*/
2 | /**
3 | * Created by laiff on 03.09.14.
4 | */
5 | 'use strict';
6 |
7 | var React = require('react/addons');
8 | var dom = React.DOM;
9 |
10 | function createIcon(type) {
11 | var iconType = type;
12 | return React.createClass({
13 | render: function () {
14 | var type = iconType || this.props.type;
15 | var cs = React.addons.classSet;
16 | var classes = {
17 | 'fa': true,
18 | 'fa-spin': this.props.spin,
19 | 'fa-fw': this.props.fixedWidth,
20 | 'fa-li': this.props.li,
21 | 'fa-border': this.props.border
22 | };
23 | classes['fa-' + type] = type;
24 | classes['fa-' + this.props.size] = this.props.size;
25 | classes['fa-rotate-' + this.props.rotate] = this.props.rotate;
26 | classes['fa-flip-' + this.props.flip] = this.props.flip;
27 | classes['fa-stack-' + this.props.stack] = this.props.stack;
28 | classes['fa-align-' + this.props.align] = this.props.align;
29 |
30 | var className = cs(classes) + " " + (this.props.className || '');
31 |
32 | return this.transferPropsTo(
33 | dom.i({className: className}, this.props.children)
34 | );
35 | }
36 | });
37 | }
38 |
39 | var IconStack = React.createClass({
40 | render: function () {
41 | var cs = React.addons.classSet;
42 | var classes = {
43 | 'fa-stack': true
44 | }
45 | classes['fa-' + this.props.size] = this.props.size;
46 |
47 | var className = cs(classes) + " " + (this.props.className || '');
48 |
49 | return this.transferPropsTo(
50 | dom.span({className: className}, this.props.children)
51 | );
52 | }
53 | });
54 |
55 | var Ul = React.createClass({
56 | render: function () {
57 | var cs = React.addons.classSet;
58 | var classes = {
59 | 'fa-ul': true
60 | }
61 | var className = cs(classes) + " " + (this.props.className || '');
62 |
63 | return this.transferPropsTo(
64 | dom.ul({className: className}, this.props.children)
65 | );
66 | }
67 | });
68 |
69 | var Icon = createIcon();
70 |
71 | var Animate = React.createClass({
72 | getInitialState: function () {
73 | return {
74 | childCount: 0,
75 | child: (dom.span({}, null))
76 | };
77 | },
78 | componentWillMount: function () {
79 | if (this.props.children) {
80 | this.timer = setInterval(function () {
81 | var newChild = this.state.childCount + 1;
82 | if (this.props.children.length <= newChild) {
83 | newChild = 0;
84 | }
85 | this.setState({
86 | childCount: newChild,
87 | child: this.props.children[newChild]
88 | });
89 | }.bind(this), this.props.interval || 1000);
90 |
91 | this.setState({
92 | child: this.props.children[0]
93 | });
94 | }
95 | },
96 | componentWillUnmount: function () {
97 | clearInterval(this.timer);
98 | },
99 | render: function () {
100 | return this.state.child;
101 | }
102 | });
103 |
104 | module.exports = {
105 | Icon: Icon,
106 | Ul: Ul,
107 | IconStack: IconStack,
108 | Animate: Animate
109 | };
110 |
--------------------------------------------------------------------------------