danawoodman / react-fontawesome Goto Github PK

View Code? Open in Web Editor NEW

668.0 10.0 73.0 605 KB

A React Font Awesome component.

Home Page: https://www.npmjs.com/package/react-fontawesome

License: MIT License

JavaScript 100.00%

react javascript props font font-awesome ui component components icon reactjs

react-fontawesome's Introduction

react-fontawesome

A React component for the font-awesome icon library.

If you are using Font Awesome v5+, please use the official React component!. react-fontawesome does not support FontAwesome v5!

This project is no longer actively maintained. Please try and use the official component above if you are able!

Install

npm install --save react-fontawesome

Note: This 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 CDN versions.

Using CDN version

The fastest way to get started is to import FontAwesome with a link tag in your page's <head>:

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />

You can change the version number to use whatever version of FontAwesome you'd like.

Using with Webpack

If you're using WebPack, you will need to install FontAwesome, import the FontAwesome Sass/Less, and configure the font path. Please see this blog post on how to get Webpack and FontAwesome working together.

Usage

var React = require('react')
var FA = require('react-fontawesome')

React.render(<FA name="rocket" />, document.body)

Features

No dependencies (other than React)
Simple API that mirrors Font Awesome's class names.
Supports all Font Awesome modifiers (see API below).
Make use of Css Modules
Add your own classNames, styles and other props (all additional props are passed directly to the component).

Examples

Regular usage

var React = require('react')
var FontAwesome = require('react-fontawesome')

var MyComponent = React.createClass({
  render: function() {
    return (
      <FontAwesome
        className="super-crazy-colors"
        name="rocket"
        size="2x"
        spin
        style={{ textShadow: '0 1px 0 rgba(0, 0, 0, 0.1)' }}
      />
    )
  },
})

With the use of CSS Modules

import React from 'react'
import FontAwesome from 'react-fontawesome'
import faStyles from 'font-awesome/css/font-awesome.css'

var MyComponent = React.createClass({
  render: function() {
    return (
      <FontAwesome
        className="super-crazy-colors"
        name="rocket"
        cssModule={faStyles}
        size="2x"
        spin
        style={{ textShadow: '0 1px 0 rgba(0, 0, 0, 0.1)' }}
      />
    )
  },
})

The above will create output like this:

<span class="font-awesome__fa___2otTb font-awesome__fa-rocket___lfSov font-awesome__super-crazy-colors___3k583"></span>

API

See the API docs for full documentation.

Contributing

Pull requests welcome!

Run the test suite with npm test and format your code with npm run format. Make sure tests are passing and that you write tests for new features and document changes to the API with updates to the JSDocs.

Before you submit your pull request, run npm run dist to build the project and commit the changes.

License

MIT © Dana Woodman

react-fontawesome's People

Contributors

Stargazers

Watchers

Forkers

urbaitel amsardesai kumatch cinderblock slogger john-ziegler allyrippley ide hansfindel jiangts i-manolov n3v3rf411 callumsmits markpj1 phyks antonzastavnyuk rookieokky ii5tl liooo yufeisky j-f1 mlee284045 corime dan-clark-lm matt2east yoloonthebattlefield tkajtoch marqueone keerthiharish server-monitor novotnej undeadlol1 nghiemthuong151291 cmcgheit jacobtheevans gavingregory narasimhareddyy bolivier ajbeaven vladimircordas kukiron vincentleeuwen eessex fudanfuhua suelsp renchap jonjperkins justinnusca amrsobhy jaypwee teotn kmvan jlnewton87 kagamichan blaskovicz maogirlsqueen man27382210 aadot mstruebing ehesp philipprus amitgilad3 bathlamos hari3110 archimedon zeneducate inier imutk ay-bamz abhishek-prabhakar muhammadali-208 rmkw wardends

react-fontawesome's Issues

Title attribute like img

Is there something like the title attribute of the img html tag. Or something where to write a short description?

Thanks

Unable to use this

Hi -- Thanks for doing this, it looks great.

However, I'm getting the following error when I try to use it:

Module build failed: ReferenceError: Unknown plugin "add-module-exports" specified in "/Users/chris/hacks/notomatic/front_end/node_modules/react-fontawesome/.babelrc" at 0, attempted to resolve relative to "/Users/chris/hacks/notomatic/front_end/node_modules/react-fontawesome"

Any clues appreciated.

No Icons showing

Hi I just tried this out and couldn't make it work.

I used the following code:

import React, {PropTypes} from "react";
import FontAwesome from "react-fontawesome"

<span><FontAwesome name="briefcase"/>Working Specialty</span>

This is what gets rendered:

