react-svg-icon - npm Package Compare versions

Comparing version 1.0.0 to 2.0.0

lib/components/__tests__/Icon-test.js

 'use strict';
 
+var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ('value' in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();
+
+var _get = function get(_x, _x2, _x3) { var _again = true; _function: while (_again) { var object = _x, property = _x2, receiver = _x3; desc = parent = getter = undefined; _again = false; if (object === null) object = Function.prototype; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { _x = parent; _x2 = property; _x3 = receiver; _again = true; continue _function; } } else if ('value' in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } } };
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
 
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== 'function' && superClass !== null) { throw new TypeError('Super expression must either be null or a function, not ' + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
 var _react = require('react');
@@ -23,3 +31,25 @@
 
-/* eslint func-names:0 */
+// eslint-disable-next-line react/prefer-stateless-function
+
+var IconWrapper = (function (_React$Component) {
+  _inherits(IconWrapper, _React$Component);
+
+  function IconWrapper() {
+    _classCallCheck(this, IconWrapper);
+
+    _get(Object.getPrototypeOf(IconWrapper.prototype), 'constructor', this).apply(this, arguments);
+  }
+
+  /* eslint func-names:0 */
+
+  _createClass(IconWrapper, [{
+    key: 'render',
+    value: function render() {
+      return _react2['default'].createElement(_index2['default'], this.props);
+    }
+  }]);
+
+  return IconWrapper;
+})(_react2['default'].Component);
+
 describe('Icon', function () {
@@ -30,3 +60,3 @@ var item = undefined;
   beforeEach(function () {
-    item = _reactAddonsTestUtils2['default'].renderIntoDocument(_react2['default'].createElement(_index2['default'], { name: 'rocket', className: 'i--red' }));
+    item = _reactAddonsTestUtils2['default'].renderIntoDocument(_react2['default'].createElement(IconWrapper, { name: 'rocket', className: 'i--red' }));
     svg = _reactDom2['default'].findDOMNode(item);
@@ -54,3 +84,3 @@ });
   beforeEach(function () {
-    item = _reactAddonsTestUtils2['default'].renderIntoDocument(_react2['default'].createElement(_index2['default'], { name: 'rocket' }));
+    item = _reactAddonsTestUtils2['default'].renderIntoDocument(_react2['default'].createElement(IconWrapper, { name: 'rocket' }));
     svg = _reactDom2['default'].findDOMNode(item);
@@ -60,3 +90,3 @@ });
   it('should have just "i" class', function () {
-    (0, _chai.expect)(svg.className.baseVal).to.equal('i');
+    (0, _chai.expect)(svg.className.baseVal).to.equal('i ');
   });
@@ -63,0 +93,0 @@

lib/components/Icon.js

@@ -13,36 +13,25 @@ 'use strict';
 
-exports['default'] = _react2['default'].createClass({
+var Icon = function Icon(_ref) {
+  var name = _ref.name;
+  var title = _ref.title;
+  var className = _ref.className;
+  return _react2['default'].createElement(
+    'svg',
+    { className: 'i ' + (className || ''), 'aria-labelledby': title ? 'svgtitle_' + name : null },
+    title ? _react2['default'].createElement(
+      'title',
+      { id: 'svgtitle_' + name },
+      title
+    ) : null,
+    _react2['default'].createElement('use', { xlinkHref: '#i-' + name })
+  );
+};
 
-  displayName: 'Icon',
+Icon.propTypes = {
+  name: _react2['default'].PropTypes.string.isRequired,
+  title: _react2['default'].PropTypes.string,
+  className: _react2['default'].PropTypes.string
+};
 
-  propTypes: {
-    name: _react2['default'].PropTypes.string.isRequired,
-    title: _react2['default'].PropTypes.string,
-    className: _react2['default'].PropTypes.string
-  },
-
-  render: function render() {
-    var _props = this.props;
-    var name = _props.name;
-    var title = _props.title;
-    var className = _props.className;
-
-    var classNames = ['i'];
-    if (className) {
-      classNames.push(className);
-    }
-
-    return _react2['default'].createElement(
-      'svg',
-      { className: classNames.join(' '), 'aria-labelledby': title ? 'svgtitle_' + name : null },
-      title ? _react2['default'].createElement(
-        'title',
-        { id: 'svgtitle_' + name },
-        title
-      ) : null,
-      _react2['default'].createElement('use', { xlinkHref: '#i-' + name })
-    );
-  }
-
-});
+exports['default'] = Icon;
 module.exports = exports['default'];

package.json

 {
   "name": "react-svg-icon",
-  "version": "1.0.0",
-  "description": "React SVG icon component",
+  "version": "2.0.0",
+  "description": "SVG icon component for React",
   "main": "./lib/index.js",
@@ -22,12 +22,9 @@ "repository": {
   "peerDependencies": {
-    "react": "^0.14.3 || ^15.0.0-0"
+    "react": "^0.14.3 || ^15.0.0"
   },
-  "tags": [
-    "react",
-    "svg",
-    "icon"
-  ],
   "keywords": [
+    "reactjs",
     "react",
     "react-component",
+    "component",
     "svg",
@@ -34,0 +31,0 @@ "icon",

README.md

@@ -1,38 +0,66 @@
-# React SVG Icon [![npm](https://img.shields.io/npm/v/react-svg-icon.svg?style=flat-square)](https://www.npmjs.com/package/react-svg-icon) [![Build Status](https://travis-ci.org/springload/react-svg-icon.svg?branch=master)](https://travis-ci.org/springload/react-svg-icon) [![devDependency Status](https://david-dm.org/springload/react-svg-icon/dev-status.svg)](https://david-dm.org/springload/react-svg-icon#info=devDependencies)
+[react-svg-icon](https://springload.github.io/react-svg-icon/) [![npm](https://img.shields.io/npm/v/react-svg-icon.svg?style=flat-square)](https://www.npmjs.com/package/react-svg-icon) [![Build Status](https://travis-ci.org/springload/react-svg-icon.svg?branch=master)](https://travis-ci.org/springload/react-svg-icon) [![devDependency Status](https://david-dm.org/springload/react-svg-icon/dev-status.svg)](https://david-dm.org/springload/react-svg-icon#info=devDependencies)
+=====================
 
-React SVG icon component
+> SVG icon component for React. [Demo](https://springload.github.io/react-svg-icon/)
 
 ## Inline SVG assets
 
-Create your SVG sprite and inline them at the start of you HTML document. There's a nice tutorial on how to do this on [CSS-Tricks](https://css-tricks.com/svg-sprites-use-better-icon-fonts/)
+Create your SVG sprite and inline them at the start of you HTML document. There's a nice tutorial on how to do this on [CSS-Tricks](https://css-tricks.com/svg-sprites-use-better-icon-fonts/).
 
-## Commands
+## Installation
 
-You need `rackt-cli v0.5.3` to execute some of these commands.
+`npm install --save react-svg-icon`
 
+## Usage
+
+```jsx
+import Icon from 'react-svg-icon';
+
+<Icon name='icon-name' className='optional-class' />
+
+// Optionally, use a title to add an accessible label
+<Icon name='icon-name' title="Icon label" />
+```
+
+## Contributing
+
+### Install / useful commands
+
+You need `npm install -g rackt-cli@0.5.4` to execute some of these commands.
+
 - `npm install` install node dependencies
-- `npm start` run server
-- `npm test` run tests
-- `npm build` build component
+- `npm run start` run server
+- `npm run test` run tests
+- `npm run build` build component
+- `npm run lint` lint the JS code
+- `rackt release` publish component to npm (verify version in package.json)
 - `rackt pages` rebuild gh-pages branch
 
+### Guidelines
 
-## Include your icon component
+- Use pull requests to collaborate around new changes
+- Document changes in the project's [CHANGELOG](CHANGELOG.md)
 
-```js
-import Icon from 'react-svg-icon';
+## LICENSE
 
-<Icon name='icon-name' className='icon-class' />
-```
+The MIT License (MIT)
 
-## Example
+Copyright (c) 2016 Springload
 
-You can find an example here: https://springload.github.io/react-svg-icon/
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
 
-## Contributing
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
 
-Have a look at [our contribution guidelines](CONTRIBUTING.md).
-
-### Releasing a new version
-
-Use `rackt release`
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

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

Improved metrics

Total package byte prevSize

9307

increased by64.61%

Lines of code

106

increased by17.78%

Number of lines in readme file

67

increased by71.79%

No dependency changes