feat: Add config property unit

iconfont-cli · Sep 29, 2019 · d8267ab · d8267ab
1 parent 72c060e
commit d8267ab
Show file tree

Hide file tree

Showing 18 changed files with 32 additions and 14 deletions.
diff --git 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
 
 注意，这个选项只针对 `<Icon />` 组件有效
 
+### unit
+图标的单位，默认是网页常用单位`px`即像素，也推荐您在手机网页中使用自适应的`rem`单位。
+
 ### default_icon_size
 我们将为每个生成的图标组件加入默认的字体大小，当然，你也可以通过传入props的方式改变这个size值。
 

diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -10,7 +10,7 @@ const Icon = ({ color, name, size, ...rest }) => {
   switch (name) {
     case 'alipay':
       return (
-        <svg viewBox="0 0 1024 1024" width={size} height={size} {...rest}>
+        <svg viewBox="0 0 1024 1024" width={size + 'px'} height={size + 'px'} {...rest}>
           <path
             d="M192 692.736c0-69.632 51.2-106.496 88.064-111.104 111.104-18.432 264.192 74.24 264.192 74.24-69.632 88.064-166.912 134.144-241.152 134.144-65.024-4.608-111.104-41.472-111.104-97.28z"
             fill={getIconColor(color, 0, '#5B8BD4')}
@@ -23,7 +23,7 @@ const Icon = ({ color, name, size, ...rest }) => {
       );
     case 'user':
       return (
-        <svg viewBox="0 0 1024 1024" width={size} height={size} {...rest}>
+        <svg viewBox="0 0 1024 1024" width={size + 'px'} height={size + 'px'} {...rest}>
           <path
             d="M518.07603918 6.737455c-174.95658274 0-316.73174462 141.77516188-316.73174465 316.73174464 0 82.95355218 32.42729765 159.11999552 84.46179858 214.92511241 16.59071043 18.09895683 35.44379047 33.93554407 55.80511691 47.5097617 50.5262545 33.93554407 111.61023382 53.54274731 176.46482916 53.5427473s126.69269785-19.60720323 176.46482915-53.5427473c20.36132644-13.57421762 39.21440646-29.41080486 55.80511691-47.5097617C803.13460934 482.58919514 834.80778381 406.42275179 834.80778381 323.46919964c0-174.95658274-141.77516188-316.73174462-316.73174463-316.73174464z m166.66122752 501.491929c-22.62369604 20.36132644-49.01800811 36.95203687-77.67468975 47.50976169-27.90255844 10.55772482-58.06748652 16.59071043-88.98653777 16.59071044s-61.83810252-6.03298562-88.98653779-16.59071044c-28.65668166-11.31184801-55.0509937-27.14843525-77.67468975-47.50976169C300.88855716 462.98199189 269.21538268 396.61915017 269.21538268 323.46919964c0-137.25042267 111.61023382-248.86065649 248.8606565-248.86065651s248.86065649 111.61023382 248.86065648 248.86065651c0 73.14995053-31.67317446 139.51279228-82.19942896 184.76018436z"
             fill={getIconColor(color, 0, '#263238')}
@@ -36,7 +36,7 @@ const Icon = ({ color, name, size, ...rest }) => {
       );
     case 'setup':
       return (
-        <svg viewBox="0 0 1024 1024" width={size} height={size} {...rest}>
+        <svg viewBox="0 0 1024 1024" width={size + 'px'} height={size + 'px'} {...rest}>
           <path
             d="M720.36316 371.018l-56.188-172.934c-4.654-14.322-20.036-22.16-34.358-17.506l-78.07 25.366c-7.25 2.356-15.224 0.726-20.912-4.346a256.276 256.276 0 0 0-41.218-29.96c-6.576-3.842-10.58-10.922-10.58-18.538V71.03c0-15.058-12.208-27.266-27.266-27.266h-181.834c-15.058 0-27.266 12.208-27.266 27.266v82.114c0 7.614-4.002 14.69-10.576 18.534a256.258 256.258 0 0 0-41.168 29.934c-5.69 5.074-13.664 6.704-20.916 4.348l-78.12-25.382c-14.322-4.654-29.704 3.184-34.356 17.506L1.34316 371.016c-4.654 14.322 3.184 29.704 17.506 34.356l78.05 25.36c7.252 2.356 12.754 8.364 14.366 15.816a253.468 253.468 0 0 0 15.718 48.46c3.072 6.984 2.162 15.076-2.322 21.248l-48.22 66.37c-8.852 12.182-6.15 29.234 6.032 38.084l147.108 106.882c12.182 8.852 29.234 6.15 38.086-6.032l48.188-66.326c4.484-6.17 11.894-9.538 19.484-8.776 8.404 0.844 16.926 1.284 25.552 1.284 8.604 0 17.104-0.44 25.486-1.28 7.588-0.76 14.998 2.606 19.48 8.776l48.184 66.32c8.852 12.182 25.902 14.884 38.086 6.032l147.108-106.882c12.182-8.852 14.882-25.902 6.032-38.084l-48.176-66.308c-4.486-6.174-5.394-14.268-2.32-21.252a253.424 253.424 0 0 0 15.75-48.544c1.612-7.454 7.114-13.46 14.368-15.816l77.968-25.334c14.322-4.65 22.16-20.032 17.506-34.352z m-359.472 120.706c-54.924 0-99.448-44.524-99.448-99.448s44.524-99.448 99.448-99.448 99.448 44.524 99.448 99.448-44.526 99.448-99.448 99.448z"
             fill={getIconColor(color, 0, '#5B6EA2')}

diff --git a/snapshots/all-in-one-ts/Icon.tsx b/snapshots/all-in-one-ts/Icon.tsx
@@ -19,7 +19,7 @@ const Icon: FunctionComponent<Props> = ({ color, name, size, ...rest }) => {
   switch (name) {
     case 'alipay':
       return (
-        <svg viewBox="0 0 1024 1024" width={size} height={size} {...rest}>
+        <svg viewBox="0 0 1024 1024" width={size + 'rem'} height={size + 'rem'} {...rest}>
           <path
             d="M192 692.736c0-69.632 51.2-106.496 88.064-111.104 111.104-18.432 264.192 74.24 264.192 74.24-69.632 88.064-166.912 134.144-241.152 134.144-65.024-4.608-111.104-41.472-111.104-97.28z"
             fill={getIconColor(color, 0, '#5B8BD4')}
@@ -32,7 +32,7 @@ const Icon: FunctionComponent<Props> = ({ color, name, size, ...rest }) => {
       );
     case 'user':
       return (
-        <svg viewBox="0 0 1024 1024" width={size} height={size} {...rest}>
+        <svg viewBox="0 0 1024 1024" width={size + 'rem'} height={size + 'rem'} {...rest}>
           <path
             d="M518.07603918 6.737455c-174.95658274 0-316.73174462 141.77516188-316.73174465 316.73174464 0 82.95355218 32.42729765 159.11999552 84.46179858 214.92511241 16.59071043 18.09895683 35.44379047 33.93554407 55.80511691 47.5097617 50.5262545 33.93554407 111.61023382 53.54274731 176.46482916 53.5427473s126.69269785-19.60720323 176.46482915-53.5427473c20.36132644-13.57421762 39.21440646-29.41080486 55.80511691-47.5097617C803.13460934 482.58919514 834.80778381 406.42275179 834.80778381 323.46919964c0-174.95658274-141.77516188-316.73174462-316.73174463-316.73174464z m166.66122752 501.491929c-22.62369604 20.36132644-49.01800811 36.95203687-77.67468975 47.50976169-27.90255844 10.55772482-58.06748652 16.59071043-88.98653777 16.59071044s-61.83810252-6.03298562-88.98653779-16.59071044c-28.65668166-11.31184801-55.0509937-27.14843525-77.67468975-47.50976169C300.88855716 462.98199189 269.21538268 396.61915017 269.21538268 323.46919964c0-137.25042267 111.61023382-248.86065649 248.8606565-248.86065651s248.86065649 111.61023382 248.86065648 248.86065651c0 73.14995053-31.67317446 139.51279228-82.19942896 184.76018436z"
             fill={getIconColor(color, 0, '#263238')}
@@ -45,7 +45,7 @@ const Icon: FunctionComponent<Props> = ({ color, name, size, ...rest }) => {
       );
     case 'setup':
       return (
-        <svg viewBox="0 0 1024 1024" width={size} height={size} {...rest}>
+        <svg viewBox="0 0 1024 1024" width={size + 'rem'} height={size + 'rem'} {...rest}>
           <path
             d="M720.36316 371.018l-56.188-172.934c-4.654-14.322-20.036-22.16-34.358-17.506l-78.07 25.366c-7.25 2.356-15.224 0.726-20.912-4.346a256.276 256.276 0 0 0-41.218-29.96c-6.576-3.842-10.58-10.922-10.58-18.538V71.03c0-15.058-12.208-27.266-27.266-27.266h-181.834c-15.058 0-27.266 12.208-27.266 27.266v82.114c0 7.614-4.002 14.69-10.576 18.534a256.258 256.258 0 0 0-41.168 29.934c-5.69 5.074-13.664 6.704-20.916 4.348l-78.12-25.382c-14.322-4.654-29.704 3.184-34.356 17.506L1.34316 371.016c-4.654 14.322 3.184 29.704 17.506 34.356l78.05 25.36c7.252 2.356 12.754 8.364 14.366 15.816a253.468 253.468 0 0 0 15.718 48.46c3.072 6.984 2.162 15.076-2.322 21.248l-48.22 66.37c-8.852 12.182-6.15 29.234 6.032 38.084l147.108 106.882c12.182 8.852 29.234 6.15 38.086-6.032l48.188-66.326c4.484-6.17 11.894-9.538 19.484-8.776 8.404 0.844 16.926 1.284 25.552 1.284 8.604 0 17.104-0.44 25.486-1.28 7.588-0.76 14.998 2.606 19.48 8.776l48.184 66.32c8.852 12.182 25.902 14.884 38.086 6.032l147.108-106.882c12.182-8.852 14.882-25.902 6.032-38.084l-48.176-66.308c-4.486-6.174-5.394-14.268-2.32-21.252a253.424 253.424 0 0 0 15.75-48.544c1.612-7.454 7.114-13.46 14.368-15.816l77.968-25.334c14.322-4.65 22.16-20.032 17.506-34.352z m-359.472 120.706c-54.924 0-99.448-44.524-99.448-99.448s44.524-99.448 99.448-99.448 99.448 44.524 99.448 99.448-44.526 99.448-99.448 99.448z"
             fill={getIconColor(color, 0, '#5B6EA2')}

diff --git a/snapshots/depends-on-js/IconAlipay.js b/snapshots/depends-on-js/IconAlipay.js
@@ -8,7 +8,7 @@ import { getIconColor } from './helper';
 // And then regenerate icons by using cli command.
 const IconAlipay = ({ size, color, ...rest }) => {
   return (
-    <svg viewBox="0 0 1024 1024" width={size} height={size} {...rest}>
+    <svg viewBox="0 0 1024 1024" width={size + 'rem'} height={size + 'rem'} {...rest}>
       <path
         d="M192 692.736c0-69.632 51.2-106.496 88.064-111.104 111.104-18.432 264.192 74.24 264.192 74.24-69.632 88.064-166.912 134.144-241.152 134.144-65.024-4.608-111.104-41.472-111.104-97.28z"
         fill={getIconColor(color, 0, '#5B8BD4')}

diff --git a/snapshots/depends-on-js/IconSetup.js b/snapshots/depends-on-js/IconSetup.js
@@ -8,7 +8,7 @@ import { getIconColor } from './helper';
 // And then regenerate icons by using cli command.
 const IconSetup = ({ size, color, ...rest }) => {
   return (
-    <svg viewBox="0 0 1024 1024" width={size} height={size} {...rest}>
+    <svg viewBox="0 0 1024 1024" width={size + 'rem'} height={size + 'rem'} {...rest}>
       <path
         d="M720.36316 371.018l-56.188-172.934c-4.654-14.322-20.036-22.16-34.358-17.506l-78.07 25.366c-7.25 2.356-15.224 0.726-20.912-4.346a256.276 256.276 0 0 0-41.218-29.96c-6.576-3.842-10.58-10.922-10.58-18.538V71.03c0-15.058-12.208-27.266-27.266-27.266h-181.834c-15.058 0-27.266 12.208-27.266 27.266v82.114c0 7.614-4.002 14.69-10.576 18.534a256.258 256.258 0 0 0-41.168 29.934c-5.69 5.074-13.664 6.704-20.916 4.348l-78.12-25.382c-14.322-4.654-29.704 3.184-34.356 17.506L1.34316 371.016c-4.654 14.322 3.184 29.704 17.506 34.356l78.05 25.36c7.252 2.356 12.754 8.364 14.366 15.816a253.468 253.468 0 0 0 15.718 48.46c3.072 6.984 2.162 15.076-2.322 21.248l-48.22 66.37c-8.852 12.182-6.15 29.234 6.032 38.084l147.108 106.882c12.182 8.852 29.234 6.15 38.086-6.032l48.188-66.326c4.484-6.17 11.894-9.538 19.484-8.776 8.404 0.844 16.926 1.284 25.552 1.284 8.604 0 17.104-0.44 25.486-1.28 7.588-0.76 14.998 2.606 19.48 8.776l48.184 66.32c8.852 12.182 25.902 14.884 38.086 6.032l147.108-106.882c12.182-8.852 14.882-25.902 6.032-38.084l-48.176-66.308c-4.486-6.174-5.394-14.268-2.32-21.252a253.424 253.424 0 0 0 15.75-48.544c1.612-7.454 7.114-13.46 14.368-15.816l77.968-25.334c14.322-4.65 22.16-20.032 17.506-34.352z m-359.472 120.706c-54.924 0-99.448-44.524-99.448-99.448s44.524-99.448 99.448-99.448 99.448 44.524 99.448 99.448-44.526 99.448-99.448 99.448z"
         fill={getIconColor(color, 0, '#5B6EA2')}

diff --git a/snapshots/depends-on-js/IconUser.js b/snapshots/depends-on-js/IconUser.js
@@ -8,7 +8,7 @@ import { getIconColor } from './helper';
 // And then regenerate icons by using cli command.
 const IconUser = ({ size, color, ...rest }) => {
   return (
-    <svg viewBox="0 0 1024 1024" width={size} height={size} {...rest}>
+    <svg viewBox="0 0 1024 1024" width={size + 'rem'} height={size + 'rem'} {...rest}>
       <path
         d="M518.07603918 6.737455c-174.95658274 0-316.73174462 141.77516188-316.73174465 316.73174464 0 82.95355218 32.42729765 159.11999552 84.46179858 214.92511241 16.59071043 18.09895683 35.44379047 33.93554407 55.80511691 47.5097617 50.5262545 33.93554407 111.61023382 53.54274731 176.46482916 53.5427473s126.69269785-19.60720323 176.46482915-53.5427473c20.36132644-13.57421762 39.21440646-29.41080486 55.80511691-47.5097617C803.13460934 482.58919514 834.80778381 406.42275179 834.80778381 323.46919964c0-174.95658274-141.77516188-316.73174462-316.73174463-316.73174464z m166.66122752 501.491929c-22.62369604 20.36132644-49.01800811 36.95203687-77.67468975 47.50976169-27.90255844 10.55772482-58.06748652 16.59071043-88.98653777 16.59071044s-61.83810252-6.03298562-88.98653779-16.59071044c-28.65668166-11.31184801-55.0509937-27.14843525-77.67468975-47.50976169C300.88855716 462.98199189 269.21538268 396.61915017 269.21538268 323.46919964c0-137.25042267 111.61023382-248.86065649 248.8606565-248.86065651s248.86065649 111.61023382 248.86065648 248.86065651c0 73.14995053-31.67317446 139.51279228-82.19942896 184.76018436z"
         fill={getIconColor(color, 0, '#263238')}

diff --git a/snapshots/depends-on-ts/IconAlipay.tsx b/snapshots/depends-on-ts/IconAlipay.tsx
@@ -14,7 +14,7 @@ interface Props {
 // And then regenerate icons by using cli command.
 const IconAlipay: FunctionComponent<Props> = ({ size, color, ...rest }) => {
   return (
-    <svg viewBox="0 0 1024 1024" width={size} height={size} {...rest}>
+    <svg viewBox="0 0 1024 1024" width={size + 'px'} height={size + 'px'} {...rest}>
       <path
         d="M192 692.736c0-69.632 51.2-106.496 88.064-111.104 111.104-18.432 264.192 74.24 264.192 74.24-69.632 88.064-166.912 134.144-241.152 134.144-65.024-4.608-111.104-41.472-111.104-97.28z"
         fill={getIconColor(color, 0, '#5B8BD4')}

diff --git a/snapshots/depends-on-ts/IconSetup.tsx b/snapshots/depends-on-ts/IconSetup.tsx
@@ -14,7 +14,7 @@ interface Props {
 // And then regenerate icons by using cli command.
 const IconSetup: FunctionComponent<Props> = ({ size, color, ...rest }) => {
   return (
-    <svg viewBox="0 0 1024 1024" width={size} height={size} {...rest}>
+    <svg viewBox="0 0 1024 1024" width={size + 'px'} height={size + 'px'} {...rest}>
       <path
         d="M720.36316 371.018l-56.188-172.934c-4.654-14.322-20.036-22.16-34.358-17.506l-78.07 25.366c-7.25 2.356-15.224 0.726-20.912-4.346a256.276 256.276 0 0 0-41.218-29.96c-6.576-3.842-10.58-10.922-10.58-18.538V71.03c0-15.058-12.208-27.266-27.266-27.266h-181.834c-15.058 0-27.266 12.208-27.266 27.266v82.114c0 7.614-4.002 14.69-10.576 18.534a256.258 256.258 0 0 0-41.168 29.934c-5.69 5.074-13.664 6.704-20.916 4.348l-78.12-25.382c-14.322-4.654-29.704 3.184-34.356 17.506L1.34316 371.016c-4.654 14.322 3.184 29.704 17.506 34.356l78.05 25.36c7.252 2.356 12.754 8.364 14.366 15.816a253.468 253.468 0 0 0 15.718 48.46c3.072 6.984 2.162 15.076-2.322 21.248l-48.22 66.37c-8.852 12.182-6.15 29.234 6.032 38.084l147.108 106.882c12.182 8.852 29.234 6.15 38.086-6.032l48.188-66.326c4.484-6.17 11.894-9.538 19.484-8.776 8.404 0.844 16.926 1.284 25.552 1.284 8.604 0 17.104-0.44 25.486-1.28 7.588-0.76 14.998 2.606 19.48 8.776l48.184 66.32c8.852 12.182 25.902 14.884 38.086 6.032l147.108-106.882c12.182-8.852 14.882-25.902 6.032-38.084l-48.176-66.308c-4.486-6.174-5.394-14.268-2.32-21.252a253.424 253.424 0 0 0 15.75-48.544c1.612-7.454 7.114-13.46 14.368-15.816l77.968-25.334c14.322-4.65 22.16-20.032 17.506-34.352z m-359.472 120.706c-54.924 0-99.448-44.524-99.448-99.448s44.524-99.448 99.448-99.448 99.448 44.524 99.448 99.448-44.526 99.448-99.448 99.448z"
         fill={getIconColor(color, 0, '#5B6EA2')}

diff --git a/snapshots/depends-on-ts/IconUser.tsx b/snapshots/depends-on-ts/IconUser.tsx
@@ -14,7 +14,7 @@ interface Props {
 // And then regenerate icons by using cli command.
 const IconUser: FunctionComponent<Props> = ({ size, color, ...rest }) => {
   return (
-    <svg viewBox="0 0 1024 1024" width={size} height={size} {...rest}>
+    <svg viewBox="0 0 1024 1024" width={size + 'px'} height={size + 'px'} {...rest}>
       <path
         d="M518.07603918 6.737455c-174.95658274 0-316.73174462 141.77516188-316.73174465 316.73174464 0 82.95355218 32.42729765 159.11999552 84.46179858 214.92511241 16.59071043 18.09895683 35.44379047 33.93554407 55.80511691 47.5097617 50.5262545 33.93554407 111.61023382 53.54274731 176.46482916 53.5427473s126.69269785-19.60720323 176.46482915-53.5427473c20.36132644-13.57421762 39.21440646-29.41080486 55.80511691-47.5097617C803.13460934 482.58919514 834.80778381 406.42275179 834.80778381 323.46919964c0-174.95658274-141.77516188-316.73174462-316.73174463-316.73174464z m166.66122752 501.491929c-22.62369604 20.36132644-49.01800811 36.95203687-77.67468975 47.50976169-27.90255844 10.55772482-58.06748652 16.59071043-88.98653777 16.59071044s-61.83810252-6.03298562-88.98653779-16.59071044c-28.65668166-11.31184801-55.0509937-27.14843525-77.67468975-47.50976169C300.88855716 462.98199189 269.21538268 396.61915017 269.21538268 323.46919964c0-137.25042267 111.61023382-248.86065649 248.8606565-248.86065651s248.86065649 111.61023382 248.86065648 248.86065651c0 73.14995053-31.67317446 139.51279228-82.19942896 184.76018436z"
         fill={getIconColor(color, 0, '#263238')}

diff --git a/src/libs/generateComponent.ts b/src/libs/generateComponent.ts
@@ -17,6 +17,7 @@ import {
   replaceNoColor,
   replaceSingleIconContent,
   replaceSize,
+  replaceSizeUnit,
   replaceSummaryIcon,
   replaceToDependsComments,
   replaceToOneComments,
@@ -50,7 +51,7 @@ export const generateComponent = (data: XmlData, config: Config) => {
     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
@@ -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
@@ -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
@@ -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}'}`);
+};