添加默认样式配置

scripts/config/demo-js.json

@@ -4,5 +4,8 @@
   "save_dir": "./snapshots/demo-js",
   "trim_icon_prefix": "icon",
   "unit": "px",
-  "default_icon_size": 14
+  "default_icon_size": 14,
+  "default_style": {
+    "display": "inline-block"
+  }
 }

scripts/config/demo-ts.json

@@ -4,5 +4,8 @@
   "save_dir": "./snapshots/demo-ts",
   "trim_icon_prefix": "icon",
   "unit": "rem",
-  "default_icon_size": 16
+  "default_icon_size": 16,
+  "default_style": {
+    "display": "block"
+  }
 }

snapshots/demo-js/IconAlipay.js

@@ -4,8 +4,8 @@ import React from 'react';
 import { getIconColor } from './helper';
 
 const DEFAULT_STYLE = {
-  display: 'block',
-};
+ "display": "inline-block"
+}
 
 const IconAlipay = ({ size, color, style: _style, ...rest }) => {
   const style = _style ? { ...DEFAULT_STYLE, ..._style } : DEFAULT_STYLE;

snapshots/demo-js/IconSetup.js

@@ -4,8 +4,8 @@ import React from 'react';
 import { getIconColor } from './helper';
 
 const DEFAULT_STYLE = {
-  display: 'block',
-};
+ "display": "inline-block"
+}
 
 const IconSetup = ({ size, color, style: _style, ...rest }) => {
   const style = _style ? { ...DEFAULT_STYLE, ..._style } : DEFAULT_STYLE;

snapshots/demo-js/IconUser.js

@@ -4,8 +4,8 @@ import React from 'react';
 import { getIconColor } from './helper';
 
 const DEFAULT_STYLE = {
-  display: 'block',
-};
+ "display": "inline-block"
+}
 
 const IconUser = ({ size, color, style: _style, ...rest }) => {
   const style = _style ? { ...DEFAULT_STYLE, ..._style } : DEFAULT_STYLE;

snapshots/demo-ts/IconAlipay.tsx

@@ -10,8 +10,8 @@ interface Props extends Omit<SVGAttributes<SVGElement>, 'color'> {
 }
 
 const DEFAULT_STYLE: CSSProperties = {
-  display: 'block',
-};
+ "display": "block"
+}
 
 const IconAlipay: FunctionComponent<Props> = ({ size, color, style: _style, ...rest }) => {
   const style = _style ? { ...DEFAULT_STYLE, ..._style } : DEFAULT_STYLE;

snapshots/demo-ts/IconSetup.tsx

@@ -10,8 +10,8 @@ interface Props extends Omit<SVGAttributes<SVGElement>, 'color'> {
 }
 
 const DEFAULT_STYLE: CSSProperties = {
-  display: 'block',
-};
+ "display": "block"
+}
 
 const IconSetup: FunctionComponent<Props> = ({ size, color, style: _style, ...rest }) => {
   const style = _style ? { ...DEFAULT_STYLE, ..._style } : DEFAULT_STYLE;

snapshots/demo-ts/IconUser.tsx

@@ -10,8 +10,8 @@ interface Props extends Omit<SVGAttributes<SVGElement>, 'color'> {
 }
 
 const DEFAULT_STYLE: CSSProperties = {
-  display: 'block',
-};
+ "display": "block"
+}
 
 const IconUser: FunctionComponent<Props> = ({ size, color, style: _style, ...rest }) => {
   const style = _style ? { ...DEFAULT_STYLE, ..._style } : DEFAULT_STYLE;

src/libs/generateComponent.ts

@@ -10,6 +10,7 @@ import { getTemplate } from './getTemplate';
 import {
   replaceCases,
   replaceComponentName,
+  replaceDefaultStyle,
   replaceExports,
   replaceImports,
   replaceNames,
@@ -31,6 +32,7 @@ export const generateComponent = (data: XmlData, config: Config) => {
   const jsExtension = config.use_typescript ? '.ts' : '.js';
   let cases: string = '';
 
+
   mkdirp.sync(saveDir);
   glob.sync(path.join(saveDir, '*')).forEach((file) => fs.unlinkSync(file));
 
@@ -62,6 +64,7 @@ export const generateComponent = (data: XmlData, config: Config) => {
     singleFile = replaceComponentName(singleFile, componentName);
     singleFile = replaceSingleIconContent(singleFile, generateCase(item, 4));
     singleFile = replaceSizeUnit(singleFile, config.unit);
+    singleFile = replaceDefaultStyle(singleFile, config.default_style);
 
     fs.writeFileSync(path.join(saveDir, componentName + jsxExtension), singleFile);
 

src/libs/getConfig.ts

@@ -10,6 +10,7 @@ export interface Config {
   trim_icon_prefix: string;
   unit: string;
   default_icon_size: number;
+  default_style: Record<string, string>;
 }
 
 let cacheConfig: Config;

src/libs/iconfont.json

@@ -4,5 +4,8 @@
   "save_dir": "./src/components/iconfont",
   "trim_icon_prefix": "icon",
   "unit": "px",
-  "default_icon_size": 18
+  "default_icon_size": 18,
+  "default_style": {
+    "display": "block"
+  }
 }

src/libs/replace.ts

@@ -39,4 +39,10 @@ export const replaceExports = (content: string, exports: string[]) => {
   return content.replace(/#exports#/g, exports.map(
     (item) => `export { default as ${item} } from './${item}';`).join('\n')
   );
-}
+}
+
+export const replaceDefaultStyle = (content: string, defaultStyle: Record<string, string>) => {
+  return content.replace(/#defaultStyle#/g, JSON.stringify(defaultStyle, null, " ") || `{
+    "display": "block",
+  }`)
+};

src/templates/SingleIcon.js.template

@@ -3,9 +3,7 @@
 import React from 'react';
 import { getIconColor } from './helper';
 
-const DEFAULT_STYLE = {
-  display: 'block',
-};
+const DEFAULT_STYLE = #defaultStyle#
 
 const #componentName# = ({ size, color, style: _style, ...rest }) => {
   const style = _style ? { ...DEFAULT_STYLE, ..._style } : DEFAULT_STYLE;

src/templates/SingleIcon.tsx.template

@@ -9,9 +9,7 @@ interface Props extends Omit<SVGAttributes<SVGElement>, 'color'> {
   color?: string | string[];
 }
 
-const DEFAULT_STYLE: CSSProperties = {
-  display: 'block',
-};
+const DEFAULT_STYLE: CSSProperties = #defaultStyle#
 
 const #componentName#: FunctionComponent<Props> = ({ size, color, style: _style, ...rest }) => {
   const style = _style ? { ...DEFAULT_STYLE, ..._style } : DEFAULT_STYLE;