Repository: andreypopp/react-fa
Branch: master
Commit: de175f971fa2
Files: 20
Total size: 19.1 KB

Directory structure:
gitextract_2ke5qawr/

├── .babelrc
├── .eslintignore
├── .eslintrc
├── .flowconfig
├── .gitignore
├── .npmignore
├── .prettierrc
├── Makefile
├── README.md
├── example/
│   ├── Makefile
│   ├── index.html
│   ├── index.js
│   └── webpack.config.js
├── package.json
└── src/
    ├── Icon.js
    ├── IconStack.js
    ├── README.md
    ├── __tests__/
    │   ├── Icon-test.js
    │   └── IconStack-test.js
    └── index.js

================================================
FILE CONTENTS
================================================

================================================
FILE: .babelrc
================================================
{
  "presets": [
    [
      "env",
      {
        "targets": {
          "browsers": [
            "> 2%"
          ]
        }
      }
    ],
    "stage-1",
    "react"
  ]
}


================================================
FILE: .eslintignore
================================================
src/__tests__/**/*.js

================================================
FILE: .eslintrc
================================================
{
    "env": {
        "browser": true
    },
    "extends": "airbnb",
    "parser": "babel-eslint",
    "parserOptions": {
        "ecmaFeatures": {
            "experimentalObjectRestSpread": true
        }
    },
    "rules": {
        "react/jsx-filename-extension": "off",
        "react/jsx-props-no-spreading": "off",
        "react/require-default-props": "warn",
        "react/static-property-placement": "off",
        "react/prefer-stateless-function": "off"
    }
  }
  

================================================
FILE: .flowconfig
================================================
[ignore]

[include]

[libs]

[lints]

[options]


================================================
FILE: .gitignore
================================================
node_modules
example/assets
lib/


================================================
FILE: .npmignore
================================================
src/
npm-debug.log
.babelrc


================================================
FILE: .prettierrc
================================================
{
  "printWidth": 90,
  "singleQuote": true,
  "bracketSpacing": false,
  "trailingComma": "all",
  "jsxBracketSameLine": true
}


================================================
FILE: Makefile
================================================
.DELETE_ON_ERROR:

BABEL_OPTIONS = --stage 0
BIN           = ./node_modules/.bin
TESTS         = $(shell find src -path '*/__tests__/*-test.js')
SRC           = $(filter-out $(TESTS), $(shell find src -name '*.js'))
LIB           = $(SRC:src/%.js=lib/%.js) $(SRC:src/%.js=lib/%.js.flow)
NODE          = $(BIN)/babel-node $(BABEL_OPTIONS)

build:
	@$(MAKE) -j 8 $(LIB)

test::
	@$(BIN)/jest

ci::
	@$(BIN)/jest --watch

lint::
	@$(BIN)/flow

version-major version-minor version-patch: lint test
	@npm version $(@:version-%=%)

publish: build
	@git push --tags origin HEAD:master
	@npm publish

lib/%.js: src/%.js
	@echo "Building $(@)"
	@mkdir -p $(@D)
	@$(BIN)/babel $(BABEL_OPTIONS) -o $@ $<

lib/%.js.flow: src/%.js
	@echo "Building $(@)"
	@mkdir -p $(@D)
	@cp $(<) $(@)

example: build
	@(cd example; $(BIN)/webpack --hide-modules)

watch-example: build
	@(cd example; $(BIN)/webpack --watch --hide-modules)

publish-example: build
	@(cd example;\
		rm -rf .git;\
		git init .;\
		$(BIN)/webpack -p;\
		git checkout -b gh-pages;\
		git add .;\
		git commit -m 'Update';\
		git push -f git@github.com:andreypopp/react-fa.git gh-pages;\
	)

clean:
	@rm -rf lib


================================================
FILE: README.md
================================================
**DEPRECATED:** Use https://github.com/FortAwesome/react-fontawesome instead 

# Font Awesome icons as React components

## Installation

