react-fontawesome - npm Package Compare versions

Comparing version 1.6.1 to 1.7.0

lib/index.js

@@ -19,6 +19,2 @@ 'use strict';
 
-var _screenReaderStyles = require('./screen-reader-styles');
-
-var _screenReaderStyles2 = _interopRequireDefault(_screenReaderStyles);
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -43,4 +39,4 @@
  * @param {String} [flip=false] Flip the icon's orientation.
- * @param {Boolean} [inverse=false]Inverse the icon's color
- * @param {String} name Name of the icon to use
+ * @param {Boolean} [inverse=false] Inverse the icon's color
+ * @param {String} [name] Name of the icon to use
  * @param {Boolean} [pulse=false] Rotate icon with 8 steps, rather than smoothly
@@ -50,3 +46,3 @@ * @param {Number} [rotate] The degress to rotate the icon by
  * @param {Boolean} [spin=false] Spin the icon
- * @param {String} [stack] Stack an icon on top of another
+ * @param {String} [stack] Stack an icon on top of another. Arguments specify z-index such as '1x' See documentation for example http://fontawesome.io/examples/#stacked
  * @param {String} [tag=span] The HTML tag to use as a string, eg 'i' or 'em'
@@ -89,2 +85,3 @@ * @module FontAwesome
 
+      var ariaProps = ariaLabel ? { 'aria-label': ariaLabel } : { 'aria-hidden': true };
       var classNames = [];
@@ -120,3 +117,5 @@
       className && classNames.push(className);
-      return _react2.default.createElement(tag, _extends({}, props, { 'aria-hidden': true, className: classNames.join(' ') }), ariaLabel ? _react2.default.createElement('span', { style: _screenReaderStyles2.default }, ariaLabel) : null);
+      return _react2.default.createElement(tag, _extends({}, props, ariaProps, {
+        className: classNames.join(' ')
+      }));
     }
@@ -123,0 +122,0 @@ }]);

package.json

 {
   "name": "react-fontawesome",
-  "version": "1.6.1",
+  "version": "1.7.0",
   "description": "A React component for the font-awesome icon library.",
@@ -9,3 +9,3 @@ "repository": {
   },
-  "bujs": {
+  "bugs": {
     "url": "https://github.com/danawoodman/react-fontawesome/issues"
@@ -18,3 +18,3 @@ },
     "docs": "jsdoc2md lib/index.js > api.md",
-    "format": "prettier-eslint '{src,test}/**/*.js' --prettier.single-quote --prettier.no-semi es5 --write",
+    "format": "prettier-eslint '{src,test}/**/*.js' --single-quote --no-semi es5 --write",
     "test": "mocha",
@@ -49,21 +49,20 @@ "watch": "npm run watch-build & npm run watch-test",
     "babel-core": "^6.7.4",
-    "babel-plugin-add-module-exports": "^0.2.1",
+    "babel-plugin-add-module-exports": "1.0.2",
     "babel-preset-es2015": "^6.6.0",
     "babel-preset-react": "^6.5.0",
     "babel-preset-stage-2": "^6.5.0",
-    "chai": "^3.2.0",
-    "eslint": "^3.19.0",
+    "chai": "4.2.0",
+    "eslint": "6.6.0",
     "eslint-plugin-nodeca": "^1.0.3",
-    "eslint-plugin-react": "^6.10.3",
-    "jsdoc-to-markdown": "^3.0.0",
-    "jsdom": "^9.12.0",
-    "mocha": "^3.2.0",
-    "mocha-jsdom": "^1.0.0",
+    "eslint-plugin-react": "7.16.0",
+    "jsdoc-to-markdown": "5.0.2",
+    "mocha": "6.2.2",
+    "mocha-jsdom": "2.0.0",
     "mocha-sinon": "^2.0.0",
-    "prettier-eslint": "^5.1.0",
-    "prettier-eslint-cli": "^3.4.1",
-    "react": "^15.0.1",
-    "react-dom": "^15.0.1",
-    "sinon": "^2.1.0",
-    "sinon-chai": "^2.8.0"
+    "prettier-eslint": "9.0.0",
+    "prettier-eslint-cli": "5.0.0",
+    "react": "16.11.0",
+    "react-dom": "16.11.0",
+    "sinon": "7.5.0",
+    "sinon-chai": "3.3.0"
   },
@@ -70,0 +69,0 @@ "homepage": "https://github.com/danawoodman/react-fontawesome#readme",

readme.md

@@ -11,52 +11,96 @@ # react-fontawesome
 
+**If you are using Font Awesome v5+, please use [the official React component!](https://github.com/FortAwesome/react-fontawesome). `react-fontawesome` does not support FontAwesome v5!**
 
 ## Install
 
-```
+```bash
 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](https://www.bootstrapcdn.com/fontawesome/)._
 
+
+### Using CDN version
+
+The fastest way to get started is to import FontAwesome with a link tag in your page's `<head>`:
+
+```html
+<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](https://medium.com/@chanonroy/webpack-2-and-font-awesome-icon-importing-59df3364f35c) on how to get Webpack and FontAwesome working together.
+
 ## Usage
 
 ```js
-var React = require('react');
-var FontAwesome = require('react-fontawesome');
+var React = require('react')
+var FA = require('react-fontawesome')
 
-React.render(<FontAwesome name='rocket' />, document.body);
+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](#API) below).
-- Add your own `className`s, styles and other props (all additional props are passed directly to the component).
+* No dependencies (other than React)
+* Simple API that mirrors Font Awesome's class names.
+* Supports all Font Awesome modifiers (see [API](#API) below).
+* Make use of Css Modules
+* Add your own `className`s, styles and other props (all additional props are passed directly to the component).
 
-*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](https://www.bootstrapcdn.com/fontawesome/).*
+## Examples
 
+**Regular usage**
 
-## Examples
+```js
+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**
+
 ```js
-var React = require('react');
-var FontAwesome = require('react-fontawesome');
+import React from 'react'
+import FontAwesome from 'react-fontawesome'
+import faStyles from 'font-awesome/css/font-awesome.css'
 
 var MyComponent = React.createClass({
-  render: function () {
+  render: function() {
     return (
       <FontAwesome
-        className='super-crazy-colors'
-        name='rocket'
-        size='2x'
+        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
@@ -66,6 +110,5 @@
 
-
 ## Contributing
 
-Pull requests welcome! 
+Pull requests welcome!
 
@@ -76,3 +119,2 @@ 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.
 
-
 ## License
@@ -82,3 +124,2 @@
 
-
 [author]: https://github.com/danawoodman

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Mixed license

License

(Experimental) Package contains multiple licenses.

Found 1 instance in 1 package

No bug tracker

Maintenance

Package does not have a linked bug tracker in package.json.

Found 1 instance in 1 package

Improved metrics

Dev dependency count

20

decreased by-4.76%

Number of low license alerts

0

decreased by-100%

Number of low maintenance alerts

0

decreased by-100%

Number of lines in readme file

122

increased by50.62%

Worsened metrics

Total package byte prevSize

16072

decreased by-89.17%

Number of package files

7

decreased by-53.33%

Lines of code

118

decreased by-31.4%

No dependency changes