diff --git a/README.md b/README.md index c0c1e22..5aadc27 100644 --- a/README.md +++ b/README.md @@ -46,8 +46,7 @@ npx iconfont-init "platforms": "*", "use_rpx": true, "trim_icon_prefix": "icon", - "default_icon_size": 18, - "componnent_name": "IconFont" + "default_icon_size": 18 } ``` ### 配置参数说明: @@ -88,10 +87,6 @@ npx iconfont-init ### default_icon_size 我们将为每个生成的图标组件加入默认的字体大小,当然,你也可以通过传入props的方式改变这个size值。 -### component_name -就是组件的名称,默认名称为`IconFont`,您也可以改成`Icons`或者您喜欢的名字。记住,它是一个变量名,您必须遵守Javascript中关于变量的语法规则。以及作为组件名,请尽量以大写字母开头。 - - # Step 3 开始生成RemaxJs标准组件 ```bash diff --git a/scripts/config/iconfont-js.json b/scripts/config/iconfont-js.json index 13e6b0c..264f32f 100644 --- a/scripts/config/iconfont-js.json +++ b/scripts/config/iconfont-js.json @@ -5,6 +5,5 @@ "use_rpx": true, "save_dir": "./snapshots/iconfont-js", "trim_icon_prefix": "icon", - "default_icon_size": 14, - "component_name": "JsIcon" + "default_icon_size": 14 } diff --git a/scripts/config/iconfont-ts.json b/scripts/config/iconfont-ts.json index 28e282a..5f11fab 100644 --- a/scripts/config/iconfont-ts.json +++ b/scripts/config/iconfont-ts.json @@ -5,6 +5,5 @@ "use_rpx": false, "save_dir": "./snapshots/iconfont-ts", "trim_icon_prefix": "icon", - "default_icon_size": 20, - "component_name": "TsxIcon" + "default_icon_size": 20 } diff --git a/snapshots/iconfont-js/index.alipay.js b/snapshots/iconfont-js/index.alipay.js index b233a0c..cb1d196 100644 --- a/snapshots/iconfont-js/index.alipay.js +++ b/snapshots/iconfont-js/index.alipay.js @@ -3,15 +3,15 @@ import React from 'react'; import Iconfont_alipay from './alipay/alipay'; -export const JsIcon = (props) => { +export const IconFont = (props) => { const { name, size, color } = props; // FIXME: RemaxJs doesn't support pxTransform() return ; }; -JsIcon.defaultProps = { +IconFont.defaultProps = { size: 14, }; -export default JsIcon; +export default IconFont; diff --git a/snapshots/iconfont-js/index.d.ts b/snapshots/iconfont-js/index.d.ts index 0b059ce..3fba5dd 100644 --- a/snapshots/iconfont-js/index.d.ts +++ b/snapshots/iconfont-js/index.d.ts @@ -7,6 +7,6 @@ interface Props { color?: string | string[]; } -export declare const JsIcon: FunctionComponent; +export declare const IconFont: FunctionComponent; -export default JsIcon; +export default IconFont; diff --git a/snapshots/iconfont-js/index.js b/snapshots/iconfont-js/index.js index 82e11bb..7db56a5 100644 --- a/snapshots/iconfont-js/index.js +++ b/snapshots/iconfont-js/index.js @@ -1,5 +1,5 @@ -export const JsIcon = () => { +export const IconFont = () => { return null; }; -export default JsIcon; +export default IconFont; diff --git a/snapshots/iconfont-js/index.toutiao.js b/snapshots/iconfont-js/index.toutiao.js index 3aea0b6..19315c6 100644 --- a/snapshots/iconfont-js/index.toutiao.js +++ b/snapshots/iconfont-js/index.toutiao.js @@ -3,15 +3,15 @@ import React from 'react'; import Iconfont_toutiao from './toutiao/toutiao'; -export const JsIcon = (props) => { +export const IconFont = (props) => { const { name, size, color } = props; // FIXME: RemaxJs doesn't support pxTransform() return ; }; -JsIcon.defaultProps = { +IconFont.defaultProps = { size: 14, }; -export default JsIcon; +export default IconFont; diff --git a/snapshots/iconfont-js/index.wechat.js b/snapshots/iconfont-js/index.wechat.js index dfda3fd..4b0c109 100644 --- a/snapshots/iconfont-js/index.wechat.js +++ b/snapshots/iconfont-js/index.wechat.js @@ -3,15 +3,15 @@ import React from 'react'; import Iconfont_wechat from './wechat/wechat'; -export const JsIcon = (props) => { +export const IconFont = (props) => { const { name, size, color } = props; // FIXME: RemaxJs doesn't support pxTransform() return ; }; -JsIcon.defaultProps = { +IconFont.defaultProps = { size: 14, }; -export default JsIcon; +export default IconFont; diff --git a/snapshots/iconfont-ts/index.alipay.tsx b/snapshots/iconfont-ts/index.alipay.tsx index 172d226..218ecfb 100644 --- a/snapshots/iconfont-ts/index.alipay.tsx +++ b/snapshots/iconfont-ts/index.alipay.tsx @@ -11,7 +11,7 @@ interface Props { color?: string | string[]; } -export const TsxIcon: FunctionComponent = (props) => { +export const IconFont: FunctionComponent = (props) => { const { name, size, color } = props; // FIXME: RemaxJs doesn't support pxTransform() @@ -19,8 +19,8 @@ export const TsxIcon: FunctionComponent = (props) => { return ; }; -TsxIcon.defaultProps = { +IconFont.defaultProps = { size: 20, }; -export default TsxIcon; +export default IconFont; diff --git a/snapshots/iconfont-ts/index.toutiao.tsx b/snapshots/iconfont-ts/index.toutiao.tsx index 1d29b64..c5a2d2b 100644 --- a/snapshots/iconfont-ts/index.toutiao.tsx +++ b/snapshots/iconfont-ts/index.toutiao.tsx @@ -11,7 +11,7 @@ interface Props { color?: string | string[]; } -export const TsxIcon: FunctionComponent = (props) => { +export const IconFont: FunctionComponent = (props) => { const { name, size, color } = props; // FIXME: RemaxJs doesn't support pxTransform() @@ -19,8 +19,8 @@ export const TsxIcon: FunctionComponent = (props) => { return ; }; -TsxIcon.defaultProps = { +IconFont.defaultProps = { size: 20, }; -export default TsxIcon; +export default IconFont; diff --git a/snapshots/iconfont-ts/index.tsx b/snapshots/iconfont-ts/index.tsx index 8d5412e..91b8c74 100644 --- a/snapshots/iconfont-ts/index.tsx +++ b/snapshots/iconfont-ts/index.tsx @@ -9,8 +9,8 @@ interface Props { color?: string | string[]; } -export const TsxIcon: FunctionComponent = () => { +export const IconFont: FunctionComponent = () => { return null; }; -export default TsxIcon; +export default IconFont; diff --git a/snapshots/iconfont-ts/index.wechat.tsx b/snapshots/iconfont-ts/index.wechat.tsx index bbe3897..d7f8aa1 100644 --- a/snapshots/iconfont-ts/index.wechat.tsx +++ b/snapshots/iconfont-ts/index.wechat.tsx @@ -11,7 +11,7 @@ interface Props { color?: string | string[]; } -export const TsxIcon: FunctionComponent = (props) => { +export const IconFont: FunctionComponent = (props) => { const { name, size, color } = props; // FIXME: RemaxJs doesn't support pxTransform() @@ -19,8 +19,8 @@ export const TsxIcon: FunctionComponent = (props) => { return ; }; -TsxIcon.defaultProps = { +IconFont.defaultProps = { size: 20, }; -export default TsxIcon; +export default IconFont; diff --git a/src/libs/generateUsingComponent.ts b/src/libs/generateUsingComponent.ts index d887f9b..009e168 100644 --- a/src/libs/generateUsingComponent.ts +++ b/src/libs/generateUsingComponent.ts @@ -2,7 +2,7 @@ import path from 'path'; import fs from 'fs'; import { Config } from './getConfig'; import { getTemplate } from './getTemplate'; -import { replaceIsRpx, replaceNames, replacePlatform, replaceSize, replaceSummaryIcon } from './replace'; +import { replaceIsRpx, replaceNames, replacePlatform, replaceSize } from './replace'; export const generateUsingComponent = (config: Config, names: string[], platform?: string) => { const saveDir = path.resolve(config.save_dir); @@ -23,7 +23,6 @@ export const generateUsingComponent = (config: Config, names: string[], platform iconFile = replaceNames(iconFile, names); iconFile = replaceSize(iconFile, config.default_icon_size); iconFile = replaceIsRpx(iconFile, config.use_rpx); - iconFile = replaceSummaryIcon(iconFile, config.component_name); if (platform) { iconFile = replacePlatform(iconFile, platform); @@ -33,8 +32,6 @@ export const generateUsingComponent = (config: Config, names: string[], platform let definitionFile = getTemplate('index.d.ts'); definitionFile = replaceNames(definitionFile, names); - definitionFile = replaceSummaryIcon(definitionFile, config.component_name); - fs.writeFileSync(path.join(saveDir, 'index.d.ts'), definitionFile); } diff --git a/src/libs/getConfig.ts b/src/libs/getConfig.ts index 174a723..40dcd68 100644 --- a/src/libs/getConfig.ts +++ b/src/libs/getConfig.ts @@ -13,7 +13,6 @@ export interface Config { use_rpx: boolean; trim_icon_prefix: string; default_icon_size: number; - component_name: string; } let cacheConfig: Config; @@ -60,7 +59,6 @@ export const getConfig = () => { config.save_dir = config.save_dir || defaultConfig.save_dir; config.default_icon_size = config.default_icon_size || defaultConfig.default_icon_size; - config.component_name = config.component_name || defaultConfig.component_name; cacheConfig = config; diff --git a/src/libs/iconfont.json b/src/libs/iconfont.json index b5dac22..2cf040e 100644 --- a/src/libs/iconfont.json +++ b/src/libs/iconfont.json @@ -5,6 +5,5 @@ "platforms": "*", "use_rpx": true, "trim_icon_prefix": "icon", - "default_icon_size": 18, - "component_name": "IconFont" + "default_icon_size": 18 } diff --git a/src/libs/replace.ts b/src/libs/replace.ts index 2bc405f..ed449cd 100644 --- a/src/libs/replace.ts +++ b/src/libs/replace.ts @@ -18,5 +18,5 @@ export const replaceIsRpx = (content: string, useRpx: boolean) => { }; export const replaceSummaryIcon = (content: string, iconName: string) => { - return content.replace(/#SummaryIcon#/g, iconName); + return content.replace(/IconFont/g, iconName); }; diff --git a/src/templates/index.d.ts.template b/src/templates/index.d.ts.template index 5731261..7726f23 100644 --- a/src/templates/index.d.ts.template +++ b/src/templates/index.d.ts.template @@ -7,6 +7,6 @@ interface Props { color?: string | string[]; } -export declare const #SummaryIcon#: FunctionComponent; +export declare const IconFont: FunctionComponent; -export default #SummaryIcon#; +export default IconFont; diff --git a/src/templates/index.js.template b/src/templates/index.js.template index bc91bf7..7db56a5 100644 --- a/src/templates/index.js.template +++ b/src/templates/index.js.template @@ -1,5 +1,5 @@ -export const #SummaryIcon# = () => { +export const IconFont = () => { return null; }; -export default #SummaryIcon#; +export default IconFont; diff --git a/src/templates/index.platform.js.template b/src/templates/index.platform.js.template index d11a338..6142311 100644 --- a/src/templates/index.platform.js.template +++ b/src/templates/index.platform.js.template @@ -3,15 +3,15 @@ import React from 'react'; import Iconfont_#platform# from './#platform#/#platform#'; -export const #SummaryIcon# = (props) => { +export const IconFont = (props) => { const { name, size, color } = props; // FIXME: RemaxJs doesn't support pxTransform() return ; }; -#SummaryIcon#.defaultProps = { +IconFont.defaultProps = { size: #size#, }; -export default #SummaryIcon#; +export default IconFont; diff --git a/src/templates/index.platform.tsx.template b/src/templates/index.platform.tsx.template index 299fade..2f44b14 100644 --- a/src/templates/index.platform.tsx.template +++ b/src/templates/index.platform.tsx.template @@ -11,7 +11,7 @@ interface Props { color?: string | string[]; } -export const #SummaryIcon#: FunctionComponent = (props) => { +export const IconFont: FunctionComponent = (props) => { const { name, size, color } = props; // FIXME: RemaxJs doesn't support pxTransform() @@ -19,8 +19,8 @@ export const #SummaryIcon#: FunctionComponent = (props) => { return ; }; -#SummaryIcon#.defaultProps = { +IconFont.defaultProps = { size: #size#, }; -export default #SummaryIcon#; +export default IconFont; diff --git a/src/templates/index.tsx.template b/src/templates/index.tsx.template index 2f6f610..5d8e886 100644 --- a/src/templates/index.tsx.template +++ b/src/templates/index.tsx.template @@ -9,8 +9,8 @@ interface Props { color?: string | string[]; } -export const #SummaryIcon#: FunctionComponent = () => { +export const IconFont: FunctionComponent = () => { return null; }; -export default #SummaryIcon#; +export default IconFont;