React Font Awesome is distributed via [npm][]:

```bash
npm install react react-fa
```

You also need to install [webpack][] which is the only bundler at the moment
capable to bundle not only JavaScript code but also stylesheets and static
assets such as fonts and images:

```bash
npm install webpack
```

You also need a couple of loaders for webpack:

```bash
npm install babel-loader style-loader css-loader url-loader file-loader
npm install extract-text-webpack-plugin
```

## Usage

Just as simple as:

```javascript
import React from 'react'
import ReactDOM from 'react-dom'
import {Icon} from 'react-fa'

ReactDOM.renderComponent(
  <Icon spin name="spinner" />,
  document.getElementById('main')
)
```

### Icon Component API

**Props in `[]` are optional**

|Prop       |Type    |Default    |Description                                 |
|-----------|:------:|:---------:|--------------------------------------------|
|name       |`string`|`undefined`|Required: Name of the Font Awesome Icon     |
|[className]|`string`|`undefined`|Set a CSS class for extra styles            |
|[size]     |`string`|`undefined`|Increase size: 'lg', '2x', '3x', '4x', '5x' |
|[rotate]   |`string`|`undefined`|Rotate by deg: '45', '90', '135', '180', '225', '270', '315'|
|[flip]     |`string`|`undefined`|Flips Icon: 'horizontal', 'vertical'        |
|[fixedWidth]|`boolean`|`false`|Set Icon to a fixed width                   |
|[spin]     |`boolean`| `false`|Rotate Icon|
|[pulse]     |`boolean`|`false`|Rotate Icon in 8 steps|
|[stack]     |`string` |`undefined`|Stack Icons: '1x', '2x'. [More Info][]
|[inverse]   |`boolean`|`false`|Inverse the Icon color|
|[Component] |`string/func`|`span`|Alternate DOM element |

### IconStack Component API

|Prop       |Type    |Default    |Description                                 |
|-----------|:------:|:---------:|--------------------------------------------|
|[children] |`node`|`undefined`|Required: Child elements |
|[size]     |`string`|`undefined`|Increase size: 'lg', '2x', '3x', '4x', '5x' |
|[className]|`string`|`undefined`|Set a CSS class for extra styles            |

## Webpack Setup

Use the following webpack config (put it in `webpack.config.js`):

```javascript
var ExtractTextPlugin = require('extract-text-webpack-plugin')

module.exports = {
  entry: './index.js',
  output: {
    path: 'assets',
    filename: 'bundle.js',
  },
  module: {
    loaders: [
      {
        test: /\.js$/,
        loader: 'babel'
      },
      {
        test: /\.css$/,
        loader: ExtractTextPlugin.extract('style-loader', 'css-loader')
      },
      {
        test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
        loader: 'url-loader?limit=10000&mimetype=application/font-woff'
      },
      {
        test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
        loader: 'file-loader'
      }
    ]
  },
  plugins: [
    new ExtractTextPlugin('bundle.css')
  ]
}
```

which compile everything (js, stylesheets and icon fonts) into `assets/`
directory so you would need this basic HTML file to start your app:

```html
<!doctype html>
<html>
    <head>
        <link rel="stylesheet" href="assets/bundle.css">
    </head>
    <body>
        <div id="main"></div>
        <script src="assets/bundle.js"></script>
    </body>
</html>
```

