nuke-icon - npm Package Compare versions

Comparing version 1.0.6 to 2.0.0

docs/basic.md

 # Icon Demos
 
-- order: 0
+* order: 0
 
@@ -9,88 +9,118 @@ 可以使用图片 或 iconfont
 
-````js
+```js
 /** @jsx createElement */
-import {createElement, Component,render } from 'rax';
+import { createElement, Component, render } from 'rax';
 import View from 'nuke-view';
 import Text from 'nuke-text';
 import Icon from 'nuke-icon';
-import {MultiRow} from 'nuke-layout';
+import { MultiRow } from 'nuke-layout';
 import Page from 'nuke-page';
-const ICONS = {
-    default:["all","email","account","emailFilling","favoritesFilling","accountFilling","smile","personalCenter","back","arrowDown","arrowUp","add","minus","errorFilling","error","select","success","warning","display","prompt","successFilling","close","semiSelect","loading","navMore","search","arrowRight","favorites","deleteFilling","arrowLeft","radio","radio","radio"],
-    v2:["accessory","activity","activity_fill","add","addition_fill","addition","addpeople_fill","addpeople","addressbook_fill","addressbook","barrage_fill","barrage","browse_fill","browse","brush","brush_fill","businesscard_fill","businesscard","camera_fill","camera","clock_fill","clock","close","collection_fill","collection","computer_fill","computer","coordinates_fill","coordinates","coupons_fill","coupons","createtask_fill","createtask","customerservice_fill","customerservice","delete_fill","delete","document","document_fill","dynamic_fill","dynamic","editor","eit","emoji_fill","emoji","empty","empty_fill","enter","enterinto","enterinto_fill","feedback_fill","feedback","flag_fill","flag","flashlight","flashlight_fill","flip","flip_fill","fullscreen","group","group_fill","headlines_fill","headlines","homepage_fill","homepage","integral_fill","integral","interactive_fill","interactive","keyboard","label","label_fill","like_fill","like","live_fill","live","lock_fill","lock","mail","mail_fill","manage_fill","manage","message","message_fill","mine","mine_fill","mobilephone_fill","mobilephone","more","narrow","offline_fill","offline","order_fill","order","other","people_fill","people","picture_fill","picture","play","play_fill","playon_fill","playon","praise_fill","praise","prompt_fill","prompt","qrcode_fill","qrcode","redpacket_fill","redpacket","refresh","remind_fill","remind","return","right","scan","select_fill","select","send","service_fill","service","setup_fill","setup","share_fill","share","shielding_fill","shielding","smallscreen_fill","smallscreen","stealth_fill","stealth","success_fill","success","suspend","switch","systemprompt_fill","systemprompt","tailor","task","task_fill","tasklist_fill","tasklist","text","time_fill","time","translation_fill","translation","trash","trash_fill","undo","unlock_fill","unlock","video","video_fill","warning_fill","warning","workbench_fill","workbench","search","searchfill","qianniu","publishgoods_fill","shop_fill","transaction_fill","packup","unfold","wangwang","financial_fill","marketing_fill","shake","decoration_fill","decoration_fill","decoration_fill"]
-}
+const ICONS = [
+  'right',
+  'download',
+  'accessory',
+  'add',
+  'camera',
+  'close',
+  'enter',
+  'feedback-fill',
+  'feedback',
+  'homepage-fill',
+  'homepage',
+  'message-fill',
+  'message',
+  'picture',
+  'info-fill',
+  'info',
+  'return',
+  'scan',
+  'setup-fill',
+  'setup',
+  'share',
+  'success-fill',
+  'success',
+  'switch',
+  'prompt',
+  'tailor',
+  'video',
+  'warning-fill',
+  'warning',
+  'search',
+  'packup',
+  'unfold'
+];
 let App = class NukeDemoIndex extends Component {
-    constructor() {
-        super();
+  constructor() {
+    super();
+  }
+  renderGridCell = (item, index) => {
+    return (
+      <View style={styles.iconCell}>
+        <Icon fixedFont={true} style={styles.icon} name={item} />
+        <Text style={styles.iconShowCode}>{item}</Text>
+      </View>
+    );
+  };
 
-    }
-    renderGridCell = (item,index) => {
-        return <View style={styles.iconCell}>
-                <Icon fixedFont={true} style={styles.icon} name={item} />
-                <Text  style={styles.iconShowCode}>{item}</Text>
-            </View>
-    }
-    renderGridCellV2 = (item,index) => {
-        return <View style={styles.iconCell}>
-                <Icon version="v2" style={[styles.icon,styles.new]} name={item} />
-                <Text style={styles.iconShowCode}>{item}</Text>
-            </View>
-    }
+  render() {
+    return (
+      <Page title="Icon">
+        <View style={styles.listLine}>
+          <Icon
+            style={styles.icon}
+            src="https://img.alicdn.com/tfs/TB1vUv.JFXXXXbAXFXXXXXXXXXX-50-50.png"
+          />
+          <View>
+            <Text>一行文字 </Text>
+          </View>
+        </View>
+        <Page.Intro main="自带的 iconfont 集合" />
+        <View style={styles.lineWithMargin}>
+          <MultiRow
+            dataSource={ICONS}
+            rows={4}
+            renderRow={this.renderGridCell}
+          />
+        </View>
+      </Page>
+    );
+  }
+};
+const styles = {
+  icon: {
+    fontSize: 40,
+    marginBottom: 20
+  },
+  iconCell: {
+    justifyContent: 'center',
+    height: '180rem',
+    alignItems: 'center',
+    borderWidth: '1rem',
+    borderColor: '#eeeeee',
+    borderStyle: 'solid'
+  },
+  new: {
+    fontSize: 68,
 
-    render() {
-        return (
-            <Page title="Icon">
-                <Page.Intro main="方形图片"></Page.Intro>
-                <View style={styles.listLine}>
-                    <Icon style={styles.icon} src="https://img.alicdn.com/tfs/TB1vUv.JFXXXXbAXFXXXXXXXXXX-50-50.png" />
-                    <View><Text>一行文字 </Text></View>
-                </View>
-                <Page.Intro main="自带的 iconfont 集合"></Page.Intro>
-                <View style={styles.lineWithMargin}><MultiRow dataSource={ICONS['default']} rows={3} renderRow={this.renderGridCell} /></View>
-                <Page.Intro main="全新的 icons 集合(v2)"></Page.Intro>
-                <View style={styles.lineWithMargin}><MultiRow dataSource={ICONS['v2']} rows={3} renderRow={this.renderGridCellV2} /></View>
-            </Page>
+    color: '#3089dc'
+  },
+  listLine: {
+    marginLeft: '40rem',
+    marginRight: '40rem',
+    padding: '20rem',
+    flexDirection: 'row',
+    backgroundColor: '#ffffff'
+  },
+  lineWithMargin: {
+    marginLeft: '40rem',
+    marginRight: '40rem',
+    backgroundColor: '#ffffff'
+  },
 
-        );
-    }
-}
-const styles={
-    icon:{
-        fontSize:40,
-        marginBottom:20,
-    },
-    iconCell:{
-        justifyContent:'center',
-        height:'180rem',
-        alignItems:'center',
-        borderWidth:'1rem',
-        borderColor:'#eeeeee',
-        borderStyle:'solid',
-    },
-    new:{
-        fontSize:68,
-
-        color:'#3089dc'
-    },
-    listLine:{
-        marginLeft:'40rem',
-        marginRight:'40rem',
-        padding:'20rem',
-        flexDirection:'row',
-        backgroundColor:'#ffffff'
-
-    },
-    lineWithMargin:{
-        marginLeft:'40rem',
-        marginRight:'40rem',
-        backgroundColor:'#ffffff'
-
-    },
-
-    iconShowCode:{
-        fontSize: 24,
-        color:'#999999',
-    }
-}
-render(<App/>);
-````
+  iconShowCode: {
+    fontSize: 24,
+    color: '#999999'
+  }
+};
+render(<App />);
+```

