@nutui/nutui-react 1.2.0-beta.4 → 1.2.1-beta.1

package/CHANGELOG.md

@@ -1,3 +1,27 @@
+## v1.2.1
+`2022-08-03`
+
+* :sparkles: feat: video 视频组件 (#174)
+* :zap: feat: checkbox props 扩展
+* :zap: feat: tabs 能力补齐&单元测试 (#175)
+* :zap: feat(navbar): navbar组件能力补齐 (#177)
+* :zap: feat: input 组件新增 props (#173)
+* :bug: fix: elevator 组件props补全、新增单元测试、demo和文档多语言支持 (#180)
+* :bug: fix: 修改steps点击报错和eslint校验报错 (#179)
+* 📖docs: feat: timeselect 国际化支持
+* 📖docs: feat: vlist 国际化
+* 📖docs: feat: tag 增加在线调试能力
+* 📖docs: feat: badge 增加在线调试能力
+* 📖docs: fix: 修复 video 组件 demo 样式冲突
+* 📖docs: feat: noticebar、notify、range、textarea、toast组件增加在线编辑功能 (#190)
+* 📖docs: feat: price组件文档和demo国际化 (#191)
+* 📖docs: feat: vlist 国际化文档
+* 📖docs: feat: animatingnumbers 增加单元测试、文档和demo国际化支持、主题定制支持 (#189)
+* 📖docs: feat: divider组件增加国际化demo (#176)
+* 📖docs: feat: layout 增加在线调试，变量提取，依赖版本锁定 (#157)
+* 📖docs: chore: 在线调试增加scss支持
+
+
 ## v1.2.0
 `2022-07-27`
 

package/dist/esm/AnimatingNumbers.js

@@ -59,21 +59,19 @@ var CountUp = function CountUp(props) {
     if (countupRef.current) {
       var numberItems = countupRef.current.querySelectorAll('.nut-countup__number');
       var numberFilterArr = numerArr.filter(function (item) {
-        return !isNaN(item);
+        return !Number.isNaN(Number(item));
       });
+      Object.keys(numberItems).forEach(function (key) {
+        var elem = numberItems[Number(key)];
+        var idx = Number(numberFilterArr[Number(key)]);
 
-      for (var index in numberItems) {
-        if (!Object.prototype.hasOwnProperty.call(numberItems, index)) continue;
-        var elem = numberItems[Number(index)];
-        var idx = Number(numberFilterArr[Number(index)]);
-
-        if ((idx || idx == 0) && elem) {
+        if ((idx || idx === 0) && elem) {
           // 计算规则：父元素和实际列表高度的百分比，分割成20等份
-          var transform = "translate(0, -".concat((idx == 0 ? 10 : idx) * 5, "%)");
+          var transform = "translate(0, -".concat((idx === 0 ? 10 : idx) * 5, "%)");
           elem.style.transform = transform;
           elem.style.webkitTransform = transform;
         }
-      }
+      });
     }
   };
 
@@ -99,10 +97,10 @@ var CountUp = function CountUp(props) {
   }, numerArr.map(function (item, idx) {
     return React__default.createElement("li", {
       className: "".concat(b('listitem', {
-        number: !isNaN(item)
+        number: !Number.isNaN(Number(item))
       })),
       key: idx
-    }, !isNaN(item) ? React__default.createElement("span", {
+    }, !Number.isNaN(Number(item)) ? React__default.createElement("span", {
       className: b('number'),
       style: numberEaseStyle
     }, [].concat(numbers, numbers).map(function (number, subidx) {

package/dist/esm/BackTop.js

@@ -10,7 +10,7 @@ import Icon from './Icon.js';
 var defaultProps = {
   bottom: 20,
   right: 10,
-  elId: '',
+  elId: 'body',
   distance: 200,
   zIndex: 10,
   isAnimation: true,
@@ -29,7 +29,7 @@ var BackTop = function BackTop(props) {
       className = _defaultProps$props.className,
       duration = _defaultProps$props.duration,
       style = _defaultProps$props.style,
-      backTopClick = _defaultProps$props.backTopClick;
+      onClick = _defaultProps$props.onClick;
 
   var _useState = useState(false),
       _useState2 = _slicedToArray(_useState, 2),
@@ -87,12 +87,12 @@ var BackTop = function BackTop(props) {
 
   var scrollAnimation = function scrollAnimation() {
     var cid = requestAniFrame()(function fn() {
-      var t = duration - Math.max(0, startTime - +new Date() + duration);
+      var t = duration - Math.max(0, startTime - +new Date() + duration / 2);
       var y = t * -scrollTop / duration + scrollTop;
       scroll(y);
       cid = requestAniFrame()(fn);
 
-      if (t == duration || y == 0) {
+      if (t === duration || y === 0) {
         window.cancelAnimationFrame(cid);
       }
     });
@@ -127,7 +127,7 @@ var BackTop = function BackTop(props) {
 
 
   var goTop = function goTop(e) {
-    backTopClick(e);
+    onClick && onClick(e);
     var otime = +new Date();
     startTime = otime;
     isAnimation && duration > 0 ? scrollAnimation() : scroll();
@@ -141,7 +141,9 @@ var BackTop = function BackTop(props) {
   return React__default.createElement("div", {
     className: "nut-backtop ".concat(backTop ? 'show' : '', " ").concat(className || ''),
     style: _objectSpread(_objectSpread({}, backTopClass), style),
-    onClick: goTop
+    onClick: function onClick(e) {
+      goTop(e);
+    }
   }, children || React__default.createElement(Icon, {
     size: "19px",
     className: "nut-backtop-main",

package/dist/esm/Checkbox.js

@@ -1,7 +1,7 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-var _excluded = ["iconName", "iconSize", "label", "className", "textPosition", "iconActiveName", "checked", "disabled", "onChange"];
+var _excluded = ["iconName", "iconSize", "label", "className", "textPosition", "iconActiveName", "checked", "disabled", "onChange", "indeterminate", "iconClassPrefix", "iconFontClassName", "iconIndeterminateName", "getParentVals", "max"];
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
@@ -19,6 +19,9 @@ var defaultProps = {
   iconSize: 18,
   iconName: 'check-normal',
   iconActiveName: 'checked',
+  iconClassPrefix: 'nut-icon',
+  iconFontClassName: 'nutui-iconfont',
+  iconIndeterminateName: 'check-disabled',
   onChange: function onChange(state, label) {}
 };
 
@@ -37,6 +40,12 @@ var Checkbox = function Checkbox(props) {
       checked = props.checked,
       disabled = props.disabled,
       onChange = props.onChange,
+      indeterminate = props.indeterminate,
+      iconClassPrefix = props.iconClassPrefix,
+      iconFontClassName = props.iconFontClassName,
+      iconIndeterminateName = props.iconIndeterminateName,
+      getParentVals = props.getParentVals,
+      max = props.max,
       rest = _objectWithoutProperties(props, _excluded);
 
   var _useState = useState(checked),
@@ -49,21 +58,55 @@ var Checkbox = function Checkbox(props) {
       innerDisabled = _useState4[0],
       setDisabled = _useState4[1];
 
+  var _useState5 = useState(indeterminate),
+      _useState6 = _slicedToArray(_useState5, 2),
+      _indeterminate = _useState6[0],
+      setIndeterminate = _useState6[1];
+
   useEffect(function () {
     setInnerChecked(checked);
     setDisabled(disabled);
   }, [disabled, checked]);
+  useEffect(function () {
+    setIndeterminate(indeterminate);
+  }, [indeterminate]);
+
+  var getIconName = function getIconName() {
+    if (!innerChecked) {
+      return iconName;
+    }
+
+    if (_indeterminate) {
+      return iconIndeterminateName;
+    }
+
+    return iconActiveName;
+  };
 
   var renderIcon = function renderIcon() {
     return React__default.createElement(Icon, {
-      name: innerChecked ? iconActiveName : iconName,
+      name: getIconName(),
       size: iconSize,
-      color: color()
+      className: color(),
+      classPrefix: iconClassPrefix,
+      fontClassName: iconFontClassName
     });
   };
 
   var color = function color() {
-    return !innerDisabled ? !innerChecked ? '#d6d6d6' : '#fa2c19' : '#f5f5f5';
+    if (innerDisabled) {
+      return 'nut-checkbox__icon--disable';
+    }
+
+    if (innerChecked) {
+      if (_indeterminate) {
+        return 'nut-checkbox__icon--indeterminate';
+      }
+
+      return 'nut-checkbox__icon';
+    }
+
+    return 'nut-checkbox__icon--unchecked'; // return !innerDisabled ? (!innerChecked ? '#d6d6d6' : '#fa2c19') : '#f5f5f5'
   };
 
   var renderLabel = function renderLabel() {
@@ -71,13 +114,16 @@ var Checkbox = function Checkbox(props) {
       className: "".concat(b('label', {
         disabled: innerDisabled
       }), " ")
-    }, label || children);
+    }, children || label);
   };
 
   var handleClick = function handleClick() {
-    if (disabled) return;
-    onChange && onChange(!innerChecked, label || children);
-    return setInnerChecked(!innerChecked);
+    if (!disabled) {
+      var latest = !innerChecked;
+      if (max !== undefined && latest && getParentVals().length >= max) return;
+      onChange && onChange(latest, label || children);
+      setInnerChecked(latest);
+    }
   };
 
   return React__default.createElement("div", _objectSpread(_objectSpread({

package/dist/esm/CheckboxGroup.js

@@ -2,7 +2,7 @@ import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-var _excluded = ["className", "disabled", "onChange", "checkedValue"];
+var _excluded = ["className", "disabled", "onChange", "checkedValue", "max"];
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
@@ -14,6 +14,7 @@ import '@bem-react/classname';
 var defaultProps = {
   disabled: false,
   checkedValue: [],
+  max: undefined,
   onChange: function onChange(value) {}
 };
 var CheckboxGroup = React__default.forwardRef(function (props, ref) {
@@ -26,6 +27,7 @@ var CheckboxGroup = React__default.forwardRef(function (props, ref) {
       disabled = props.disabled,
       onChange = props.onChange,
       checkedValue = props.checkedValue,
+      max = props.max,
       rest = _objectWithoutProperties(props, _excluded);
 
   var _useState = useState(disabled),
@@ -41,18 +43,30 @@ var CheckboxGroup = React__default.forwardRef(function (props, ref) {
   useImperativeHandle(ref, function () {
     return {
       toggleAll: function toggleAll(state) {
-        console.log(state);
-
         if (state === false) {
           setInnerValue([]);
         } else {
           var childrenLabel = [];
           React__default.Children.map(children, function (child) {
             var childProps = child.props;
+            console.log(child);
             childrenLabel.push(childProps.label || child.children);
           });
           setInnerValue(childrenLabel);
         }
+      },
+      toggleReverse: function toggleReverse() {
+        var childrenLabel = [];
+        React__default.Children.map(children, function (child) {
+          var childProps = child.props;
+          childrenLabel.push(childProps.label || child.children);
+        });
+        var reverse = childrenLabel.filter(function (c) {
+          return (innerValue === null || innerValue === void 0 ? void 0 : innerValue.findIndex(function (v) {
+            return v === c;
+          })) === -1;
+        });
+        setInnerValue(reverse);
       }
     };
   });
@@ -62,6 +76,8 @@ var CheckboxGroup = React__default.forwardRef(function (props, ref) {
   }, [disabled, checkedValue]);
 
   function handleChildChange(state, label) {
+    if (max !== undefined && innerValue && innerValue.length > max) return;
+
     if (innerValue) {
       var clippedValue = [];
 
@@ -82,6 +98,10 @@ var CheckboxGroup = React__default.forwardRef(function (props, ref) {
     return (innerValue === null || innerValue === void 0 ? void 0 : innerValue.indexOf(child.props.label || child.children)) > -1;
   }
 
+  function getParentVals() {
+    return innerValue;
+  }
+
   function cloneChildren() {
     return React__default.Children.map(children, function (child) {
       var childChecked = validateChildChecked(child);
@@ -93,7 +113,9 @@ var CheckboxGroup = React__default.forwardRef(function (props, ref) {
       return React__default.cloneElement(child, {
         disabled: innerDisabled,
         checked: childChecked,
-        onChange: handleChildChange
+        onChange: handleChildChange,
+        getParentVals: getParentVals,
+        max: max
       });
     });
   }

package/dist/esm/Elevator.js

@@ -1,19 +1,23 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["height", "acceptKey", "indexList", "className", "clickItem", "clickIndex"];
+var _excluded = ["height", "acceptKey", "indexList", "isSticky", "spaceHeight", "titleHeight", "className", "clickItem", "clickIndex", "children"];
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
-import React__default, { useRef, useState, useEffect } from 'react';
+import React__default, { createContext, useRef, useState, useEffect } from 'react';
 import { c as cn } from './bem-893ad28d.js';
 import '@bem-react/classname';
+var elevatorContext = createContext({});
 var defaultProps = {
   height: '200px',
   acceptKey: 'title',
   indexList: [],
+  isSticky: false,
+  spaceHeight: 23,
+  titleHeight: 35,
   className: ''
 };
 
@@ -22,18 +26,24 @@ var Elevator = function Elevator(props) {
       height = _defaultProps$props.height,
       acceptKey = _defaultProps$props.acceptKey,
       indexList = _defaultProps$props.indexList,
+      isSticky = _defaultProps$props.isSticky,
+      spaceHeight = _defaultProps$props.spaceHeight,
+      titleHeight = _defaultProps$props.titleHeight,
       className = _defaultProps$props.className,
       clickItem = _defaultProps$props.clickItem,
       clickIndex = _defaultProps$props.clickIndex,
+      children = _defaultProps$props.children,
       rest = _objectWithoutProperties(_defaultProps$props, _excluded);
 
   var b = cn('elevator');
-  var spaceHeight = 23;
   var listview = useRef(null);
   var initData = {
     anchorIndex: 0,
     listHeight: [],
-    listGroup: []
+    listGroup: [],
+    scrollY: 0,
+    diff: -1,
+    fixedTop: 0
   };
   var touchState = useRef({
     y1: 0,
@@ -42,24 +52,42 @@ var Elevator = function Elevator(props) {
 
   var _useState = useState(0),
       _useState2 = _slicedToArray(_useState, 2),
-      currentIndex = _useState2[0],
-      setCurrentIndex = _useState2[1];
+      scrollY = _useState2[0],
+      setScrollY = _useState2[1];
 
-  var _useState3 = useState(false),
+  var _useState3 = useState({}),
       _useState4 = _slicedToArray(_useState3, 2),
-      scrollStart = _useState4[0],
-      setScrollStart = _useState4[1];
+      currentData = _useState4[0],
+      setCurrentData = _useState4[1];
+
+  var _useState5 = useState(''),
+      _useState6 = _slicedToArray(_useState5, 2),
+      currentKey = _useState6[0],
+      setCurrentKey = _useState6[1];
+
+  var _useState7 = useState(0),
+      _useState8 = _slicedToArray(_useState7, 2),
+      currentIndex = _useState8[0],
+      setCurrentIndex = _useState8[1];
+
+  var _useState9 = useState(0),
+      _useState10 = _slicedToArray(_useState9, 2),
+      codeIndex = _useState10[0],
+      setCodeIndex = _useState10[1];
+
+  var _useState11 = useState(false),
+      _useState12 = _slicedToArray(_useState11, 2),
+      scrollStart = _useState12[0],
+      setScrollStart = _useState12[1];
 
   var state = useRef(initData); // 重置滚动参数
 
   var resetScrollState = function resetScrollState() {
-    state.current.anchorIndex = 0;
-    setCurrentIndex(0);
     setScrollStart(false);
-    touchState.current = {
-      y1: 0,
-      y2: 0
-    };
+  };
+
+  var clientHeight = function clientHeight() {
+    return listview.current ? listview.current.clientHeight : 0;
   };
 
   var getData = function getData(el, name) {
@@ -87,21 +115,29 @@ var Elevator = function Elevator(props) {
       calculateHeight();
     }
 
-    if (index < 0) index = 0;
-    if (index > state.current.listHeight.length - 2) index = state.current.listHeight.length - 2;
-    setCurrentIndex(index);
+    var cacheIndex = index;
+
+    if (index < 0) {
+      cacheIndex = 0;
+    }
+
+    if (index > state.current.listHeight.length - 2) {
+      cacheIndex = state.current.listHeight.length - 2;
+    }
+
+    setCodeIndex(cacheIndex);
 
     if (listview.current) {
-      listview.current.scrollTo(0, state.current.listHeight[index]);
+      listview.current.scrollTo(0, state.current.listHeight[cacheIndex]);
     }
   };
 
   var touchMove = function touchMove(e) {
     var firstTouch = e.touches[0];
     touchState.current.y2 = firstTouch.pageY;
-    var delta = (touchState.current.y2 - touchState.current.y1) / spaceHeight | 0;
+    var delta = (touchState.current.y2 - touchState.current.y1) / spaceHeight || 0;
     var cacheIndex = state.current.anchorIndex + delta;
-    setCurrentIndex(cacheIndex);
+    setCodeIndex(cacheIndex);
     scrollTo(cacheIndex);
   };
 
@@ -115,8 +151,8 @@ var Elevator = function Elevator(props) {
     var firstTouch = e.touches[0];
     touchState.current.y1 = firstTouch.pageY;
     state.current.anchorIndex = +index;
-    setCurrentIndex(function (currentIndex) {
-      return currentIndex + index;
+    setCodeIndex(function (codeIndex) {
+      return codeIndex + index;
     });
     scrollTo(index);
     var target = e.currentTarget;
@@ -126,6 +162,8 @@ var Elevator = function Elevator(props) {
 
   var handleClickItem = function handleClickItem(key, item) {
     clickItem && clickItem(key, item);
+    setCurrentData(item);
+    setCurrentKey(key);
   };
 
   var handleClickIndex = function handleClickIndex(key) {
@@ -143,39 +181,92 @@ var Elevator = function Elevator(props) {
     }
   };
 
+  var listViewScroll = function listViewScroll(e) {
+    var listHeight = state.current.listHeight;
+
+    if (!listHeight.length) {
+      calculateHeight();
+    }
+
+    var target = e.target;
+    var scrollTop = target.scrollTop;
+    state.current.scrollY = scrollTop;
+    setScrollY(scrollTop);
+
+    for (var i = 0; i < listHeight.length - 1; i++) {
+      var height1 = listHeight[i];
+      var height2 = listHeight[i + 1];
+
+      if (state.current.scrollY >= height1 && state.current.scrollY < height2) {
+        setCurrentIndex(i);
+        state.current.diff = height2 - state.current.scrollY;
+        return;
+      }
+    }
+
+    setCurrentIndex(listHeight.length - 2);
+  };
+
   useEffect(function () {
     if (listview.current) {
       setListGroup();
+      listview.current.addEventListener('scroll', listViewScroll);
     }
-  }, [listview.current]);
+  }, [listview]);
+  useEffect(function () {
+    var _state$current = state.current,
+        listHeight = _state$current.listHeight,
+        diff = _state$current.diff,
+        scrollY = _state$current.scrollY;
+    var fixedTop = diff > 0 && diff < titleHeight ? diff - titleHeight : 0;
+
+    if (scrollY + clientHeight() === listHeight[listHeight.length - 1]) {
+      if (fixedTop !== 0) {
+        fixedTop = 0;
+      }
+    }
+
+    if (state.current.fixedTop === fixedTop) return;
+    state.current.fixedTop = fixedTop;
+  }, [state.current.diff, titleHeight]);
   return React__default.createElement("div", _objectSpread({
     className: "".concat(b(), " ").concat(className)
-  }, rest), React__default.createElement("div", {
+  }, rest), isSticky && scrollY > 0 ? React__default.createElement("div", {
+    className: b('list__fixed')
+  }, React__default.createElement("span", {
+    className: "fixed-title"
+  }, indexList[currentIndex][acceptKey])) : null, React__default.createElement("div", {
     className: b('list'),
-    ref: listview,
     style: {
-      height: isNaN(+height) ? height : "".concat(height, "px")
+      height: Number.isNaN(+height) ? height : "".concat(height, "px")
     }
-  }, indexList.map(function (item) {
+  }, React__default.createElement("div", {
+    className: b('list__inner'),
+    ref: listview
+  }, indexList.map(function (item, idx) {
     return React__default.createElement("div", {
       className: b('list__item'),
-      key: item[acceptKey]
+      key: idx
     }, React__default.createElement("div", {
       className: b('list__item__code')
     }, item[acceptKey]), React__default.createElement(React__default.Fragment, null, item.list.map(function (subitem) {
       return React__default.createElement("div", {
-        className: b('list__item__name'),
+        className: b('list__item__name', {
+          highcolor: currentData.id === subitem.id && currentKey === item[acceptKey]
+        }),
         key: subitem.id,
         onClick: function onClick() {
           return handleClickItem(item[acceptKey], subitem);
         }
-      }, subitem.name);
+      }, children ? React__default.createElement(React__default.Fragment, null, React__default.createElement(elevatorContext.Provider, {
+        value: subitem
+      }, children)) : subitem.name);
     })));
-  })), indexList.length && scrollStart ? React__default.createElement("div", {
-    className: b('code', {
+  }))), indexList.length && scrollStart ? React__default.createElement("div", {
+    className: b('code--current', {
       current: true
     })
-  }, ' ', indexList[currentIndex][acceptKey]) : null, React__default.createElement("div", {
+  }, indexList[codeIndex][acceptKey]) : null, React__default.createElement("div", {
     className: b('bars'),
     onTouchStart: function onTouchStart(event) {
       return touchStart(event);
@@ -187,9 +278,11 @@ var Elevator = function Elevator(props) {
     className: b('bars__inner')
   }, indexList.map(function (item, index) {
     return React__default.createElement("div", {
-      className: b('bars__inner__item'),
+      className: b('bars__inner__item', {
+        active: item[acceptKey] === indexList[currentIndex][acceptKey]
+      }),
       "data-index": index,
-      key: item[acceptKey],
+      key: index,
       onClick: function onClick() {
         return handleClickIndex(item[acceptKey]);
       }

package/dist/esm/Icon.js

@@ -1,6 +1,6 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["name", "size", "classPrefix", "color", "tag", "children", "className", "style", "click"];
+var _excluded = ["name", "size", "classPrefix", "color", "tag", "children", "className", "fontClassName", "style", "click"];
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
@@ -12,7 +12,8 @@ import '@bem-react/classname';
 var defaultProps = {
   name: '',
   size: '',
-  classPrefix: 'nutui-iconfont',
+  classPrefix: 'nutui-icon',
+  fontClassName: 'nutui-iconfont',
   color: '',
   tag: 'i',
   click: function click(e) {},
@@ -32,6 +33,7 @@ var Icon = function Icon(props) {
       tag = _defaultProps$props.tag,
       children = _defaultProps$props.children,
       className = _defaultProps$props.className,
+      fontClassName = _defaultProps$props.fontClassName,
       style = _defaultProps$props.style,
       click = _defaultProps$props.click,
       rest = _objectWithoutProperties(_defaultProps$props, _excluded);
@@ -54,7 +56,7 @@ var Icon = function Icon(props) {
   };
 
   return React__default.createElement(type, _objectSpread(_objectSpread({
-    className: isImage ? "".concat(className || '', " ").concat(b('img')) : "".concat(className || '', " ").concat(b(null, [classPrefix]), " nut-icon-").concat(name, " "),
+    className: isImage ? "".concat(className || '', " ").concat(b('img')) : "".concat(className || '', " ").concat(fontClassName, " ").concat(b(null, [classPrefix]), " nut-icon-").concat(name, " "),
     style: _objectSpread({
       color: color,
       fontSize: pxCheck(size),