Note: If you run into issues with loading the FontAwesome font when *not* using `ExtractTextPlugin`, this might be fixed by making your `publicPath` absolute. See [this StackOverflow question](http://stackoverflow.com/questions/34133808/webpack-ots-parsing-error-loading-fonts/34133809#34133809) for details.

[webpack]: http://webpack.github.io/
[npm]: http://npmjs.org
[More Info]: http://fontawesome.io/examples/ 'Scroll to stacked icons'


================================================
FILE: example/Makefile
================================================
build:
	../node_modules/.bin/webpack


================================================
FILE: example/index.html
================================================
<!doctype html>
<html>
  <head>
    <link rel="stylesheet" href="assets/bundle.css">
  </head>
  <body>
    <div id="main"></div>
    <script src="assets/bundle.js"></script>
  </body>
</html>


================================================
FILE: example/index.js
================================================
/**
 * @jsx React.DOM
 */
var React = require('react');
var ReactDOM = require('react-dom')
var ReactFA = require('../src/index');
var Icon = ReactFA.Icon;
var IconStack = ReactFA.IconStack;

var Demo = React.createClass({

  render() {
    return (
      <article>
        <h1>React Font Awesome Demo</h1>
        <article>
          <h2>Basic Icons</h2>
          <pre>{`<Icon name="camera-retro" />`}</pre>
          <Icon name="camera-retro" />
        </article>
        <article>
          <h2>Larger Icons</h2>
          <pre>{`<Icon name="camera-retro" size="lg" />`}</pre>
          <Icon name="camera-retro" size="lg" />
          <pre>{`<Icon name="camera-retro" size="2x" />`}</pre>
          <Icon name="camera-retro" size="2x" />
          <pre>{`<Icon name="camera-retro" size="3x" />`}</pre>
          <Icon name="camera-retro" size="3x" />
          <pre>{`<Icon name="camera-retro" size="4x" />`}</pre>
          <Icon name="camera-retro" size="4x" />
          <pre>{`<Icon name="camera-retro" size="5x" />`}</pre>
          <Icon name="camera-retro" size="5x" />
        </article>
        <article>
          <h2>Fixed Width Icons</h2>
          <pre>{`<Icon name="check-square" />`}</pre>
          <Icon name="check-square" />
          <pre>{`<Icon name="spinner" spin />`}</pre>
          <Icon name="spinner" spin />
        </article>
        <article>
          <h2>Spinning Icons</h2>
          <pre>{`<Icon name="spinner" spin />`}</pre>
          <Icon name="spinner" spin />
          <pre>{`<Icon name="circle-o-notch" spin />`}</pre>
          <Icon name="circle-o-notch" spin />
          <pre>{`<icon name="refresh" spin />`}</pre>
          <Icon name="refresh" spin />
          <pre>{`<Icon name="cog" spin />`}</pre>
          <Icon name="cog" spin />
        </article>
        <article>
          <h2>Rotated {'&'} Flipped</h2>
          <pre>{`<Icon name="shield" />`}</pre>
          <Icon name="shield" />
          <pre>{`<Icon name="shield" rotate="90" />`}</pre>
          <Icon name="shield" rotate="90" />
          <pre>{`<Icon name="shield" rotate="180" />`}</pre>
          <Icon name="shield" rotate="180" />
          <pre>{`<Icon name="shield" rotate="270" />`}</pre>
          <Icon name="shield" rotate="270" />
          <pre>{`<Icon name="shield" flip="horizontal" />`}</pre>
          <Icon name="shield" flip="horizontal" />
          <pre>{`<Icon name="shield" flip="vertical" />`}</pre>
          <Icon name="shield" flip="vertical" />
        </article>
        <article>
          <h2>Stacked Icons</h2>
          <pre>{`
<IconStack>
  <Icon name="circle" stack="2x" />
  <Icon name="home" stack="1x" inverse={true} />
</IconStack>
`}</pre>
          <IconStack>
            <Icon name="circle" stack="2x" />
            <Icon name="home" stack="1x" inverse={true} />
          </IconStack>
          <pre>{`
<IconStack size="2x">
  <Icon name="circle" stack="2x" />
  <Icon name="home" stack="1x" inverse={true} />
</IconStack>
`}</pre>
          <IconStack size="2x">
            <Icon name="circle" stack="2x" />
            <Icon name="home" stack="1x" inverse={true} />
          </IconStack>
        </article>
      </article>
    );
  }
});

ReactDOM.render(<Demo />, document.getElementById('main'));


================================================
FILE: example/webpack.config.js
================================================
var ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
  entry: './index.js',
  output: {
    path: 'assets',
    filename: 'bundle.js',
  },
  module: {
    loaders: [
      {
        test: /\.js$/,
        loader: 'babel-loader?stage=0'
      },
      {
        test: /\.css$/,
        loader: ExtractTextPlugin.extract('style-loader', 'css-loader')
      },
      {
        test: /\.(otf|eot|svg|ttf|woff)\??/,
        loader: 'url-loader?limit=8192'
      }
    ]
  },
  plugins: [
    new ExtractTextPlugin('bundle.css')
  ]
};


