feat: Support remaxJs

iconfont-cli · Apr 9, 2020 · b362e9a · b362e9a
commit b362e9a
Show file tree

Hide file tree

Showing 61 changed files with 1,561 additions and 0 deletions.
diff --git a/.editorconfig b/.editorconfig
@@ -0,0 +1,12 @@
+# Editor configuration, see http://editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[.*]
+insert_final_newline = false
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,6 @@
+node_modules/
+*.log
+.idea/
+build/
+/iconfont.json
+.DS_Store
diff --git a/CHANGELOG.md b/CHANGELOG.md
diff --git a/LICENSE b/LICENSE
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2019 原罪
+
+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:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+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.
diff --git a/README.md b/README.md
@@ -0,0 +1,163 @@
+# remax-iconfont-cli
+在RemaxJs框架中使用iconfont图标，不依赖字体，支持多色彩。
+
+# 支持平台
+
+* 微信小程序
+* 支付宝小程序
+* 头条小程序
+
+# 特性
+1、一键生成标准组件，多端支持
+<br>
+2、使用方便，import即可
+<br>
+3、支持多色彩
+<br>
+4、支持自定义颜色
+<br>
+5、支持es6和typescript两种模式
+
+# Step 1
+安装插件
+```bash
+# Yarn
+yarn add remax-iconfont-cli --dev
+
+# Npm
+npm install remax-iconfont-cli --save-dev
+```
+
+
+# Step 2
+生成配置文件
+```bash
+npx iconfont-init
+
+# 可传入配置输出路径
+# npx iconfont-init --output iconfont.json
+```
+此时项目根目录会生成一个`iconfont.json`的文件，内容如下：
+```json
+{
+  "symbol_url": "请参考README.md，复制 http://iconfont.cn 官网提供的JS链接",
+  "save_dir": "./src/components/iconfont",
+  "use_typescript": false,
+  "platforms": "*",
+  "use_rpx": true,
+  "trim_icon_prefix": "icon",
+  "default_icon_size": 18,
+  "componnent_name": "IconFont"
+}
+```
+### 配置参数说明：
+### symbol_url
+请直接复制[iconfont](http://iconfont.cn)官网提供的项目链接。请务必看清是`.js`后缀而不是.css后缀。如果你现在还没有创建iconfont的仓库，那么可以填入这个链接去测试：`http://at.alicdn.com/t/font_1373348_kk9y3jk2omq.js`
+
+<br />
+
+![](https://github.com/fwh1990/mini-program-iconfont-cli/blob/master/images/symbol-url.png?raw=true)
+
+### save_dir
+根据iconfont图标生成的组件存放的位置。每次生成组件之前，该文件夹都会被清空。
+
+### use_typescript
+如果您的项目使用Typescript编写，请设置为true。这个选项将决定生成的图标组件是`.tsx`还是`.js`后缀。
+
+当该值为false时，我们会为您的图标生成`.js`和`.d.ts`两个文件，以便您能享受到最好的开发体验。
+
+### platforms
+选择需要支持的平台，默认是`*`，意味着所有平台都需要支持（如果有）。如果你只想支持部分平台，也可以设置成数组：
+```json5
+{
+  // 选择你需要的平台
+  "platforms": ["wechat", "alipay", "toutiao"]
+}
+```
+
+### use_rpx
+是否使用[尺寸单位rpx](https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxss.html#%E5%B0%BA%E5%AF%B8%E5%8D%95%E4%BD%8D)还是普通的像素单位`px`。默认值为true，与RemaxJs保持一致的缩放。您也可以设置为false，强制使用`px`
+
+--------
+
+**注意：** 无论您是否设置了use_rpx，传入的size值都是`px单位`。如果开启了use_rpx，组件内部会帮您自动转换。
+
+### trim_icon_prefix
+如果你的图标有通用的前缀，而你在使用的时候又不想重复去写，那么可以通过这种配置这个选项把前缀统一去掉。
+
+### default_icon_size
+我们将为每个生成的图标组件加入默认的字体大小，当然，你也可以通过传入props的方式改变这个size值。
+
+### component_name
+就是组件的名称，默认名称为`IconFont`，您也可以改成`Icons`或者您喜欢的名字。记住，它是一个变量名，您必须遵守Javascript中关于变量的语法规则。以及作为组件名，请尽量以大写字母开头。
+
+
+# Step 3
+开始生成RemaxJs标准组件
+```bash
+npx iconfont-remax
+
+# 可传入配置文件路径
+# npx iconfont-remax --config iconfont.json
+```
+生成后查看您设置的保存目录中是否含有所有的图标
+
+-------
+
+在生成代码之前，你可以顺便参考[snapshots目录](https://github.com/fwh1990/remax-iconfont-cli/tree/master/snapshots)自动生成的快照文件。
+
+# 使用
+在Page中使用图标
+```jsx harmony
+import React, { Component } from 'react';
+import IconFont from '../components/iconfont';
+
+class App extends Component {
+  render() {
+    return <IconFont name="alipay" />;
+  }
+}
+
+export default App;
+```
+更多用法：
+```jsx harmony
+// 原色彩
+<IconFont name="alipay" />
+
+// 单色：红色
+<IconFont name="alipay" color="red" />
+
+// 多色：红色+橘色
+<IconFont name="alipay" color={['red', 'orange']} size={300} />
+
+// 不同格式的颜色写法
+<IconFont name="alipay" color={['#333', 'rgb(50, 124, 39)']} />
+
+
+// 与文字对齐
+<View style={{ display: 'flex', alignItems: 'center' }}>
+  <Text>Hello</text>
+  <IconFont name="alipay" />
+</View>
+```
+
+# 更新图标
+当您在iconfont.cn中的图标有变更时，只需更改配置`symbol_url`，然后再次执行`Step 3`即可生成最新的图标组件
+```bash
+# 修改 symbol_url 配置后执行：
+npx iconfont-remax
+```
+
+# 扩展
+|平台|库|
+|----|---|
+|小程序|[mini-program-iconfont-cli](https://github.com/fwh1990/mini-program-iconfont-cli)|
+|React Native|[react-native-iconfont-cli](https://github.com/fwh1990/react-native-iconfont-cli)|
+|React H5|[react-iconfont-cli](https://github.com/fwh1990/react-iconfont-cli)|
+|Flutter|[flutter-iconfont-cli](https://github.com/fwh1990/flutter-iconfont-cli)|
+|Taro|[taro-iconfont-cli](https://github.com/fwh1990/taro-iconfont-cli)|
+
+--------
+
+欢迎使用，并给我一些反馈和建议，让这个库做的更好
diff --git a/package.json b/package.json
@@ -0,0 +1,34 @@
+{
+  "name": "remax-iconfont-cli",
+  "version": "0.0.1-beta.0",
+  "main": "index.js",
+  "repository": "[email protected]:iconfont-cli/remax-iconfont-cli.git",
+  "author": "范文华 <[email protected]>",
+  "license": "MIT",
+  "peerDependencies": {
+    "react": "*"
+  },
+  "bin": {
+    "iconfont": "./commands/help.js",
+    "iconfont-init": "./commands/createJson.js",
+    "iconfont-remax": "./commands/index.js"
+  },
+  "dependencies": {
+    "colors": "^1.4.0",
+    "fs-extra": "^9.0.0",
+    "iconfont-parser": "^1.0.0",
+    "mini-program-iconfont-cli": "0.5.5",
+    "minimist": "^1.2.5",
+    "mkdirp": "^1.0.4"
+  },
+  "devDependencies": {
+    "@types/fs-extra": "^8.1.0",
+    "@types/glob": "^7.1.1",
+    "@types/minimist": "^1.2.0",
+    "@types/mkdirp": "^1.0.0",
+    "@types/node": "^13.11.0",
+    "@types/react": "^16.9.32",
+    "ts-node": "^8.8.2",
+    "typescript": "^3.8.3"
+  }
+}
diff --git a/publish.sh b/publish.sh
@@ -0,0 +1,30 @@
+set -e
+
+rm -rf ./build
+rm -rf ./src/iconfont
+
+./node_modules/.bin/tsc
+
+mv ./build/src/* ./build
+rm -rf ./build/src ./build/snapshots
+cp README.md package.json LICENSE CHANGELOG.md ./build
+cp -rf src/templates ./build/templates
+
+old_registry=$(npm config get registry)
+npm config set registry https://registry.npmjs.org
+set +e
+whoami=$(npm whoami 2>/dev/null)
+set -e
+
+if [ -z "$whoami" ]
+then
+   echo "login plz..."
+   npm login
+fi
+echo "I am: $(npm whoami)"
+
+sleep 1
+echo "Begin publish..."
+npm publish ./build/ --access=public "$@"
+
+npm config set registry ${old_registry}
diff --git a/scripts/config/iconfont-js.json b/scripts/config/iconfont-js.json
@@ -0,0 +1,10 @@
+{
+  "symbol_url": "http://at.alicdn.com/t/font_1373348_ghk94ooopqr.js",
+  "use_typescript": false,
+  "platforms": "*",
+  "use_rpx": true,
+  "save_dir": "./snapshots/iconfont-js",
+  "trim_icon_prefix": "icon",
+  "default_icon_size": 14,
+  "component_name": "JsIcon"
+}
diff --git a/scripts/config/iconfont-ts.json b/scripts/config/iconfont-ts.json
@@ -0,0 +1,10 @@
+{
+  "symbol_url": "http://at.alicdn.com/t/font_1373348_ghk94ooopqr.js",
+  "use_typescript": true,
+  "platforms": "*",
+  "use_rpx": false,
+  "save_dir": "./snapshots/iconfont-ts",
+  "trim_icon_prefix": "icon",
+  "default_icon_size": 20,
+  "component_name": "TsxIcon"
+}
diff --git a/scripts/update-snapshot.sh b/scripts/update-snapshot.sh
@@ -0,0 +1,4 @@
+#!/usr/bin/env bash
+
+npx ts-node src/commands/index.ts --config ./scripts/config/iconfont-js.json
+npx ts-node src/commands/index.ts --config ./scripts/config/iconfont-ts.json
diff --git a/snapshots/iconfont-js/alipay/alipay.acss b/snapshots/iconfont-js/alipay/alipay.acss
@@ -0,0 +1,3 @@
+.icon {
+  background-repeat: no-repeat;
+}
diff --git a/snapshots/iconfont-js/alipay/alipay.axml b/snapshots/iconfont-js/alipay/alipay.axml
@@ -0,0 +1,8 @@
+<!--alipay-->
+<view a:if="{{name === 'alipay'}}" style="background-image: url({{quot}}data:image/svg+xml, <svg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='{{svgSize}}px' height='{{svgSize}}px'><path d='M192 692.736c0-69.632 51.2-106.496 88.064-111.104 111.104-18.432 264.192 74.24 264.192 74.24-69.632 88.064-166.912 134.144-241.152 134.144-65.024-4.608-111.104-41.472-111.104-97.28z' fill='{{(isStr ? color : color[0]) || '#5B8BD4'}}' /><path d='M979.456 729.6c-13.824-4.608-329.216-101.888-319.488-111.104 46.592-55.808 78.848-185.344 78.848-185.344v-27.648h-185.344V335.872h226.816v-41.472h-226.816V192.512H460.8v97.28H257.024v41.472H460.8v69.632H298.496v27.648h333.824c0 13.824-23.04 106.496-46.08 148.48-4.608-9.216-153.088-60.416-236.544-65.024-88.064 4.608-157.696 32.256-189.952 97.28-46.592 120.32 27.648 241.152 194.56 241.152 27.648 0 162.304-13.824 264.192-153.088 27.648 13.824 185.344 92.672 282.624 143.872-92.672 111.104-231.936 180.736-389.12 180.736-280.576 1.024-508.928-226.304-509.44-506.88v-3.072C1.024 231.424 227.84 3.072 508.928 2.56h3.072c280.576-1.024 508.928 226.304 509.44 506.88v3.072c4.608 82.944-13.824 152.576-41.984 217.088z' fill='{{(isStr ? color : color[1]) || '#5B8BD4'}}' /></svg>{{quot}}); width: {{svgSize}}px; height: {{svgSize}}px; " class="icon" />
+
+<!--user-->
+<view a:if="{{name === 'user'}}" style="background-image: url({{quot}}data:image/svg+xml, <svg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='{{svgSize}}px' height='{{svgSize}}px'><path d='M518.07603918 6.737455c-174.95658274 0-316.73174462 141.77516188-316.73174465 316.73174464 0 82.95355218 32.42729765 159.11999552 84.46179858 214.92511241 16.59071043 18.09895683 35.44379047 33.93554407 55.80511691 47.5097617 50.5262545 33.93554407 111.61023382 53.54274731 176.46482916 53.5427473s126.69269785-19.60720323 176.46482915-53.5427473c20.36132644-13.57421762 39.21440646-29.41080486 55.80511691-47.5097617C803.13460934 482.58919514 834.80778381 406.42275179 834.80778381 323.46919964c0-174.95658274-141.77516188-316.73174462-316.73174463-316.73174464z m166.66122752 501.491929c-22.62369604 20.36132644-49.01800811 36.95203687-77.67468975 47.50976169-27.90255844 10.55772482-58.06748652 16.59071043-88.98653777 16.59071044s-61.83810252-6.03298562-88.98653779-16.59071044c-28.65668166-11.31184801-55.0509937-27.14843525-77.67468975-47.50976169C300.88855716 462.98199189 269.21538268 396.61915017 269.21538268 323.46919964c0-137.25042267 111.61023382-248.86065649 248.8606565-248.86065651s248.86065649 111.61023382 248.86065648 248.86065651c0 73.14995053-31.67317446 139.51279228-82.19942896 184.76018436z' fill='{{(isStr ? color : color[0]) || '#263238'}}' /><path d='M341.61121002 586.65819695C205.11491054 652.26691548 110.84951037 791.77970775 110.84951037 953.16207287c0 18.85308003-15.08246403 33.93554407-33.93554406 33.93554407s-33.93554407-15.08246403-33.93554409-33.93554407c0-177.97307556 98.03601619-332.56833185 242.82767089-414.76776082 16.59071043 18.09895683 35.44379047 33.93554407 55.80511691 48.2638849zM993.17365612 953.16207287c0 18.85308003-15.08246403 33.93554407-33.93554408 33.93554407s-33.93554407-15.08246403-33.93554405-33.93554407c0-161.38236511-94.26540019-300.8951574-230.76169966-366.50387592 20.36132644-13.57421762 39.21440646-29.41080486 55.80511691-47.5097617 144.79165469 81.44530576 242.82767087 236.04056206 242.82767088 414.01363762z' fill='{{(isStr ? color : color[1]) || '#15BBDF'}}' /></svg>{{quot}}); width: {{svgSize}}px; height: {{svgSize}}px; " class="icon" />
+
+<!--setup-->
+<view a:if="{{name === 'setup'}}" style="background-image: url({{quot}}data:image/svg+xml, <svg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='{{svgSize}}px' height='{{svgSize}}px'><path d='M720.36316 371.018l-56.188-172.934c-4.654-14.322-20.036-22.16-34.358-17.506l-78.07 25.366c-7.25 2.356-15.224 0.726-20.912-4.346a256.276 256.276 0 0 0-41.218-29.96c-6.576-3.842-10.58-10.922-10.58-18.538V71.03c0-15.058-12.208-27.266-27.266-27.266h-181.834c-15.058 0-27.266 12.208-27.266 27.266v82.114c0 7.614-4.002 14.69-10.576 18.534a256.258 256.258 0 0 0-41.168 29.934c-5.69 5.074-13.664 6.704-20.916 4.348l-78.12-25.382c-14.322-4.654-29.704 3.184-34.356 17.506L1.34316 371.016c-4.654 14.322 3.184 29.704 17.506 34.356l78.05 25.36c7.252 2.356 12.754 8.364 14.366 15.816a253.468 253.468 0 0 0 15.718 48.46c3.072 6.984 2.162 15.076-2.322 21.248l-48.22 66.37c-8.852 12.182-6.15 29.234 6.032 38.084l147.108 106.882c12.182 8.852 29.234 6.15 38.086-6.032l48.188-66.326c4.484-6.17 11.894-9.538 19.484-8.776 8.404 0.844 16.926 1.284 25.552 1.284 8.604 0 17.104-0.44 25.486-1.28 7.588-0.76 14.998 2.606 19.48 8.776l48.184 66.32c8.852 12.182 25.902 14.884 38.086 6.032l147.108-106.882c12.182-8.852 14.882-25.902 6.032-38.084l-48.176-66.308c-4.486-6.174-5.394-14.268-2.32-21.252a253.424 253.424 0 0 0 15.75-48.544c1.612-7.454 7.114-13.46 14.368-15.816l77.968-25.334c14.322-4.65 22.16-20.032 17.506-34.352z m-359.472 120.706c-54.924 0-99.448-44.524-99.448-99.448s44.524-99.448 99.448-99.448 99.448 44.524 99.448 99.448-44.526 99.448-99.448 99.448z' fill='{{(isStr ? color : color[0]) || '#5B6EA2'}}' /><path d='M360.89116 516.228c-68.346 0-123.952-55.604-123.952-123.952s55.604-123.952 123.952-123.952 123.952 55.604 123.952 123.952-55.606 123.952-123.952 123.952z m0-198.894c-41.324 0-74.944 33.62-74.944 74.944s33.618 74.944 74.944 74.944 74.944-33.618 74.944-74.944-33.62-74.944-74.944-74.944z' fill='{{(isStr ? color : color[1]) || '#86DBD5'}}' /><path d='M335.33916 646.46c8.404 0.844 16.926 1.284 25.552 1.284 8.604 0 17.104-0.44 25.486-1.278 7.588-0.76 14.998 2.606 19.48 8.776l48.184 66.32c8.852 12.182 25.902 14.884 38.086 6.032l74.012-53.772c-121.448-49.224-191.894-126.576-231.428-211.328-28.45-10.642-48.762-38.098-48.762-70.216a74.514 74.514 0 0 1 13.154-42.348c-23.962-126.424-1.346-249.502 6.73-306.166h-35.896c-15.058 0-27.266 12.208-27.266 27.266v82.114c0 7.614-4.002 14.69-10.576 18.536a256.152 256.152 0 0 0-41.166 29.934c-5.69 5.074-13.664 6.704-20.916 4.348L91.89116 180.578c-14.322-4.654-29.704 3.184-34.356 17.506L1.34316 371.016c-4.654 14.322 3.184 29.704 17.506 34.356l78.05 25.36c7.252 2.356 12.754 8.364 14.366 15.816a253.468 253.468 0 0 0 15.718 48.46c3.072 6.984 2.162 15.076-2.322 21.248l-48.22 66.37c-8.852 12.182-6.15 29.234 6.032 38.084l147.108 106.882c12.182 8.852 29.234 6.15 38.086-6.032l48.188-66.326c4.484-6.168 11.894-9.536 19.484-8.774z' opacity='.1' fill='{{(isStr ? color : color[2]) || '#333333'}}' /><path d='M1004.51916 274.936l-69.236-69.236c-25.976-25.976-68.09-25.976-94.066 0L576.30116 470.614a33.62 33.62 0 0 0-9.412 29.166l2.754 16.948a41.288 41.288 0 0 1-11.558 35.818l-25.652 25.652 99.586 99.586 25.652-25.652a41.286 41.286 0 0 1 35.818-11.558l16.948 2.754a33.62 33.62 0 0 0 29.166-9.412L1004.51916 369c25.976-25.976 25.976-68.09 0-94.064z' fill='{{(isStr ? color : color[3]) || '#F7B96D'}}' /><path d='M667.65916 542.558c-12.176-12.176-12.176-31.92 0-44.096l197.396-197.396c12.176-12.176 31.92-12.176 44.096 0 12.176 12.176 12.176 31.92 0 44.096l-197.396 197.396c-12.176 12.176-31.918 12.176-44.096 0z' fill='{{(isStr ? color : color[4]) || '#FDE27C'}}' /><path d='M657.67116 652.132a41.274 41.274 0 0 1 31.768-11.996c-59.072-47.372-67.294-184.166 2.842-285.502l-115.98 115.98a33.62 33.62 0 0 0-9.412 29.166l2.754 16.948a41.288 41.288 0 0 1-11.558 35.818l-25.652 25.652 99.586 99.586 25.652-25.652z' opacity='.1' fill='{{(isStr ? color : color[5]) || '#333333'}}' /><path d='M402.00116 852.312l146.338-146.338-44.096-44.096-146.338 146.338a45.4 45.4 0 0 1-15.862 10.294l-68.064 26.086a37.556 37.556 0 0 0-22.032 22.738l-20.978 60.356a17.81 17.81 0 0 0 4.23 18.444l28.884 28.884a17.816 17.816 0 0 0 18.444 4.23l60.356-20.978a37.556 37.556 0 0 0 22.738-22.032l26.086-68.064a45.4 45.4 0 0 1 10.294-15.862z' fill='{{(isStr ? color : color[6]) || '#495059'}}' /><path d='M504.23916 661.878l44.094 44.094-29.092 29.094-44.094-44.096z' opacity='.1' fill='{{(isStr ? color : color[7]) || '#333333'}}' /><path d='M590.08516 747.722l-127.59-127.59c-9.862-9.862-9.862-25.85 0-35.712l20.222-20.222c9.862-9.862 25.85-9.862 35.712 0l127.59 127.59c9.862 9.862 9.862 25.85 0 35.712l-20.222 20.222c-9.86 9.862-25.85 9.862-35.712 0z' fill='{{(isStr ? color : color[8]) || '#FDE27C'}}' /><path d='M518.43116 564.198c-9.862-9.862-25.85-9.862-35.712 0l-20.222 20.222c-9.862 9.862-9.862 25.85 0 35.712l100.512 100.512c-38.162-57.234-28.442-108.238-16.758-128.628l-27.82-27.818z' opacity='.1' fill='{{(isStr ? color : color[9]) || '#333333'}}' /></svg>{{quot}}); width: {{svgSize}}px; height: {{svgSize}}px; " class="icon" />
diff --git a/snapshots/iconfont-js/alipay/alipay.js b/snapshots/iconfont-js/alipay/alipay.js
@@ -0,0 +1,44 @@
+Component({
+  props: {
+    // alipay | user | setup
+    name: null,
+    // string | string[]
+    color: '',
+    size: 14,
+  },
+  data: {
+    quot: '"',
+    svgSize: 14,
+    isStr: true,
+  },
+  didMount() {
+    const size = this.props.size;
+    const color = this.props.color;
+
+    this.setData({
+      isStr: typeof color === 'string',
+    });
+
+    if (size !== this.data.svgSize) {
+      this.setData({
+        svgSize: size / 750 * my.getSystemInfoSync().windowWidth,
+      });
+    }
+  },
+  disUpdate(prevProps) {
+    const size = this.props.size;
+    const color = this.props.color;
+
+    if (color !== prevProps.color) {
+      this.setData({
+        isStr: typeof color === 'string',
+      });
+    }
+
+    if (size !== prevProps.size) {
+      this.setData({
+        svgSize: size / 750 * my.getSystemInfoSync().windowWidth,
+      });
+    }
+  },
+});
diff --git a/snapshots/iconfont-js/alipay/alipay.json b/snapshots/iconfont-js/alipay/alipay.json
@@ -0,0 +1,3 @@
+{
+  "component": true
+}
diff --git a/snapshots/iconfont-js/index.alipay.js b/snapshots/iconfont-js/index.alipay.js
@@ -0,0 +1,17 @@
+/* eslint-disable */
+
+import React from 'react';
+import Iconfont_alipay from './alipay/alipay';
+
+export const JsIcon = (props) => {
+  const { name, size, color } = props;
+
+  // FIXME: RemaxJs doesn't support pxTransform()
+  return <Iconfont_alipay name={name} size={size} color={color} />;
+};
+
+JsIcon.defaultProps = {
+  size: 14,
+};
+
+export default JsIcon;
diff --git a/snapshots/iconfont-js/index.d.ts b/snapshots/iconfont-js/index.d.ts
@@ -0,0 +1,12 @@
+/* eslint-disable */
+import { FunctionComponent } from 'react';
+
+interface Props {
+  name: 'alipay' | 'user' | 'setup';
+  size?: number;
+  color?: string | string[];
+}
+
+export declare const JsIcon: FunctionComponent<Props>;
+
+export default JsIcon;
diff --git a/snapshots/iconfont-js/index.js b/snapshots/iconfont-js/index.js
@@ -0,0 +1,5 @@
+export const JsIcon = () => {
+  return null;
+};
+
+export default JsIcon;