<span>
    <span aria-hidden="true" class="fa fa-briefcase"></span>
    <!-- react-text: 41 -->Working Specialty<!-- /react-text -->
</span>

Am I missing something? No Icon shows up.

React v15.5.0 createClass warning.

Description

When running my personal project, this warning is dispatching:

Warning: FontAwesome: React.createClass is deprecated and will be removed in version 16. Use plain JavaScript classes instead. If you're not yet ready to migrate, create-react-class is available on npm as a drop-in replacement.

I am googled a bit and I found the React v15.5.0 blog post.

Basically, is need to make this:

-import React, { Component, PropTypes } from 'react'
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';

It has the React-PropTypes-to-prop-types codemods but, it seems that does not migrate the PropTypes of stateless components.

To install the codemods, follow the following steps:

npm install -g jscodeshift
git clone https://github.com/reactjs/react-codemod.git (inside the root of the project)
cd react-codemod && npm install

To run the migration is:

jscodeshift -t react-codemod/transforms/class.js <path>
As described in Migrating from React.createClass section.

Title not appearing in Chrome

Sometimes it's helpful to put title's on icons to provide helpful tips on hover. I just realized react-fontawesome doesn't support the title attribute.

Issue with React.Portal ?

I'm trying to make a sign in button like in this code:

renderSignInButton() {
        const { credentials, dispatch, profile, t } = this.props;
        const { token } = credentials;

        if (token) {
            if (profile.isFetching) {
                return (
                    <button type="button" disabled>
                        <FontAwesomeIcon icon={faSpinner} spin />
                        {t('form:signIn.state.isFetching')}
                    </button>
                );
            }

            return (
                <button type="button" onClick={() => dispatch(signOut())}>
                    <FontAwesomeIcon icon={faSignOutAlt} />
                    {t('form:signIn.button.signOut')}
                </button>
            );
        }

        return (
            <button type="button">
                <FontAwesomeIcon icon={faSignInAlt} />
                {t('form:signIn.button.default')}
            </button>
        );
    }

But when the props are updated and the button is rerendered with a different icon, the code differs from the page:

You see, the React Dev Tools is showing faSignOutAlt and faSpinner icon is displayed on the page.

I'm using React.Portal feature to render this button.
Don't know what to do.

How do I use this exactly?

Hello,

I have trouble getting this to work (I'm new to react so probably I'm missing something obvious).
I installed the lib via npm, declared in package.json and imported in my react class, like this:

The render method this:

The code compiles, my other elements render, but I see no icon rendered on the page.
Any help would be appreciated.

Best regards,
Mihai

Use by css pseudo way

Hello,

I just wanted to use the library like the normal css pseudo way.
For example:
.demo:after { content: ' \f2b4 '; font-family: "FontAwesome"; }

The problem is do I have to add css link in the head?
Is there a way that can be done without doing that? I am implementing react components outside of the whole project and I think it is the best if the components don't depend on files in other place.

Thank you.

Unknown prop on tag

Hello! Thanks for this module, it's great! I have just one minor issue, which is that if I use any of the special params like spin, stack, pulse, etc, I get the following warning in my browser console:

<FontAwesome name='cutlery' spin />

Warning: Unknown prop `spin` on <span> tag. Remove this prop from the element. For details, see https://fb.me/react-unknown-prop
    in span (created by FontAwesome)
    in FontAwesome (created by xyz)

I can work around this by doing the following:

<FontAwesome name='cutlery' className='fa-spin' />

...but that's a bummer, since the nicer syntax is half the reason to use this module. Seems like you could solve this by stripping all non-HTML-friendly properties from the provided ones before passing along to the tag. Thoughts?

Unable to view rendered icon

Hi,
I installed react-fontawesome via npm and imported it into my React app. When I run the app I see the HTML render, but there's no ICON. Looking at web developer tools in Chrome I also don't see any CSS assignments nor a font-awesome css call in the network tab.

import FontAwesome from 'react-fontawesome';

<FontAwesome name='facebook' />

How to use the cssModule prop?

Hi There,

Can't seem to figure out how to get this working with css modules, can you give me some more info then there is already on the api docs page?

Regards,

Robbert

Icon names do not match website

Hi there,

I've been trying to use your component, which is working beautifully. Thanks for that.

My problem is, I have to guess 1000 the name of the icon until I get it right, could they match the naming in the font-awesome website? If not, where can I get a list of names and icons? This guessing game is taking way too much development time from me.

Cheers,
Cai

icon does not change with state change

I have very basic icon: a folder that should open or close depending on whether or not the item is active. My code looks like <FontAwesome className="fal fa-lg" name={this.props.active ? "folder-open" : "folder"}/> This results in the correct icon being rendered the first time, but when another item is activated, the icons do not change.

