feat: 支持自定义组件名称，而不是固定的 iconfont

Author: axetroy

README.md

@@ -53,7 +53,8 @@ npx iconfont-init
   "use_rpx": true,
   "trim_icon_prefix": "icon",
   "default_icon_size": 18,
-  "design_width": 750
+  "design_width": 750,
+  "component_name": "iconfont"
 }
 ```
 ### 配置参数说明：
@@ -94,6 +95,9 @@ npx iconfont-init
 ### default_icon_size
 我们将为每个生成的图标组件加入默认的字体大小，当然，你也可以通过传入props的方式改变这个size值。
 
+### component_name
+生成的组件名称，用于注册小程序的组件，所以该项只有在小程序平台下才会生效。此项能满足一个项目中引入多个 iconfont 组件。
+
 
 # Step 3
 开始生成Taro标准组件

package.json

@@ -14,7 +14,9 @@
     "@tarojs/taro": "^3.0.8"
   },
   "dependencies": {
+    "camelcase": "^6.0.0",
     "colors": "^1.4.0",
+    "decamelize": "^5.0.0",
     "fs-extra": "^8.1.0",
     "iconfont-parser": "^1.0.0",
     "mini-program-iconfont-cli": "0.6.1",

scripts/config/iconfont-js.json

@@ -6,5 +6,6 @@
   "design_width": 720,
   "save_dir": "./snapshots/iconfont-js",
   "trim_icon_prefix": "icon",
-  "default_icon_size": 14
+  "default_icon_size": 14,
+  "component_name": "iconfont"
 }

scripts/config/iconfont-ts.json

@@ -5,5 +5,6 @@
   "use_rpx": false,
   "save_dir": "./snapshots/iconfont-ts",
   "trim_icon_prefix": "icon",
-  "default_icon_size": 20
+  "default_icon_size": 20,
+  "component_name": "iconfont"
 }

snapshots/iconfont-js/helper.d.ts

@@ -1,2 +1,2 @@
 /* eslint-disable */
-export declare var useGlobalIconFont: () => { iconfont: string };
+export declare var useGlobalIconFont: () => { 'iconfont': string };

snapshots/iconfont-js/helper.js

@@ -1,7 +1,7 @@
 /* eslint-disable */
 const useGlobalIconFont = () => {
   return {
-    iconfont: `../snapshots/iconfont-js/${process.env.TARO_ENV}/${process.env.TARO_ENV}`,
+    'iconfont': `../snapshots/iconfont-js/${process.env.TARO_ENV}/${process.env.TARO_ENV}`,
   };
 };
 

snapshots/iconfont-js/index.alipay.js

@@ -3,14 +3,14 @@
 import React from 'react';
 import Taro from '@tarojs/taro';
 
-const IconFont = (props) => {
+const Iconfont = (props) => {
   const { name, size, color, style } = props;
 
   return <iconfont name={name} size={parseFloat(Taro.pxTransform(size))} color={color} style={style} />;
 };
 
-IconFont.defaultProps = {
+Iconfont.defaultProps = {
   size: 14,
 };
 
-export default IconFont;
+export default Iconfont;

snapshots/iconfont-js/index.d.ts

@@ -8,6 +8,6 @@ interface Props {
   style?: React.CSSProperties;
 }
 
-declare const IconFont: FunctionComponent<Props>;
+declare const Iconfont: FunctionComponent<Props>;
 
-export default IconFont;
+export default Iconfont;

snapshots/iconfont-js/index.h5.js

@@ -4,14 +4,14 @@ import React from 'react';
 import Taro from '@tarojs/taro';
 import Icon from './h5';
 
-const IconFont = (props) => {
+const Iconfont = (props) => {
   const { name, size, color, style } = props;
 
   return <Icon name={name} size={parseFloat(Taro.pxTransform(size, 720))} color={color} style={style} />;
 };
 
-IconFont.defaultProps = {
+Iconfont.defaultProps = {
   size: 14,
 };
 
-export default IconFont;
+export default Iconfont;

snapshots/iconfont-js/index.js

@@ -1,7 +1,7 @@
 /* eslint-disable */
 
-const IconFont = () => {
+const Iconfont = () => {
   return null;
 };
 
-export default IconFont;
+export default Iconfont;