[Chore] auto generate icon index.js

packages/core/configs/svgr/componentTemplate.js

@@ -0,0 +1,37 @@
+/**
+ * Receive params from svgr, return component template.
+ * The `template` param is from babel-template (https://babeljs.io/docs/en/next/babel-template.html)
+ * See svgr document (https://react-svgr.com/docs/custom-templates/#custom-index-template)
+ */
+function componentTemplate(
+    { template },
+    opts,
+    {
+        componentName,
+        props,
+        jsx,
+    },
+) {
+    /**
+     * Because we cannot keep line break with template.ast (https://babeljs.io/docs/en/next/babel-template.html#ast-1),
+     * we have to write it like this to inject newline and other arguments.
+     * See usage: https://babeljs.io/docs/en/next/babel-template.html#string-usage
+     */
+    const code = `
+    import React from 'react';
+    NEWLINE
+
+    export default function COMPONENT_NAME(PROPS) {
+    return JSX;
+    }
+    `;
+    const plugins = ['jsx'];
+    const componentTpl = template.smart(code, { plugins });
+    return componentTpl({
+        COMPONENT_NAME: componentName,
+        JSX: jsx,
+        PROPS: props,
+        NEWLINE: '\n',
+    });
+}
+module.exports = componentTemplate;

packages/core/configs/svgr/indexTemplate.js

@@ -0,0 +1,57 @@
+const path = require('path');
+
+function isUpperCase(char) {
+    return char.toUpperCase() === char;
+}
+
+/**
+ * Transform upper camel case (pascal case) string to kebab case.
+ * e.g. `AddItem` -> `add-item`
+ * @param {string} inputString
+ */
+function upperCamelCaseToKebabCase(inputString) {
+    let result = '';
+    inputString.split('').forEach((char, i) => {
+        if (isUpperCase(char)) {
+            if (i !== 0) {
+                result += '-';
+            }
+            result += char.toLowerCase();
+        } else {
+            result += char;
+        }
+    });
+    return result;
+}
+/**
+ * Receive icon component file absolut path array,
+ * return the content of `index.js`.
+ * See svgr document: https://react-svgr.com/docs/custom-templates/#custom-index-template
+ * @param {string[]} iconComponentFileAbsPaths Array of component file absolute path.
+ * @returns {string} Plain text for the index js file.
+ */
+function indexTemplate(iconComponentFileAbsPaths) {
+    const importStatements = iconComponentFileAbsPaths.map((filePath) => {
+        const componentFileNameWithoutExt = path.basename(filePath, path.extname(filePath));
+        /* Let's assume component name is as same as filename */
+        return `import ${componentFileNameWithoutExt} from './${componentFileNameWithoutExt}';`;
+    });
+    const exportStatements = iconComponentFileAbsPaths.map((filePath) => {
+        const componentFileNameWithoutExt = path.basename(filePath, path.extname(filePath));
+        /**
+         * icon type on <Icon /> is kebab case.
+         * svgr will transform it to upper camel case(pascal case) for component.
+         * Here we just transform it back.
+         */
+        const originalSvgName = upperCamelCaseToKebabCase(componentFileNameWithoutExt);
+        const keyString = originalSvgName.includes('-') ? `'${originalSvgName}'` : originalSvgName;
+        return `${keyString}: ${componentFileNameWithoutExt},`;
+    });
+    return `${importStatements.join('\n')}
+
+export default {
+${exportStatements.map(s => `    ${s}`).join('\n')}
+};
+`;
+}
+module.exports = indexTemplate;

packages/core/configs/svgr/svgr.config.js

@@ -0,0 +1,11 @@
+const template = require('./componentTemplate');
+const indexTemplate = require('./indexTemplate');
+
+module.exports = {
+    template,
+    indexTemplate,
+    prettier: true,
+    prettierConfig: {
+        singleQuote: true,
+    },
+};

packages/core/package.json

@@ -27,7 +27,7 @@
     "build:dist": "webpack --config ./configs/webpack.dist.js --color",
     "build:lib": "BABEL_ENV=lib babel src --root-mode=upward --out-dir lib",
     "build:es": "BABEL_ENV=es babel src --root-mode=upward --out-dir es",