size with a decimal?

I'm having issues doing size='1.5x'. It seems onlysize='1x' or size='2x' is working. Are decimals not possible?

Icon picker

Nice work! I think an icon picker would be a fine addition to this library (like this one: http://mjolnic.com/fontawesome-iconpicker/)

Add Css Modules to readme

In favor of issue #56 add information about usage of Css Modules to the readme

'icon-' prefix?

Have an issue with some legacy CSS that uses the older FontAwesome 3.x names for icons: icon icon-* etc.

Aside from forking the component, is there a way to easily config or extend this component to use the 'icon' in place of 'fa'?

Consider using aria?

Hi,

Would be awesome if accessibility features were wrapped as well. That is using aria-hidden=true and providing a prop to pass an alternate text to put either in an aria-label or a hidden .

Thanks!

EDIT: I can make a PR for this if you are ok for a review and eventual merge.

Cant use brands

<FontAwesome name="react"/> no longer appears to work

it uses class fa fa-react when in Font Awesome 5 it should be fab fab-react

Font Awesome 5 compatibility

Font Awesome 5 is out and change a bit the class names.

React.createClass is deprecated

Getting warnings:

Warning: FontAwesome: React.createClass is deprecated and will be removed in version 16. Use plain JavaScript classes instead. If you're not yet ready to migrate, create-react-class is available on npm as a drop-in replacement.

most of the icons don't work anymore

hello I think all the icons will not work anymore as FA upgraded to V5, the old components use fa as prefix while the new one uses fab

is there any ready solution for this!

thanks

Spin counter-clockwise

I believe spin spins the icon in a clockwise manner. Any option to spin counter-clockwise?

1.5.0 Error Rendering

I haven't dug into the details, but on a basic:

ReactDOM.render(
    <FontAwesome name="twitter" />,
    document.getElementById("root")
);

I am getting:

VM2236 react.js:3639Warning: React.createElement: type should not be null, undefined, boolean, or number. It should be a string (for DOM elements) or a ReactClass (for composite components).

Not working with React 15.3.2

Warning: React.createElement: type should not be null, undefined, boolean, or number. It should be a string (for DOM elements) or a ReactClass (for composite components).

Navigation.js

import React from 'react';
import { Link } from 'react-router';
import Image from './tags/Image';
import { FontAwesome as Icon } from 'react-fontawesome';

const Navigation = () => {
    return (
        <nav className="nav primary">
            <Link className="logo" to="/dashboard">
                <Icon
                                       className="icon"
                    name="rocket"
                    size="2x"
                    spin
                />
                <Image src="/images/logo.png" />
            </Link>
            <Link activeClassName="active" to="/users">Users</Link>
            <Link activeClassName="active" to="/transactions">Transactions</Link>
            <Link className="logout" activeClassName="active" to="/logout">Logout</Link>
        </nav>
    );
};

export default Navigation;

Relax the dependecies

So, I'm trying to install it on Reactjs 0.13.2, but:

the package react does not satisfy its siblings' peerDependencies requirements!
npm ERR! peerinvalid Peer [email protected] wants react@~0.11.2
npm ERR! peerinvalid Peer [email protected] wants [email protected]

changelog v1

don't see any breaking changes for v1 from the git commit log but would be nice if you updated https://github.com/danawoodman/react-fontawesome/blob/master/changelog.md

thanks!

Feature request - add support for title attribute ?

It would be nice if this were supported.
Would you be prepared to accept a PR with this in?

Best way to handle color change on hover?

I tried adding a class with css hover effects, but didn't seem to work. Is there another way?

Adds two fa-fa class ?

Hi,

This is happening recently where the font-awesome icons are displayed as flag, while i inspect i see react-fontawesome adds two more fa-fa class.

Details below,

Inspected tag
Actual Code
Shrinkwrap React Fontawesome version
Package.json version

React.PropTypes validation warning

started throwing Don't Call PropTypes Warning referencing this change in react

Displaying with no dimensions

I feel like this is an ignorant question, but I can't seem to get react-fontawesome working correctly.

As you'll see from this screenshot, the expected  with fa fa-search classes resulting from my <FontAwesome /> component does show up in the DOM tree in my Chrome devtools. However, Chrome displays it as having dimensions of 0 x 0, even if I try to force it to have a determinate width and height.

I'm inside a create-react-app, and the component in question looks like this:

ControlPanel.js

import React, { Component } from 'react';
import FontAwesome from 'react-fontawesome';

import './ControlPanel.css';

export default class ControlPanel extends Component {
  render() {
    return (
      <div className='control-panel'>
        <FontAwesome
          name='search'
          size='2x'
          style={{ textShadow: '0 1px 0 rgba(0, 0, 0, 0.1)' }}
        />
        <input
          className='control-panel-filter'
          type='text'
          placeholder='search'
          onChange={this.props.handleQuery} />
      </div>
    );
  }
}

package.json

{
  "name": "experiment-6-18",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "classnames": "^2.2.5",
    "react": "15.6.1",
    "react-dom": "15.6.1",
    "react-fontawesome": "^1.6.1",
    "react-router-dom": "^4.1.2"
  },
  "devDependencies": {
    "react-scripts": "1.0.7"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }
}

