diff --git a/README.md b/README.md index 99ee379..5739bcb 100644 --- a/README.md +++ b/README.md @@ -34,6 +34,7 @@ npx iconfont-init "save_dir": "./src/components/iconfont", "generate_mode": "all-in-one", "trim_icon_prefix": "icon", + "unit": "px", "default_icon_size": 18, "summary_component_name": "Icon" } @@ -70,6 +71,9 @@ npx iconfont-init 注意，这个选项只针对 `` 组件有效 +### unit +图标的单位，默认是网页常用单位`px`即像素，也推荐您在手机网页中使用自适应的`rem`单位。 + ### default_icon_size 我们将为每个生成的图标组件加入默认的字体大小，当然，你也可以通过传入props的方式改变这个size值。 diff --git a/package.json b/package.json index 6a8e67e..5ada6c6 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-iconfont-cli", - "version": "0.0.1", + "version": "0.1.0", "main": "index.js", "keywords": [ "iconfont", diff --git a/scripts/config/all-in-one-js.json b/scripts/config/all-in-one-js.json index c474de0..5eae428 100644 --- a/scripts/config/all-in-one-js.json +++ b/scripts/config/all-in-one-js.json @@ -4,6 +4,7 @@ "generate_mode": "all-in-one", "save_dir": "./snapshots/all-in-one-js", "trim_icon_prefix": "icon", + "unit": "px", "default_icon_size": 14, "summary_component_name": "Icon" } diff --git a/scripts/config/all-in-one-ts.json b/scripts/config/all-in-one-ts.json index 337dac7..dae2654 100644 --- a/scripts/config/all-in-one-ts.json +++ b/scripts/config/all-in-one-ts.json @@ -4,6 +4,7 @@ "generate_mode": "all-in-one", "save_dir": "./snapshots/all-in-one-ts", "trim_icon_prefix": "icon", + "unit": "rem", "default_icon_size": 16, "summary_component_name": "Icon" } diff --git a/scripts/config/depends-on-js.json b/scripts/config/depends-on-js.json index f89e1db..d110390 100644 --- a/scripts/config/depends-on-js.json +++ b/scripts/config/depends-on-js.json @@ -4,6 +4,7 @@ "generate_mode": "depends-on", "save_dir": "./snapshots/depends-on-js", "trim_icon_prefix": "icon", + "unit": "rem", "default_icon_size": 18, "summary_component_name": "IconFont" } diff --git a/scripts/config/depends-on-ts.json b/scripts/config/depends-on-ts.json index 0dd98f1..b374422 100644 --- a/scripts/config/depends-on-ts.json +++ b/scripts/config/depends-on-ts.json @@ -4,6 +4,7 @@ "generate_mode": "depends-on", "save_dir": "./snapshots/depends-on-ts", "trim_icon_prefix": "icon", + "unit": "px", "default_icon_size": 20, "summary_component_name": "CustomIcon" } diff --git a/snapshots/all-in-one-js/Icon.js b/snapshots/all-in-one-js/Icon.js index 074f497..86abc8a 100644 --- a/snapshots/all-in-one-js/Icon.js +++ b/snapshots/all-in-one-js/Icon.js @@ -10,7 +10,7 @@ const Icon = ({ color, name, size, ...rest }) => { switch (name) { case 'alipay': return ( - + { ); case 'user': return ( - + { ); case 'setup': return ( - + = ({ color, name, size, ...rest }) => { switch (name) { case 'alipay': return ( - + = ({ color, name, size, ...rest }) => { ); case 'user': return ( - + = ({ color, name, size, ...rest }) => { ); case 'setup': return ( - + { return ( - + { return ( - + { return ( - + = ({ size, color, ...rest }) => { return ( - + = ({ size, color, ...rest }) => { return ( - + = ({ size, color, ...rest }) => { return ( - + { const iconIdAfterTrim = config.trim_icon_prefix ? iconId.replace( new RegExp(`^${config.trim_icon_prefix}(.+?)$`), - (_, value) => value.replace(/^[-_]?(.+?)$/, '$1') + (_, value) => value.replace(/^[-_.=+#@!~*]+(.+?)$/, '$1') ) : iconId; const componentName = upperFirst(camelCase(iconId)); @@ -73,6 +74,7 @@ export const generateComponent = (data: XmlData, config: Config) => { singleFile = replaceComponentName(singleFile, componentName); singleFile = replaceSingleIconContent(singleFile, generateCase(item, 4)); singleFile = replaceToOneComments(singleFile); + singleFile = replaceSizeUnit(singleFile, config.unit); fs.writeFileSync(path.join(saveDir, componentName + jsxExtension), singleFile); @@ -107,6 +109,7 @@ export const generateComponent = (data: XmlData, config: Config) => { if (config.generate_mode === GENERATE_MODE.allInOne) { iconFile = replaceToDependsComments(iconFile); iconFile = replaceColorFunc(iconFile, jsExtension); + iconFile = replaceSizeUnit(iconFile, config.unit); } else { iconFile = replaceToOneComments(iconFile); iconFile = replaceNoColor(iconFile); diff --git a/src/libs/getConfig.ts b/src/libs/getConfig.ts index dffb16b..931d022 100644 --- a/src/libs/getConfig.ts +++ b/src/libs/getConfig.ts @@ -10,6 +10,7 @@ export interface Config { save_dir: string; generate_mode: GENERATE_MODE; trim_icon_prefix: string; + unit: string; default_icon_size: number; summary_component_name: string; } @@ -42,6 +43,7 @@ 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.summary_component_name = config.summary_component_name || defaultConfig.summary_component_name; + config.unit = config.unit || defaultConfig.unit; if (!Object.values(GENERATE_MODE).includes(config.generate_mode)) { console.warn(colors.red(`Property generate_mode should be only one of ${JSON.stringify(Object.values(GENERATE_MODE))}`)); diff --git a/src/libs/iconfont.json b/src/libs/iconfont.json index 2dd06a3..51cc4c2 100644 --- a/src/libs/iconfont.json +++ b/src/libs/iconfont.json @@ -4,6 +4,7 @@ "save_dir": "./src/components/iconfont", "generate_mode": "all-in-one", "trim_icon_prefix": "icon", + "unit": "px", "default_icon_size": 18, "summary_component_name": "Icon" } diff --git a/src/libs/replace.ts b/src/libs/replace.ts index 5b37948..715d790 100644 --- a/src/libs/replace.ts +++ b/src/libs/replace.ts @@ -66,3 +66,7 @@ export const replaceNoColor = (content: string) => { export const replaceSummaryIcon = (content: string, iconName: string) => { return content.replace(/#SummaryIcon#/g, iconName); }; + +export const replaceSizeUnit = (content: string, unit: string) => { + return content.replace(/\{size\}/g, `{size + '${unit}'}`); +};