✨ change number of svg path on icon

unirakun · Oct 17, 2017 · 2d299eb · 2d299eb
1 parent 11ed1fb
commit 2d299eb
Show file tree

Hide file tree

Showing 5 changed files with 95 additions and 6 deletions.
diff --git a/lib/icon/icon.js b/lib/icon/icon.js
@@ -49,6 +49,7 @@ var Icon = function Icon(_ref) {
       disabled = _ref.disabled,
       prefix = _ref.prefix,
       title = _ref.title,
+      nbPath = _ref.nbPath,
       iconColor = _ref.iconColor;
 
   var classes = (0, _classnames3.default)(_iconStyles2.default.icon, className, (_classnames = {}, _defineProperty(_classnames, _iconStyles2.default.primary, primary), _defineProperty(_classnames, _iconStyles2.default.secondary, secondary), _defineProperty(_classnames, _iconStyles2.default.disabled, disabled), _defineProperty(_classnames, _iconStyles2.default.inheritColor, !iconColor), _classnames));
@@ -60,7 +61,7 @@ var Icon = function Icon(_ref) {
   var iconComponent = _react2.default.createElement(
     'i',
     { name: iconCode, className: iconCode, title: title },
-    Array.from(new Array(13), function (x, i) {
+    Array.from(new Array(nbPath), function (x, i) {
       return i + 1;
     }).map(function (i) {
       return _react2.default.createElement('span', { key: i, className: 'path' + i });
@@ -91,7 +92,8 @@ Icon.propTypes = {
   secondary: _propTypes2.default.bool,
   disabled: _propTypes2.default.bool,
   iconColor: _propTypes2.default.bool,
-  title: _propTypes2.default.string
+  title: _propTypes2.default.string,
+  nbPath: _propTypes2.default.number
 };
 
 Icon.defaultProps = {
@@ -103,7 +105,7 @@ Icon.defaultProps = {
   secondary: false,
   disabled: false,
   iconColor: false,
-  title: undefined
-};
+  title: undefined,
+  nbPath: 13 };
 
 exports.default = (0, _recompose.onlyUpdateForPropTypes)(Icon);
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "kriya",
-  "version": "2.3.0",
+  "version": "2.4.0",
   "main": "index.js",
   "description": "Kriya is a react/redux components library",
   "license": "MIT",

diff --git a/src/icon/__snapshots__/icon.spec.js.snap b/src/icon/__snapshots__/icon.spec.js.snap
@@ -269,6 +269,89 @@ exports[`common/Icon graphical (JSX) should add custom style 1`] = `
 </div>
 `;
 
+exports[`common/Icon graphical (JSX) should change number of path to 23 1`] = `
+<div
+  className="icon inheritColor"
+  style={Object {}}
+>
+  <i
+    className="aprefix-icon"
+    name="aprefix-icon"
+    title={undefined}
+  >
+    <span
+      className="path1"
+    />
+    <span
+      className="path2"
+    />
+    <span
+      className="path3"
+    />
+    <span
+      className="path4"
+    />
+    <span
+      className="path5"
+    />
+    <span
+      className="path6"
+    />
+    <span
+      className="path7"
+    />
+    <span
+      className="path8"
+    />
+    <span
+      className="path9"
+    />
+    <span
+      className="path10"
+    />
+    <span
+      className="path11"
+    />
+    <span
+      className="path12"
+    />
+    <span
+      className="path13"
+    />
+    <span
+      className="path14"
+    />
+    <span
+      className="path15"
+    />
+    <span
+      className="path16"
+    />
+    <span
+      className="path17"
+    />
+    <span
+      className="path18"
+    />
+    <span
+      className="path19"
+    />
+    <span
+      className="path20"
+    />
+    <span
+      className="path21"
+    />
+    <span
+      className="path22"
+    />
+    <span
+      className="path23"
+    />
+  </i>
+</div>
+`;
+
 exports[`common/Icon graphical (JSX) should create a disabled icon 1`] = `
 <div
   className="icon disabled inheritColor"

diff --git a/src/icon/icon.jsx b/src/icon/icon.jsx
@@ -12,6 +12,7 @@ const Icon = ({
   primary, secondary, disabled,
   prefix,
   title,
+  nbPath,
   iconColor, /* set to true to print the native icon color */
 }) => {
   const classes = classnames(
@@ -32,7 +33,7 @@ const Icon = ({
   const iconComponent = (
     <i name={iconCode} className={iconCode} title={title}>
       {
-        Array.from(new Array(13), (x, i) => i + 1)
+        Array.from(new Array(nbPath), (x, i) => i + 1)
           .map(i => <span key={i} className={`path${i}`} />)
       }
     </i>
@@ -63,6 +64,7 @@ Icon.propTypes = {
   disabled: PropTypes.bool,
   iconColor: PropTypes.bool,
   title: PropTypes.string,
+  nbPath: PropTypes.number,
 }
 
 Icon.defaultProps = {
@@ -75,6 +77,7 @@ Icon.defaultProps = {
   disabled: false,
   iconColor: false,
   title: undefined,
+  nbPath: 13, /* choose arbitrary */
 }
 
 export default onlyUpdateForPropTypes(Icon)
diff --git a/src/icon/icon.spec.js b/src/icon/icon.spec.js
@@ -26,6 +26,7 @@ describe('common/Icon', () => {
     it('should take a prefix', snapshot({ children: 'myIcon', prefix: 'myPrefix-' }))
     it('should have a default behaviour', snapshot({}))
     it('should add a title', snapshot({ title: 'a title' }))
+    it('should change number of path to 23', snapshot({ nbPath: 23 }))
   })
 
   describe('container', () => {