Please update to Font-Awesome 5

1.4.0 breaks everything in our Material-UI project

More details if we figure anything else out -- just verified that updating this package is what breaks our project:

Update "react-fontawesome" in package.json from 1.3.1 to 1.4.0? Yes

on 1.0+, the npm builds do not always quote 'default' as a key which causes errors on IE8

In the build, compare this line:

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

to this line:

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }

The second example is from line 9 of the 0.3.3 release and works as expected.

Stacked Icons

How do you do stacked icons?

Icons don't display

In my hands, after doing an install with:

npm install --save react-fontawesome

I am not able to see any icons by including something like this in one of my views:

<FontAwesome name='bars' />

unless I also include Font Awesome's CDN .js in the tag, ala:

<script src="https://use.fontawesome.com/3bd7769ce1.js"></script>

Are there any other installation steps required beyond the npm package? Or is this a bug?

I'm using React 0.15 with react-fontawesome 1.1.0.

Seems to require css file

I had the impression that we wouldn't need to depend on a css file however without it nothing gets rendered on my component.

What's the differences with react-fa?

https://github.com/andreypopp/react-fa

Problem stacking icons

From the Font Awesome examples: http://fontawesome.io/examples/

<span class="fa-stack fa-lg">
  <i class="fa fa-circle fa-stack-2x"></i>
  <i class="fa fa-flag fa-stack-1x fa-inverse"></i>
</span>

this does not seem to work:

<FontAwesome name='stack' size='lg'>
  <FontAwesome name='circle' stack='2x' tag="i" />
  <FontAwesome name='flag' inverse stack='1x' tag="i" />
</FontAwesome>

The returned element is:

<span aria-hidden="true" class="fa fa-stack fa-lg"></span>

Is this a bug or am I doing something wrong?

Icons are not appearing

I've gone through all the process and also linked the font-awesome css in my "index.html" which is mentioned in Readme file. But still, icons are not appearing.

Icon is rendered successfully and i can see that in DOM -


Using react version 15.6.1 and react-fontawesome version 1.6.1

Thanks!

Font awesome 5 integration

NavDropdown html in title

The fact that the NavDropdown text is in the property "title" makes impossible to render plain html or react components inside it (a fontawesome icon in my case)
Is this possible to fix that ?
This was possible with the original bootstrap element in plain html

Got error when npm run test.

 1) react-fontawesome
       "before all" hook:
     TypeError: require(...).env is not a function
      at Context.<anonymous> (node_modules\mocha-jsdom\index.js:52:22)

Anybody tried?

Error: Not supported on windows

Hi,
I'm getting this when trying to install your module:

Any suggestions?

Font Awesome 4.7

Hi,
Will you update to font Awesome 4.7 which was release in April?
if so, when do you expect to have it ready ?
Thank your for your Awesome work. :)

Tests are failing because of React 15

The split between React and ReactDOM added warnings in 0.14 and became an actual error in 15. I'll send a small PR shortly.

Change style of the font

Hi, thank you so much for making this. I'm wondering if it is possible to use the style regular instead of the default solid one.

AriaLabel Prop is Effectively Broken

React-fontawesome provides an ariaLabel prop, which provides a fallback label for the visual icon that screenreaders should announce (instead of the unicode character that is rendered).

The current implementation attempts to accomplish this by adding a visually hidden  for screenreaders will find and read.

This does not work, however, as said span is nested within a parent element that has a non-configurable aria-hidden attribute on it. As aria-hidden hides the element and all of its contents from screenreaders, this visually hidden span will never be found.

This can be seen by running a project that uses react-fontawesome, turning on a screenreader (on macOS, this can be done by pressing command + F5 to turn on Voiceover) and navigating through page content to reach instances of this component’s usage (eg. If using Voiceover, pressing tab or ctrl + alt + ←/→).

Title prop would be extremely useful

ie. for having a description for a warning or error etc.

Using a wrapper for the title prop sure works but it's not very elegant and produces unnecessary clutter.