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

iconfont-cli · Jul 31, 2023 · 3d23446 · 3d23446
1 parent ba7b0c6
commit 3d23446
Show file tree

Hide file tree

Showing 41 changed files with 125 additions and 86 deletions.
diff --git a/README.md b/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标准组件

diff --git a/package.json b/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",

diff --git a/scripts/config/iconfont-js.json b/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"
 }
diff --git a/scripts/config/iconfont-ts.json b/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"
 }
diff --git a/snapshots/iconfont-js/helper.d.ts b/snapshots/iconfont-js/helper.d.ts
@@ -1,2 +1,2 @@
 /* eslint-disable */
-export declare var useGlobalIconFont: () => { iconfont: string };
+export declare var useGlobalIconFont: () => { 'iconfont': string };
diff --git a/snapshots/iconfont-js/helper.js b/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}`,
   };
 };
 

diff --git a/snapshots/iconfont-js/index.alipay.js b/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;
diff --git a/snapshots/iconfont-js/index.d.ts b/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;
diff --git a/snapshots/iconfont-js/index.h5.js b/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;
diff --git a/snapshots/iconfont-js/index.js b/snapshots/iconfont-js/index.js
@@ -1,7 +1,7 @@
 /* eslint-disable */
 
-const IconFont = () => {
+const Iconfont = () => {
   return null;
 };
 
-export default IconFont;
+export default Iconfont;
diff --git a/snapshots/iconfont-js/index.qq.js b/snapshots/iconfont-js/index.qq.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;
diff --git a/snapshots/iconfont-js/index.rn.js b/snapshots/iconfont-js/index.rn.js
@@ -4,14 +4,14 @@ import React from 'react';
 import Taro from '@tarojs/taro';
 import Icon from './rn';
 
-const IconFont = (props) => {
+const Iconfont = (props) => {
   const { name, size, color, style } = props;
 
   return <Icon name={name} size={parseFloat(Taro.pxTransform(size))} color={color} style={style} />;
 };
 
-IconFont.defaultProps = {
+Iconfont.defaultProps = {
   size: 14,
 };
 
-export default IconFont;
+export default Iconfont;
diff --git a/snapshots/iconfont-js/index.swan.js b/snapshots/iconfont-js/index.swan.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;
diff --git a/snapshots/iconfont-js/index.tt.js b/snapshots/iconfont-js/index.tt.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;
diff --git a/snapshots/iconfont-js/index.weapp.js b/snapshots/iconfont-js/index.weapp.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;
diff --git a/snapshots/iconfont-ts/helper.d.ts b/snapshots/iconfont-ts/helper.d.ts
@@ -1,2 +1,2 @@
 /* eslint-disable */
-export declare var useGlobalIconFont: () => { iconfont: string };
+export declare var useGlobalIconFont: () => { 'iconfont': string };
diff --git a/snapshots/iconfont-ts/helper.js b/snapshots/iconfont-ts/helper.js
@@ -1,7 +1,7 @@
 /* eslint-disable */
 const useGlobalIconFont = () => {
   return {
-    iconfont: `../snapshots/iconfont-ts/${process.env.TARO_ENV}/${process.env.TARO_ENV}`,
+    'iconfont': `../snapshots/iconfont-ts/${process.env.TARO_ENV}/${process.env.TARO_ENV}`,
   };
 };
 

diff --git a/snapshots/iconfont-ts/index.alipay.tsx b/snapshots/iconfont-ts/index.alipay.tsx
@@ -13,15 +13,15 @@ interface Props {
   style?: React.CSSProperties;
 }
 
-const IconFont: FunctionComponent<Props> = (props) => {
+const Iconfont: FunctionComponent<Props> = (props) => {
   const { name, size, color, style } = props;
 
   // @ts-ignore
   return <iconfont name={name} size={size} color={color} style={style} />;
 };
 
-IconFont.defaultProps = {
+Iconfont.defaultProps = {
   size: 20,
 };
 
-export default IconFont;
+export default Iconfont;
diff --git a/snapshots/iconfont-ts/index.h5.tsx b/snapshots/iconfont-ts/index.h5.tsx
@@ -14,14 +14,14 @@ interface Props {
   style?: React.CSSProperties;
 }
 
-const IconFont: FunctionComponent<Props> = (props) => {
+const Iconfont: FunctionComponent<Props> = (props) => {
   const { name, size, color, style } = props;
 
   return <Icon name={name} size={size} color={color} style={style} />;
 };
 
-IconFont.defaultProps = {
+Iconfont.defaultProps = {
   size: 20,
 };
 
-export default IconFont;
+export default Iconfont;
diff --git a/snapshots/iconfont-ts/index.qq.tsx b/snapshots/iconfont-ts/index.qq.tsx
@@ -13,15 +13,15 @@ interface Props {
   style?: React.CSSProperties;
 }
 
-const IconFont: FunctionComponent<Props> = (props) => {
+const Iconfont: FunctionComponent<Props> = (props) => {
   const { name, size, color, style } = props;
 
   // @ts-ignore
   return <iconfont name={name} size={size} color={color} style={style} />;
 };
 
-IconFont.defaultProps = {
+Iconfont.defaultProps = {
   size: 20,
 };
 
-export default IconFont;
+export default Iconfont;
diff --git a/snapshots/iconfont-ts/index.rn.tsx b/snapshots/iconfont-ts/index.rn.tsx
@@ -14,15 +14,15 @@ interface Props {
   style?: React.CSSProperties;
 }
 
-const IconFont: FunctionComponent<Props> = (props) => {
+const Iconfont: FunctionComponent<Props> = (props) => {
   const { name, size, color, style } = props;
 
   // @ts-ignore
   return <Icon name={name} size={size} color={color} style={style} />;
 };
 
-IconFont.defaultProps = {
+Iconfont.defaultProps = {
   size: 20,
 };
 
-export default IconFont;
+export default Iconfont;
diff --git a/snapshots/iconfont-ts/index.swan.tsx b/snapshots/iconfont-ts/index.swan.tsx
@@ -13,15 +13,15 @@ interface Props {
   style?: React.CSSProperties;
 }
 
-const IconFont: FunctionComponent<Props> = (props) => {
+const Iconfont: FunctionComponent<Props> = (props) => {
   const { name, size, color, style } = props;
 
   // @ts-ignore
   return <iconfont name={name} size={size} color={color} style={style} />;
 };
 
-IconFont.defaultProps = {
+Iconfont.defaultProps = {
   size: 20,
 };
 
-export default IconFont;
+export default Iconfont;
diff --git a/snapshots/iconfont-ts/index.tsx b/snapshots/iconfont-ts/index.tsx
@@ -12,8 +12,8 @@ export interface IconProps {
   style?: React.CSSProperties;
 }
 
-const IconFont: FunctionComponent<IconProps> = () => {
+const Iconfont: FunctionComponent<IconProps> = () => {
   return null;
 };
 
-export default IconFont;
+export default Iconfont;
diff --git a/snapshots/iconfont-ts/index.tt.tsx b/snapshots/iconfont-ts/index.tt.tsx
@@ -13,15 +13,15 @@ interface Props {
   style?: React.CSSProperties;
 }
 
-const IconFont: FunctionComponent<Props> = (props) => {
+const Iconfont: FunctionComponent<Props> = (props) => {
   const { name, size, color, style } = props;
 
   // @ts-ignore
   return <iconfont name={name} size={size} color={color} style={style} />;
 };
 
-IconFont.defaultProps = {
+Iconfont.defaultProps = {
   size: 20,
 };
 
-export default IconFont;
+export default Iconfont;
diff --git a/snapshots/iconfont-ts/index.weapp.tsx b/snapshots/iconfont-ts/index.weapp.tsx
@@ -13,15 +13,15 @@ interface Props {
   style?: React.CSSProperties;
 }
 
-const IconFont: FunctionComponent<Props> = (props) => {
+const Iconfont: FunctionComponent<Props> = (props) => {
   const { name, size, color, style } = props;
 
   // @ts-ignore
   return <iconfont name={name} size={size} color={color} style={style} />;
 };
 
-IconFont.defaultProps = {
+Iconfont.defaultProps = {
   size: 20,
 };
 
-export default IconFont;
+export default Iconfont;