-    "generate-icon-components": "npx @svgr/cli --icon -d src/icons/components",
+    "generate-icon-components": "npx @svgr/cli --config-file configs/svgr/svgr.config.js --icon -d src/icons/components src/icons/svg",
     "clean": "rm -rf ./dist ./lib ./es ./deploy"
   },
   "peerDependencies": {

packages/core/src/Icon.js

@@ -8,7 +8,7 @@ import prefixClass from './utils/prefixClass';
 import './styles/_animations.scss';
 import './styles/Icon.scss';
 
-import SvgMap from './icons';
+import SvgMap from './icons/components';
 
 const COMPONENT_NAME = prefixClass('icon');
 const ROOT_BEM = icBEM(COMPONENT_NAME);

packages/core/src/icons/components/Add.js

@@ -1,6 +1,6 @@
-import * as React from 'react';
+import React from 'react';
 
-function SvgAdd(props) {
+export default function SvgAdd(props) {
     return (
         <svg width="1em" height="1em" viewBox="0 0 32 32" {...props}>
             <path
@@ -11,5 +11,3 @@ function SvgAdd(props) {
         </svg>
     );
 }
-
-export default SvgAdd;

packages/core/src/icons/components/AddItem.js

@@ -1,6 +1,6 @@
-import * as React from 'react';
+import React from 'react';
 
-function SvgAddItem(props) {
+export default function SvgAddItem(props) {
     return (
         <svg width="1em" height="1em" viewBox="0 0 1000 1000" {...props}>
             <path
@@ -11,5 +11,3 @@ function SvgAddItem(props) {
         </svg>
     );
 }
-
-export default SvgAddItem;

packages/core/src/icons/components/Announce.js

@@ -1,6 +1,6 @@
-import * as React from 'react';
+import React from 'react';
 
-function SvgAnnounce(props) {
+export default function SvgAnnounce(props) {
     return (
         <svg width="1em" height="1em" viewBox="0 0 32 32" {...props}>
             <path
@@ -11,5 +11,3 @@ function SvgAnnounce(props) {
         </svg>
     );
 }
-
-export default SvgAnnounce;

packages/core/src/icons/components/Cash.js

@@ -1,6 +1,6 @@
-import * as React from 'react';
+import React from 'react';
 
-function SvgCash(props) {
+export default function SvgCash(props) {
     return (
         <svg width="1em" height="1em" viewBox="0 0 1000 1000" {...props}>
             <path
@@ -11,5 +11,3 @@ function SvgCash(props) {
         </svg>
     );
 }
-
-export default SvgCash;

packages/core/src/icons/components/ClearItem.js

@@ -1,6 +1,6 @@
-import * as React from 'react';
+import React from 'react';
 
-function SvgClearItem(props) {
+export default function SvgClearItem(props) {
     return (
         <svg width="1em" height="1em" viewBox="0 0 1000 1000" {...props}>
             <path
@@ -11,5 +11,3 @@ function SvgClearItem(props) {
         </svg>
     );
 }
-
-export default SvgClearItem;

packages/core/src/icons/components/Copypaste.js

@@ -1,6 +1,6 @@
-import * as React from 'react';
+import React from 'react';
 
-function SvgCopypaste(props) {
+export default function SvgCopypaste(props) {
     return (
         <svg width="1em" height="1em" viewBox="0 0 32 32" {...props}>
             <path
@@ -10,5 +10,3 @@ function SvgCopypaste(props) {
         </svg>
     );
 }
-
-export default SvgCopypaste;

packages/core/src/icons/components/CreditCard.js

@@ -1,6 +1,6 @@
-import * as React from 'react';
+import React from 'react';
 
-function SvgCreditCard(props) {
+export default function SvgCreditCard(props) {
     return (
         <svg width="1em" height="1em" viewBox="0 0 1000 1000" {...props}>
             <path
@@ -11,5 +11,3 @@ function SvgCreditCard(props) {
         </svg>
     );
 }
-
-export default SvgCreditCard;

packages/core/src/icons/components/CrmAddress.js

@@ -1,6 +1,6 @@
-import * as React from 'react';
+import React from 'react';
 
-function SvgCrmAddress(props) {
+export default function SvgCrmAddress(props) {
     return (
         <svg width="1em" height="1em" viewBox="0 0 1000 1000" {...props}>
             <path
@@ -11,5 +11,3 @@ function SvgCrmAddress(props) {
         </svg>
     );
 }
-
-export default SvgCrmAddress;

packages/core/src/icons/components/CrmBirthday.js

@@ -1,6 +1,6 @@
-import * as React from 'react';
+import React from 'react';
 
-function SvgCrmBirthday(props) {
+export default function SvgCrmBirthday(props) {
     return (
         <svg width="1em" height="1em" viewBox="0 0 1000 1000" {...props}>
             <path
@@ -11,5 +11,3 @@ function SvgCrmBirthday(props) {
         </svg>
     );
 }
-
-export default SvgCrmBirthday;

packages/core/src/icons/components/CrmEmail.js

@@ -1,6 +1,6 @@
-import * as React from 'react';
+import React from 'react';
 
-function SvgCrmEmail(props) {
+export default function SvgCrmEmail(props) {
     return (
         <svg width="1em" height="1em" viewBox="0 0 1000 1000" {...props}>
             <path
@@ -11,5 +11,3 @@ function SvgCrmEmail(props) {
         </svg>
     );
 }
-
-export default SvgCrmEmail;

packages/core/src/icons/components/CrmGender.js

@@ -1,6 +1,6 @@
-import * as React from 'react';
+import React from 'react';
 
-function SvgCrmGender(props) {
+export default function SvgCrmGender(props) {
     return (
         <svg width="1em" height="1em" viewBox="0 0 1000 1000" {...props}>
             <path
@@ -11,5 +11,3 @@ function SvgCrmGender(props) {
         </svg>
     );
 }
-
-export default SvgCrmGender;

packages/core/src/icons/components/CrmMemberName.js

@@ -1,6 +1,6 @@
-import * as React from 'react';
+import React from 'react';
 
-function SvgCrmMemberName(props) {
+export default function SvgCrmMemberName(props) {
     return (
         <svg width="1em" height="1em" viewBox="0 0 1000 1000" {...props}>
             <path
@@ -11,5 +11,3 @@ function SvgCrmMemberName(props) {
         </svg>
     );
 }
-
-export default SvgCrmMemberName;

packages/core/src/icons/components/CrmMemberNote.js

@@ -1,6 +1,6 @@
-import * as React from 'react';
+import React from 'react';
 
-function SvgCrmMemberNote(props) {
+export default function SvgCrmMemberNote(props) {
     return (
         <svg width="1em" height="1em" viewBox="0 0 1000 1000" {...props}>
             <path
@@ -11,5 +11,3 @@ function SvgCrmMemberNote(props) {
         </svg>
     );
 }
-
-export default SvgCrmMemberNote;

packages/core/src/icons/components/CrmPhoneLand.js

@@ -1,6 +1,6 @@
-import * as React from 'react';
+import React from 'react';
 
-function SvgCrmPhoneLand(props) {
+export default function SvgCrmPhoneLand(props) {
     return (
         <svg width="1em" height="1em" viewBox="0 0 1000 1000" {...props}>
             <path
@@ -11,5 +11,3 @@ function SvgCrmPhoneLand(props) {
         </svg>
     );
 }
-
-export default SvgCrmPhoneLand;

packages/core/src/icons/components/CrmPhoneMobile.js

@@ -1,6 +1,6 @@
-import * as React from 'react';
+import React from 'react';
 
-function SvgCrmPhoneMobile(props) {
+export default function SvgCrmPhoneMobile(props) {
     return (
         <svg width="1em" height="1em" viewBox="0 0 1000 1000" {...props}>
             <path
@@ -11,5 +11,3 @@ function SvgCrmPhoneMobile(props) {
         </svg>
     );
 }
-
-export default SvgCrmPhoneMobile;

packages/core/src/icons/components/CtbcDirect.js

@@ -1,6 +1,6 @@
-import * as React from 'react';
+import React from 'react';
 
-function SvgCtbcDirect(props) {
+export default function SvgCtbcDirect(props) {
     return (
         <svg width="1em" height="1em" viewBox="0 0 1000 1000" {...props}>
             <path
@@ -11,5 +11,3 @@ function SvgCtbcDirect(props) {
         </svg>
     );
 }
-
-export default SvgCtbcDirect;