================================================
FILE: package.json
================================================
{
  "name": "react-fa",
  "version": "5.0.0",
  "description": "Font Awesome icons as React components",
  "main": "lib/index.js",
  "dependencies": {
    "font-awesome": "^4.3.0",
    "prop-types": "^15.5.8"
  },
  "peerDependencies": {
    "react": ">= 0.13.0 <17.0.0"
  },
  "files": [
    "lib/"
  ],
  "devDependencies": {
    "babel-cli": "^6.26.0",
    "babel-core": "^6.0.0",
    "babel-eslint": "^10.0.3",
    "babel-jest": "^21.2.0",
    "babel-loader": "^6.0.0",
    "babel-preset-env": "^1.6.0",
    "babel-preset-react": "^6.24.1",
    "babel-preset-stage-1": "^6.24.1",
    "babel-runtime": "^6.0.0",
    "css-loader": "^0.18.0",
    "eslint": "^6.6.0",
    "eslint-config-airbnb": "^18.0.1",
    "eslint-plugin-import": "^2.18.2",
    "eslint-plugin-jsx-a11y": "^6.2.3",
    "eslint-plugin-react": "^7.16.0",
    "extract-text-webpack-plugin": "^0.8.2",
    "file-loader": "^0.8.4",
    "flow-bin": "^0.56.0",
    "jest-cli": "^21.2.1",
    "prettier": "^1.7.3",
    "react": "^16.0.0",
    "react-dom": "^16.0.0",
    "style-loader": "^0.12.0",
    "url-loader": "^0.5.5",
    "webpack": "^1.12.0"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "lint": "eslint \"src/**/*.js\"",
    "lint:fix": "eslint \"src/**/*.js\" --fix"
  },
  "repository": {
    "type": "git",
    "url": "https://github.com/andreypopp/react-fa"
  },
  "keywords": [
    "react",
    "react-component",
    "font-awesome",
    "icons"
  ],
  "author": "Andrey Popp <8mayday@gmail.com>",
  "license": "MIT",
  "bugs": {
    "url": "https://github.com/andreypopp/react-fa/issues"
  },
  "homepage": "http://andreypopp.github.io/react-fa/"
}


================================================
FILE: src/Icon.js
================================================
/**
 * @copyright 2015, Andrey Popp <8mayday@gmail.com>
 * @flow
 */

import * as React from 'react';
import PropTypes from 'prop-types';

type Props = {
  name: string,
  className?: string,
  size?: 'lg' | '2x' | '3x' | '4x' | '5x',
  rotate?: '45' | '90' | '135' | '180' | '225' | '270' | '315',
  flip?: 'horizontal' | 'vertical',
  fixedWidth?: boolean,
  spin?: boolean,
  pulse?: boolean,
  stack?: '1x' | '2x',
  inverse?: boolean,
  Component: React.ElementType,
};

export default class Icon extends React.Component<Props> {
  static propTypes = {
    name: PropTypes.string.isRequired,
    className: PropTypes.string,
    size: PropTypes.oneOf(['lg', '2x', '3x', '4x', '5x']),
    rotate: PropTypes.oneOf(['45', '90', '135', '180', '225', '270', '315']),
    flip: PropTypes.oneOf(['horizontal', 'vertical']),
    fixedWidth: PropTypes.bool,
    spin: PropTypes.bool,
    pulse: PropTypes.bool,
    stack: PropTypes.oneOf(['1x', '2x']),
    inverse: PropTypes.bool,
    Component: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
  };

