danawoodman / react-fontawesome Goto Github PK
View Code? Open in Web Editor NEWA React Font Awesome component.
Home Page: https://www.npmjs.com/package/react-fontawesome
License: MIT License
A React Font Awesome component.
Home Page: https://www.npmjs.com/package/react-fontawesome
License: MIT License
Nice work! I think an icon picker would be a fine addition to this library (like this one: http://mjolnic.com/fontawesome-iconpicker/)
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 -
<span aria-hidden="true" class="fa fa-rocket fa-3x"></span>
Using react version 15.6.1 and react-fontawesome version 1.6.1
Thanks!
Is there something like the title
attribute of the img
html tag. Or something where to write a short description?
Thanks
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 <span>
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"
}
}
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?
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
<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
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.
started throwing Don't Call PropTypes Warning referencing this change in react
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>
It would be nice if this were supported.
Would you be prepared to accept a PR with this in?
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 <span>
.
Thanks!
EDIT: I can make a PR for this if you are ok for a review and eventual merge.
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!
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.
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?
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?
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
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.
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.
I had the impression that we wouldn't need to depend on a css file however without it nothing gets rendered on my component.
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'?
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.
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.
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;
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.
How do you do stacked icons?
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 <span>
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 + ←/→).
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
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.
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' />
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. :)
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
I tried adding a class with css hover effects, but didn't seem to work. Is there another way?
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).
I believe spin spins the icon in a clockwise manner. Any option to spin counter-clockwise?
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.
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.
Font Awesome 5 is out and change a bit the class names.
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
I'm having issues doing size='1.5x'
. It seems onlysize='1x'
or size='2x'
is working. Are decimals not possible?
In favor of issue #56 add information about usage of Css Modules to the readme
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
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.
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.
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]
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.