HISTORY.md

 # Changelog 
 
 
+## 2.0.0 / 2018-03-22 
+
+  * [[3cad4f19](http://gitlab.alibaba-inc.com/nuke/icon/commit/3cad4f1965f7a6639aa6b3c6f0266978614859eb)] - `feat` update dependencies 
+
 ## 1.0.6 / 2018-01-02 
 
-  * [[3174f03](http://gitlab.alibaba-inc.com/nuke/icon/commit/3174f03e502738619140b4b8afb838955d3eb6e3)] - `feat` add fixedFont for iconfont 
+  * [[3174f03e](http://gitlab.alibaba-inc.com/nuke/icon/commit/3174f03e502738619140b4b8afb838955d3eb6e3)] - `feat` add fixedFont for iconfont 
 
 ## 1.0.5 / 2017-11-16 
 
-  * [[209c2ff](http://gitlab.alibaba-inc.com/nuke/icon/commit/209c2ff6fac38fef9ce23299cf3d79820305f2bf)] - `fix` displayName 
+  * [[209c2ff6](http://gitlab.alibaba-inc.com/nuke/icon/commit/209c2ff6fac38fef9ce23299cf3d79820305f2bf)] - `fix` displayName 
 
 ## 1.0.4 / 2017-11-15 
 
-  * [[c8b8067](http://gitlab.alibaba-inc.com/nuke/icon/commit/c8b8067af4d2c217b64edf05181f441dff3d57ec)] - `fix` class name should be display 
+  * [[c8b8067a](http://gitlab.alibaba-inc.com/nuke/icon/commit/c8b8067af4d2c217b64edf05181f441dff3d57ec)] - `fix` class name should be display 
 
 ## 1.0.3 / 2017-11-04 
 
-  * [[4ed5433](http://gitlab.alibaba-inc.com/nuke/icon/commit/4ed54330cea1636e830d8a7023b4fd415dd9ac8d)] - `fix` fix dependency 
+  * [[4ed54330](http://gitlab.alibaba-inc.com/nuke/icon/commit/4ed54330cea1636e830d8a7023b4fd415dd9ac8d)] - `fix` fix dependency 
 
 ## 1.0.2 / 2017-11-04 
 
-  * [[14813e9](http://gitlab.alibaba-inc.com/nuke/icon/commit/14813e9572023b345c75198e5cf63ca2acaeffbd)] - `feat` update dependencies 
+  * [[14813e95](http://gitlab.alibaba-inc.com/nuke/icon/commit/14813e9572023b345c75198e5cf63ca2acaeffbd)] - `feat` update dependencies 
 
 ## 1.0.1 / 2017-11-02 
 
-  * [[4aed7f2](http://gitlab.alibaba-inc.com/nuke/icon/commit/4aed7f28976203208b1cc051042b5609c86b262d)] - `fix` fix dependencies 
+  * [[4aed7f28](http://gitlab.alibaba-inc.com/nuke/icon/commit/4aed7f28976203208b1cc051042b5609c86b262d)] - `fix` fix dependencies 
 
 ## 1.0.0 / 2017-09-11 
 
-  * [[b673876](http://gitlab.alibaba-inc.com/nuke/icon/commit/b673876c23adcc405bd94348e0a753c4595446a1)] - `feat` icon 组件 style provider 改造完成 
+  * [[b673876c](http://gitlab.alibaba-inc.com/nuke/icon/commit/b673876c23adcc405bd94348e0a753c4595446a1)] - `feat` icon 组件 style provider 改造完成 
 
 ## 0.3.9 / 2017-08-02 
 
-  * [[a89478d](http://gitlab.alibaba-inc.com/nuke/icon/commit/a89478dbe1092012eabfb95d32f97d4fefa30e42)] - `docs` update readme for market 
+  * [[a89478db](http://gitlab.alibaba-inc.com/nuke/icon/commit/a89478dbe1092012eabfb95d32f97d4fefa30e42)] - `docs` update readme for market 
 
 ## 0.3.8 / 2017-08-01 
 
-  * [[11990a8](http://gitlab.alibaba-inc.com/nuke/icon/commit/11990a8e4b5cb61f56f305aeb7a2befb67010ee6)] - `feat` 新增全新的官方图标库 
+  * [[11990a8e](http://gitlab.alibaba-inc.com/nuke/icon/commit/11990a8e4b5cb61f56f305aeb7a2befb67010ee6)] - `feat` 新增全新的官方图标库 
 
 ## 0.3.7 / 2017-07-10 
 
-  * [[aef7efc](http://gitlab.alibaba-inc.com/nuke/icon/commit/aef7efc66e1802f38793f443e58acabed5e7cc7e)] - `fix` update dependencies 
+  * [[aef7efc6](http://gitlab.alibaba-inc.com/nuke/icon/commit/aef7efc66e1802f38793f443e58acabed5e7cc7e)] - `fix` update dependencies 
 
 ## 0.3.6 / 2017-06-19 
 
-  * [[42b4fe3](http://gitlab.alibaba-inc.com/nuke/icon/commit/42b4fe36bff7393ad92c42d24cbf10834d41b6a7)] - `fix` 修改iconfont 加载时机为 componentDidMount 
+  * [[42b4fe36](http://gitlab.alibaba-inc.com/nuke/icon/commit/42b4fe36bff7393ad92c42d24cbf10834d41b6a7)] - `fix` 修改iconfont 加载时机为 componentDidMount 
 
 ## 0.3.5 / 2017-06-06 
 
-  * [[f5d7ffb](http://gitlab.alibaba-inc.com/nuke/icon/commit/f5d7ffb9687ccf176dd28f9663d411dd61c8ad81)] - `feat` add right icon for default icons 
+  * [[f5d7ffb9](http://gitlab.alibaba-inc.com/nuke/icon/commit/f5d7ffb9687ccf176dd28f9663d411dd61c8ad81)] - `feat` add right icon for default icons 
 
 ## 0.3.4 / 2017-06-02 
 
-  * [[1799cbd](http://gitlab.alibaba-inc.com/nuke/icon/commit/1799cbd7a6ed24d0e407ab476fe536b46bf65ca9)] - `docs` update docs && dependencies 
+  * [[1799cbd7](http://gitlab.alibaba-inc.com/nuke/icon/commit/1799cbd7a6ed24d0e407ab476fe536b46bf65ca9)] - `docs` update docs && dependencies 
 
 ## 0.3.3 / 2017-05-11 
 
-  * [[496fbad](http://gitlab.alibaba-inc.com/nuke/icon/commit/496fbadc7a4af4bdf3d7b0179f7ea7b982030202)] - `feat` update icon url 
+  * [[496fbadc](http://gitlab.alibaba-inc.com/nuke/icon/commit/496fbadc7a4af4bdf3d7b0179f7ea7b982030202)] - `feat` update icon url 
 
 ## 0.3.2 / 2017-04-21 
 
-  * [[0226921](http://gitlab.alibaba-inc.com/nuke/icon/commit/0226921501245f3900a0fa8061a070b2763536dc)] - `fix` add player icon 
+  * [[02269215](http://gitlab.alibaba-inc.com/nuke/icon/commit/0226921501245f3900a0fa8061a070b2763536dc)] - `fix` add player icon 
 
 ## 0.3.1 / 2017-04-19 
 
-  * [[9aab2e2](http://gitlab.alibaba-inc.com/nuke/icon/commit/9aab2e216035351345c3fdb8719c0c7f59bfcebe)] - `docs` update docs 
+  * [[9aab2e21](http://gitlab.alibaba-inc.com/nuke/icon/commit/9aab2e216035351345c3fdb8719c0c7f59bfcebe)] - `docs` update docs 
 
 ## 0.3.0 / 2017-02-15 
 
-  * [[33435ab](http://gitlab.alibaba-inc.com/nuke/icon/commit/33435abf7ba2adfef634985163f2094fbf0a8a67)] - `feat` rax update 
+  * [[33435abf](http://gitlab.alibaba-inc.com/nuke/icon/commit/33435abf7ba2adfef634985163f2094fbf0a8a67)] - `feat` rax update 
 
 ## 0.2.0 / 2017-01-11 
 
-  * [[378522c](http://gitlab.alibaba-inc.com/nuke/icon/commit/378522c560ae33fc4a9935a6c4a2583745759504)] - `feat` cssinjs 
-  * [[9c6dd00](http://gitlab.alibaba-inc.com/nuke/icon/commit/9c6dd00d24b8114ba23d1c63729706a886584658)] - `fix` cssinjs done 
-  * [[575b258](http://gitlab.alibaba-inc.com/nuke/icon/commit/575b258465623dfda778c5d901f3aeac9e1d354b)] - `feat` add demo 
-  * [[dbd6ad0](http://gitlab.alibaba-inc.com/nuke/icon/commit/dbd6ad001d245f5b157bff14e460bcceae69fa83)] - `docs` update docs 
+  * [[378522c5](http://gitlab.alibaba-inc.com/nuke/icon/commit/378522c560ae33fc4a9935a6c4a2583745759504)] - `feat` cssinjs 
+  * [[9c6dd00d](http://gitlab.alibaba-inc.com/nuke/icon/commit/9c6dd00d24b8114ba23d1c63729706a886584658)] - `fix` cssinjs done 
+  * [[575b2584](http://gitlab.alibaba-inc.com/nuke/icon/commit/575b258465623dfda778c5d901f3aeac9e1d354b)] - `feat` add demo 
+  * [[dbd6ad00](http://gitlab.alibaba-inc.com/nuke/icon/commit/dbd6ad001d245f5b157bff14e460bcceae69fa83)] - `docs` update docs 
 
 ## 0.1.9 / 2016-12-22 
 
-  * [[cb10af7](http://gitlab.alibaba-inc.com/nuke/icon/commit/cb10af76eda9e4c21e7b27182f3afb5e409309ab)] - `fix` change url to https 
+  * [[cb10af76](http://gitlab.alibaba-inc.com/nuke/icon/commit/cb10af76eda9e4c21e7b27182f3afb5e409309ab)] - `fix` change url to https 
 
 ## 0.1.4 / 2016-11-24 
 
-  * [[3a08eba](http://gitlab.alibaba-inc.com/nuke/icon/commit/3a08ebae1340aac6690aac8877a901e4970ef41d)] - `feat` add iconfont for icon 
+  * [[3a08ebae](http://gitlab.alibaba-inc.com/nuke/icon/commit/3a08ebae1340aac6690aac8877a901e4970ef41d)] - `feat` add iconfont for icon 
 
 ## 0.1.3 / 2016-11-15 
 
-  * [[d5fe85c](http://gitlab.alibaba-inc.com/nuke/icon/commit/d5fe85cc8d2dca173d82428210da8c7690c9fd85)] - `fix` delete env 
+  * [[d5fe85cc](http://gitlab.alibaba-inc.com/nuke/icon/commit/d5fe85cc8d2dca173d82428210da8c7690c9fd85)] - `fix` delete env 
 
 ## 0.1.2 / 2016-11-14 
 
-  * [[f52d67b](http://gitlab.alibaba-inc.com/nuke/icon/commit/f52d67b40bfb7735ba9e802d175637cbb0840456)] - `refactor` first 
+  * [[f52d67b4](http://gitlab.alibaba-inc.com/nuke/icon/commit/f52d67b40bfb7735ba9e802d175637cbb0840456)] - `refactor` first 

lib/styles/index.js

 'use strict';
 
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
 var _mixin = require('./mixin');
 
+var _variable = require('./variable');
+
+var _variable2 = _interopRequireDefault(_variable);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
 function StyleMix() {
@@ -9,4 +17,5 @@ var theme = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   var core = theme.Core;
+  var Variables = (0, _variable2.default)(theme);
   return {
-    Icon: {
+    Icon: _extends({
       'icon-image': {
@@ -28,5 +37,5 @@ flexDirection: 'row',
       'iconfont-large': (0, _mixin.fontSize)(core['icon-l'])
-    }
+    }, Variables)
   };
 }
 module.exports = StyleMix;

lib/view/icon.js

@@ -19,2 +19,4 @@ /** @jsx createElement */
 
+var _nukeEnv = require('nuke-env');
+
 var _nukeTouchable = require('nuke-touchable');
@@ -38,6 +40,2 @@
 
-var _code = require('./code');
-
-var _code2 = _interopRequireDefault(_code);
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -56,6 +54,12 @@
 
-  function Icon() {
+  function Icon(props) {
     _classCallCheck(this, Icon);
 
-    return _possibleConstructorReturn(this, (Icon.__proto__ || Object.getPrototypeOf(Icon)).apply(this, arguments));
+    var _this = _possibleConstructorReturn(this, (Icon.__proto__ || Object.getPrototypeOf(Icon)).call(this, props));
+
+    var themeStyle = props.themeStyle;
+
+    _this.fontURL = themeStyle['icon-path'];
+    _this.fontName = themeStyle['icon-family'];
+    return _this;
   }
@@ -68,12 +72,26 @@
       if (type === 'iconfont') {
-        var version = this.props.version;
+        var themeStyle = this.props.themeStyle;
 
-        var fontURL = _code2.default[version].url;
-        var fontName = _code2.default[version].fontName;
+        var fontURL = themeStyle['icon-path'];
+        var fontName = themeStyle['icon-family'];
+        // if (!this.hasLoaded(fontURL, fontName)) {
         (0, _nukeIconfont2.default)({ name: fontName, url: fontURL });
+        // this.cacheLoadState(fontURL, fontName);
+        // }
       }
     }
+    // hasLoaded(url, name) {
+    //   if (isWeb) {
+    //     //
+    //   }
+    //   return false;
+    // }
+    // cacheLoadState(url, name) {
+    //   if (isWeb) {
+    //     //
+    //   }
+    // }
     /**
-    * 对 type 新增字段做矫正
-    */
+     * 对 type 新增字段做矫正
+     */
 
@@ -106,3 +124,2 @@ }, {
 
-      var iconConfig = _code2.default[version];
       var styles = this.props.themeStyle;
@@ -113,8 +130,13 @@
         var textStyle = Object.assign({}, styles['iconfont-' + size], style, {
-          fontFamily: iconConfig.fontName
+          fontFamily: this.fontName
         });
         return (0, _rax.createElement)(
           _nukeText2.default,
-          _extends({ onClick: onPress }, others, { fixedFont: fixedFont, style: textStyle }),
-          iconConfig.codes[name]
+          _extends({
+            onClick: onPress
+          }, others, {
+            fixedFont: fixedFont,
+            style: textStyle
+          }),
+          styles['icon-' + name]
         );
@@ -157,3 +179,2 @@ }
   type: _rax.PropTypes.string,
-  version: _rax.PropTypes.oneOf(['default', 'v2']),
   size: _rax.PropTypes.oneOf(['xs', 'small', 'medium', 'large']),
@@ -160,0 +181,0 @@ fixedFont: _rax.PropTypes.boolean

package.json

 {
   "name": "nuke-icon",
-  "version": "1.0.6",
+  "version": "2.0.0",
   "description": "图标",
@@ -46,18 +46,20 @@ "main": "lib/index",
   "dependencies": {
-    "nuke-view": "^1.x.x",
-    "nuke-text": "^0.x.x",
-    "nuke-touchable": "^1.x.x",
-    "nuke-image": "^1.x.x",
-    "nuke-iconfont": "^1.x.x",
-    "nuke-theme-provider": "^1.x.x"
+    "nuke-core": "^2.x.x",
+    "nuke-env": "^2.x.x",
+    "nuke-iconfont": "^2.x.x",
+    "nuke-image": "^2.x.x",
+    "nuke-text": "^2.x.x",
+    "nuke-theme-provider": "^2.x.x",
+    "nuke-touchable": "^2.x.x",
+    "nuke-view": "^2.x.x"
   },
   "devDependencies": {
-    "nuke-page": "^1.x.x",
-    "nuke-layout": "1.x.x",
+    "babel-eslint": "^7.2.3",
     "eslint": "3.19.0",
-    "babel-eslint": "^7.2.3",
     "eslint-config-ali": "2.0.0",
     "eslint-plugin-import": "2.6.0",
     "eslint-plugin-jsx-a11y": "6.0.2",
-    "eslint-plugin-react": "7.1.0"
+    "eslint-plugin-react": "7.1.0",
+    "nuke-layout": "1.x.x",
+    "nuke-page": "^1.x.x"
   },
@@ -64,0 +66,0 @@ "publishConfig": {

theme/index.jsx

 /** @jsx createElement */
-import {createElement, Component,render } from 'rax';
+import { createElement, Component, render } from 'rax';
 import View from 'nuke-view';
 import Text from 'nuke-text';
 import Icon from 'nuke-icon';
-import {MultiRow} from 'nuke-layout';
+import { MultiRow } from 'nuke-layout';
 import Page from 'nuke-page';
-let App = class NukeDemoIndex extends Component {
-    constructor() {
-        super();
-        this.state={
-            icons:[
-                "all",
-                "email",
-                "account",
-                "emailFilling",
-                "favoritesFilling",
-                "accountFilling",
-                "smile",
-                "personalCenter",
-                "back",
-                "arrowDown",
-                "arrowUp",
-                "add",
-                "minus",
-                "errorFilling",
-                "error",
-                "select",
-                "success",
-                "warning",
-                "display",
-                "prompt",
-                "successFilling",
-                "close",
-                "semiSelect",
-                "loading",
-                "navMore",
-                "search",
-                "arrowRight",
-                "favorites",
-                "deleteFilling",
-                "arrowLeft",
-                "radio",
-                "right"
-            ]
-        }
-        
-    }
-    renderGridCell=(item,index)=>{
-        return <View style={styles.iconCell}>
-                <Icon style={styles.icon} name={item} />
-                <Text style={styles.iconShowCode}>{item}</Text>
-            </View>
-    }
+import { StyleProvider } from 'nuke-theme-provider';
+import {
+  decodeVar,
+  DemoContainer,
+  DemoSection,
+  Demo,
+  DemoItem,
+  initDemo,
+} from '@alife/nuke-demo-helper';
 
-    render() {
-        return (
-            <Page title="Icon">
-                <Page.Intro main="方形图片"></Page.Intro>
-                <View style={styles.listLine}>
-                    <Icon style={styles.icon} src="https://img.alicdn.com/tfs/TB1vUv.JFXXXXbAXFXXXXXXXXXX-50-50.png" />
-                    <View><Text>一行文字 </Text></View>
-                </View>
-                <Page.Intro main="自带的 iconfont 集合"></Page.Intro>
-                <View style={styles.lineWithMargin}><MultiRow dataSource={this.state.icons} rows={4} renderRow={this.renderGridCell} /></View>
-            </Page>
+const ICONS = [
+  'right',
+  'download',
+  'accessory',
+  'add',
+  'camera',
+  'close',
+  'enter',
+  'feedback-fill',
+  'feedback',
+  'homepage-fill',
+  'homepage',
+  'message-fill',
+  'message',
+  'picture',
+  'info-fill',
+  'info',
+  'return',
+  'scan',
+  'setup-fill',
+  'setup',
+  'share',
+  'success-fill',
+  'success',
+  'switch',
+  'prompt',
+  'tailor',
+  'video',
+  'warning-fill',
+  'warning',
+  'search',
+  'packup',
+  'unfold',
+];
+const App = class NukeDemoIndex extends Component {
+  constructor() {
+    super();
+  }
+  renderGridCell = (item, index) => (
+    <View style={styles.iconCell}>
+      <Icon fixedFont style={styles.icon} name={item} />
+      <Text style={styles.iconShowCode}>{item}</Text>
+    </View>
+  );
 
-        );
-    }
-}
-const styles={
-    icon:{
-        
-        marginRight:'10rem'
-    },
-    iconCell:{
-        paddingTop:'40rem',
-        alignItems:'center',
-    },
-    listLine:{
-        marginLeft:'40rem',
-        marginRight:'40rem',
-        padding:'20rem',
-        flexDirection:'row',
-        backgroundColor:'#ffffff'
+  render() {
+    return (
+      <StyleProvider style={decodeVar(this.props.variable)}>
+        <DemoContainer>
+          <DemoSection title="icons">
+            <Demo>
+              <DemoItem direction="column">
+                <MultiRow
+                  dataSource={ICONS}
+                  rows={4}
+                  renderRow={this.renderGridCell}
+                />
+              </DemoItem>
+            </Demo>
+          </DemoSection>
+        </DemoContainer>
+      </StyleProvider>
+    );
+  }
+};
+const styles = {
+  icon: {
+    fontSize: 40,
+    marginBottom: 20,
+  },
+  iconCell: {
+    justifyContent: 'center',
+    height: '180rem',
+    alignItems: 'center',
+    borderWidth: '1rem',
+    borderColor: '#eeeeee',
+    borderStyle: 'solid',
+  },
+  new: {
+    fontSize: 68,
 
-    },
-    lineWithMargin:{
-        marginLeft:'40rem',
-        marginRight:'40rem',
-        backgroundColor:'#ffffff'
+    color: '#3089dc',
+  },
+  listLine: {
+    marginLeft: '40rem',
+    marginRight: '40rem',
+    padding: '20rem',
+    flexDirection: 'row',
+    backgroundColor: '#ffffff',
+  },
+  lineWithMargin: {
+    marginLeft: '40rem',
+    marginRight: '40rem',
+    backgroundColor: '#ffffff',
+  },
 
-    },
-    
-    iconShowCode:{
-        fontSize: '24rem',
-        color:'#999999',
-    }
-}
-render(<App/>);
+  iconShowCode: {
+    fontSize: 24,
+    color: '#999999',
+  },
+};
+window.renderDemo = function (lang, variable) {
+  render(<App variable={variable} />);
+};
+
+renderDemo();
+
+initDemo('icon');

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

28701

decreased by-19.18%

Dependency count

8

increased by33.33%

Lines of code

387

decreased by-25.58%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Addednuke-core@^2.x.x

• + Addednuke-env@^2.x.x

• + Addednuke-core@2.3.12(transitive)

• + Addednuke-env@2.3.12(transitive)

• + Addednuke-helper@2.3.12(transitive)

• + Addednuke-iconfont@2.3.12(transitive)

• + Addednuke-image@2.3.12(transitive)

• + Addednuke-text@2.3.12(transitive)

• + Addednuke-theme-provider@2.3.12(transitive)

• + Addednuke-touchable@2.3.12(transitive)

• + Addednuke-view@2.3.12(transitive)

• - Removeddriver-browser@0.6.7(transitive)

• - Removeddriver-server@0.6.5(transitive)

• - Removeddriver-weex@0.6.5(transitive)

• - Removednuke-core@1.0.5(transitive)

• - Removednuke-env@1.0.1(transitive)

• - Removednuke-helper@0.0.11(transitive)

• - Removednuke-iconfont@1.0.0(transitive)

• - Removednuke-image@1.0.6(transitive)

• - Removednuke-text@0.0.20(transitive)

• - Removednuke-theme-provider@1.0.8(transitive)

• - Removednuke-touchable@1.0.0(transitive)

• - Removednuke-view@1.0.7(transitive)

• - Removedrax@0.6.7(transitive)

• - Removedrax-text@0.4.20(transitive)

• - Removedrax-view@0.4.20(transitive)

• - Removedstyle-equal@1.0.0(transitive)

• - Removedstyle-unit@0.4.200.6.5(transitive)

• - Removedua-parser-js@0.7.39(transitive)

• - Removeduniversal-env@0.4.200.6.6(transitive)

• Updatednuke-iconfont@^2.x.x

• Updatednuke-image@^2.x.x

• Updatednuke-text@^2.x.x

• Updatednuke-theme-provider@^2.x.x

• Updatednuke-touchable@^2.x.x

• Updatednuke-view@^2.x.x