  static defaultProps = {
    Component: 'span',
  };

  render() {
    const {
      Component,
      name,
      size,
      rotate,
      flip,
      spin,
      fixedWidth,
      stack,
      inverse,
      pulse,
      className,
      ...props
    } = this.props;
    let classNames = `fa fa-${name}`;
    if (size) {
      classNames = `${classNames} fa-${size}`;
    }
    if (rotate) {
      classNames = `${classNames} fa-rotate-${rotate}`;
    }
    if (flip) {
      classNames = `${classNames} fa-flip-${flip}`;
    }
    if (fixedWidth) {
      classNames = `${classNames} fa-fw`;
    }
    if (spin) {
      classNames = `${classNames} fa-spin`;
    }
    if (pulse) {
      classNames = `${classNames} fa-pulse`;
    }

    if (stack) {
      classNames = `${classNames} fa-stack-${stack}`;
    }
    if (inverse) {
      classNames = `${classNames} fa-inverse`;
    }

    if (className) {
      classNames = `${classNames} ${className}`;
    }
    return <Component {...props} className={classNames} />;
  }
}


================================================
FILE: src/IconStack.js
================================================
/**
 * @copyright 2015, Andrey Popp <8mayday@gmail.com>
 * @flow
 */

import * as React from 'react';
import PropTypes from 'prop-types';

type Props = {
  className?: string,
  size?: 'lg' | '2x' | '3x' | '4x' | '5x',
  children: React.Element<any>,
};

export default class IconStack extends React.Component<Props> {
  static propTypes = {
    className: PropTypes.string,
    size: PropTypes.oneOf(['lg', '2x', '3x', '4x', '5x']),
    children: PropTypes.node.isRequired,
  };

  render() {
    const {
      className, size, children, ...props
    } = this.props;

    const classNames = ['fa-stack'];

    if (size) {
      classNames.push(`fa-${size}`);
    }

    if (className) {
      classNames.push(className);
    }

    const iconStackClassName = classNames.join(' ');

    return (
      <span {...props} className={iconStackClassName}>
        {children}
      </span>
    );
  }
}


================================================
FILE: src/README.md
================================================
## React-fa 
### Icon Component API

**Props in `[]` are optional**

|Prop       |Type    |Default    |Description                                 |
|-----------|:------:|:---------:|--------------------------------------------|
|name       |`string`|`undefined`|Required: Name of the Font Awesome Icon     |
|[className]|`string`|`undefined`|Set a CSS class for extra styles            |
|[size]     |`string`|`undefined`|Increase size: 'lg', '2x', '3x', '4x', '5x' |
|[rotate]   |`string`|`undefined`|Rotate by deg:'90', '180', '270'            |
|[flip]     |`string`|`undefined`|Flips Icon: 'horizontal', 'vertical'        |
|[fixedWidth]|`boolean`|`false`|Set Icon to a fixed width                   |
|[spin]     |`boolean`| `false`|Rotate Icon|
|[pulse]     |`boolean`|`false`|Rotate Icon in 8 steps|
|[stack]     |`string` |`undefined`|Stack Icons: '1x', '2x'. [More Info][]
|[inverse]   |`boolean`|`false`|Inverse the Icon color|
|[Component] |`string/func`|`span`|Alternate DOM element |

### IconStack Component API
|Prop       |Type    |Default    |Description                                 |
|-----------|:------:|:---------:|--------------------------------------------|
|[children] |`node`|`undefined`|Required: Child elements |
|[size]     |`string`|`undefined`|Increase size: 'lg', '2x', '3x', '4x', '5x' |
|[className]|`string`|`undefined`|Set a CSS class for extra styles            |



[More Info]: http://fontawesome.io/examples/ 'Scroll to stacked icons'


