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 };
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
SYMBOL INDEX (2 symbols across 2 files)
FILE: example/index.js
method render (line 12) | render() {
FILE: src/IconStack.js
class IconStack (line 15) | class IconStack extends React.Component<Props> {
Condensed preview — 20 files, each showing path, character count, and a content snippet. Download the .json file or copy for the full structured content (22K chars).
[
{
"path": ".babelrc",
"chars": 178,
"preview": "{\n \"presets\": [\n [\n \"env\",\n {\n \"targets\": {\n \"browsers\": [\n \"> 2%\"\n ]\n"
},
{
"path": ".eslintignore",
"chars": 21,
"preview": "src/__tests__/**/*.js"
},
{
"path": ".eslintrc",
"chars": 483,
"preview": "{\n \"env\": {\n \"browser\": true\n },\n \"extends\": \"airbnb\",\n \"parser\": \"babel-eslint\",\n \"parserOptions\""
},
{
"path": ".flowconfig",
"chars": 48,
"preview": "[ignore]\n\n[include]\n\n[libs]\n\n[lints]\n\n[options]\n"
},
{
"path": ".gitignore",
"chars": 33,
"preview": "node_modules\nexample/assets\nlib/\n"
},
{
"path": ".npmignore",
"chars": 28,
"preview": "src/\nnpm-debug.log\n.babelrc\n"
},
{
"path": ".prettierrc",
"chars": 129,
"preview": "{\n \"printWidth\": 90,\n \"singleQuote\": true,\n \"bracketSpacing\": false,\n \"trailingComma\": \"all\",\n \"jsxBracketSameLine\""
},
{
"path": "Makefile",
"chars": 1162,
"preview": ".DELETE_ON_ERROR:\n\nBABEL_OPTIONS = --stage 0\nBIN = ./node_modules/.bin\nTESTS = $(shell find src -path "
},
{
"path": "README.md",
"chars": 3870,
"preview": "**DEPRECATED:** Use https://github.com/FortAwesome/react-fontawesome instead \n\n# Font Awesome icons as React components\n"
},
{
"path": "example/Makefile",
"chars": 37,
"preview": "build:\n\t../node_modules/.bin/webpack\n"
},
{
"path": "example/index.html",
"chars": 193,
"preview": "<!doctype html>\n<html>\n <head>\n <link rel=\"stylesheet\" href=\"assets/bundle.css\">\n </head>\n <body>\n <div id=\"mai"
},
{
"path": "example/index.js",
"chars": 3276,
"preview": "/**\n * @jsx React.DOM\n */\nvar React = require('react');\nvar ReactDOM = require('react-dom')\nvar ReactFA = require('../sr"
},
{
"path": "example/webpack.config.js",
"chars": 562,
"preview": "var ExtractTextPlugin = require('extract-text-webpack-plugin');\n\nmodule.exports = {\n entry: './index.js',\n output: {\n "
},
{
"path": "package.json",
"chars": 1665,
"preview": "{\n \"name\": \"react-fa\",\n \"version\": \"5.0.0\",\n \"description\": \"Font Awesome icons as React components\",\n \"main\": \"lib/"
},
{
"path": "src/Icon.js",
"chars": 2084,
"preview": "/**\n * @copyright 2015, Andrey Popp <8mayday@gmail.com>\n * @flow\n */\n\nimport * as React from 'react';\nimport PropTypes f"
},
{
"path": "src/IconStack.js",
"chars": 897,
"preview": "/**\n * @copyright 2015, Andrey Popp <8mayday@gmail.com>\n * @flow\n */\n\nimport * as React from 'react';\nimport PropTypes f"
},
{
"path": "src/README.md",
"chars": 1480,
"preview": "## React-fa \n### Icon Component API\n\n**Props in `[]` are optional**\n\n|Prop |Type |Default |Description "
},
{
"path": "src/__tests__/Icon-test.js",
"chars": 2246,
"preview": "/**\n * @copyright 2015-present, Andrey Popp <8mayday@gmail.com>\n */\n\nimport React from 'react';\nimport { renderToString "
},
{
"path": "src/__tests__/IconStack-test.js",
"chars": 965,
"preview": "/**\n * @copyright 2015-present, Andrey Popp <8mayday@gmail.com>\n */\n\nimport React from 'react';\nimport { renderToString "
},
{
"path": "src/index.js",
"chars": 225,
"preview": "/**\n * @copyright 2015, Andrey Popp <8mayday@gmail.com>\n * @flow\n */\n\nimport 'font-awesome/css/font-awesome.css';\n\nimpor"
}
]
About this extraction
This page contains the full source code of the andreypopp/react-fa GitHub repository, extracted and formatted as plain text for AI agents and large language models (LLMs). The extraction includes 20 files (19.1 KB), approximately 6.2k tokens, and a symbol index with 2 extracted functions, classes, methods, constants, and types. Use this with OpenClaw, Claude, ChatGPT, Cursor, Windsurf, or any other AI tool that accepts text input. You can copy the full output to your clipboard or download it as a .txt file.
Extracted by GitExtract — free GitHub repo to text converter for AI. Built by Nikandr Surkov.