================================================
FILE: src/__tests__/Icon-test.js
================================================
/**
 * @copyright 2015-present, Andrey Popp <8mayday@gmail.com>
 */

import React from 'react';
import { renderToString } from 'react-dom/server';
import Icon from '../Icon';

describe('Icon', () => {
  it('renders Font Awesome className', () => {
    const markup = renderToString(<Icon name="plus" />);
    expect(/<span class="fa fa-plus"/.exec(markup)).toBeTruthy();
  });

  it('supports "size"', () => {
    const markup = renderToString(<Icon size="lg" name="plus" />);
    expect(/<span class="fa fa-plus fa-lg"/.exec(markup)).toBeTruthy();
  });

  it('supports "rotate"', () => {
    const markup = renderToString(<Icon rotate="45" name="plus" />);
    expect(/<span class="fa fa-plus fa-rotate-45"/.exec(markup)).toBeTruthy();
  });

  it('supports "flip"', () => {
    const markup = renderToString(<Icon flip="horizontal" name="plus" />);
    expect(/<span class="fa fa-plus fa-flip-horizontal"/.exec(markup)).toBeTruthy();
  });

  it('supports "fixedWidth"', () => {
    const markup = renderToString(<Icon fixedWidth name="plus" />);
    expect(/<span class="fa fa-plus fa-fw"/.exec(markup)).toBeTruthy();
  });

  it('supports "spin"', () => {
    const markup = renderToString(<Icon spin name="plus" />);
    expect(/<span class="fa fa-plus fa-spin"/.exec(markup)).toBeTruthy();
  });

  it('supports "pulse"', () => {
    const markup = renderToString(<Icon pulse name="plus" />);
    expect(/<span class="fa fa-plus fa-pulse"/.exec(markup)).toBeTruthy();
  });

  it('supports "stack"', () => {
    const markup = renderToString(<Icon stack="2x" name="plus" />);
    expect(/<span class="fa fa-plus fa-stack-2x"/.exec(markup)).toBeTruthy();
  });

  it('supports "inverse"', () => {
    const markup = renderToString(<Icon inverse name="plus" />);
    expect(/<span class="fa fa-plus fa-inverse"/.exec(markup)).toBeTruthy();
  });

  it('supports custom className', () => {
    const markup = renderToString(<Icon className="x" name="plus" />);
    expect(/<span class="fa fa-plus x"/.exec(markup)).toBeTruthy();
  });

  it('can be rendered using different DOM component', () => {
    const markup = renderToString(<Icon Component="i" name="plus" />);
    expect(/<i class="fa fa-plus"/.exec(markup)).toBeTruthy();
  });
});


================================================
FILE: src/__tests__/IconStack-test.js
================================================
/**
 * @copyright 2015-present, Andrey Popp <8mayday@gmail.com>
 */

import React from 'react';
import { renderToString } from 'react-dom/server';
import Icon from '../Icon';
import IconStack from '../IconStack';

describe('IconStack', () => {
  it('renders icon stack container with default size', () => {
    const markup = renderToString(
      <IconStack>
        <Icon name="plus" />
      </IconStack>,
    );
    expect(/<span class="fa-stack"/.exec(markup)).toBeTruthy();
  });

  it('supports optional "size"', () => {
    const markup = renderToString(
      <IconStack size="2x">
        <Icon name="plus" />
      </IconStack>,
    );
    expect(/<span class="fa-stack fa-2x"/.exec(markup)).toBeTruthy();
  });

  it('supports custom className', () => {
    const markup = renderToString(
      <IconStack className="x">
        <Icon name="plus" />
      </IconStack>,
    );
    expect(/<span class="fa-stack x"/.exec(markup)).toBeTruthy();
  });
});


================================================
FILE: src/index.js
================================================
/**
 * @copyright 2015, Andrey Popp <8mayday@gmail.com>
 * @flow
 */

import 'font-awesome/css/font-awesome.css';

import Icon from './Icon';
import IconStack from './IconStack';

export { Icon as default, Icon, IconStack };