update generate icons for vue

Author: tangjinzhou

Diff for: packages/icons-vue/.eslintignore

@@ -2,3 +2,4 @@ node_modules/
 **/*.spec.*
 **/style/
 *.html
+src/icons

Diff for: packages/icons-vue/.gitignore

@@ -29,4 +29,10 @@ build/
 .vscode
 
 # publish
-*.tgz
+*.tgz
+
+/icons
+/*.js
+/*.d.ts
+!.jest.js
+!Icon.d.ts

Diff for: packages/icons-vue/.jest.js

@@ -1,35 +1,26 @@
 const libDir = process.env.LIB_DIR;
 
 const transformIgnorePatterns = [
-  '/dist/', 'node_modules\/[^/]+?\/(?!(es|node_modules)\/)', // Ignore modules without es dir
+  '/dist/',
+  'node_modules/[^/]+?/(?!(es|node_modules)/)', // Ignore modules without es dir
 ];
 
 module.exports = {
   testURL: 'http://localhost/',
-  moduleFileExtensions: [
-    "js",
-    "jsx",
-    "json",
-    "vue",
-  ],
+  moduleFileExtensions: ['js', 'jsx', 'json', 'vue'],
   modulePathIgnorePatterns: ['/_site/'],
-  testPathIgnorePatterns: [
-    '/node_modules/', 'node'
-  ],
+  testPathIgnorePatterns: ['/node_modules/', 'node'],
   transform: {
-    ".*\\.(vue)$": "<rootDir>/node_modules/vue-jest",
-    "^.+\\.(js|jsx)$": "<rootDir>/node_modules/babel-jest"
+    '.*\\.(vue)$': '<rootDir>/node_modules/vue-jest',
+    '^.+\\.(js|jsx)$': '<rootDir>/node_modules/babel-jest',
   },
-  testRegex: libDir === 'dist'
-    ? 'demo\\.test\\.js$'
-    : '.*\\.test\\.js$',
+  testRegex: libDir === 'dist' ? 'demo\\.test\\.js$' : '.*\\.test\\.js$',
   moduleNameMapper: {
-    "^@/(.*)$": "<rootDir>/$1",
+    '^@/(.*)$': '<rootDir>/$1',
   },
-  snapshotSerializers: ["<rootDir>/node_modules/jest-serializer-vue"],
+  snapshotSerializers: ['<rootDir>/node_modules/jest-serializer-vue'],
   collectCoverage: process.env.COVERAGE === 'true',
-  collectCoverageFrom: [
-    "src/**/*.{js,jsx,vue}",
-  ],
-  transformIgnorePatterns
+  collectCoverageFrom: ['src/**/*.{js,jsx,vue}'],
+  transformIgnorePatterns,
+  verbose: true,
 };

Diff for: packages/icons-vue/examples/basic.jsx

@@ -1,24 +1,27 @@
 import Vue from 'vue';
-import { Home, SettingFilled } from '../src';
-import Icon, { Smile, Sync, Loading, Filter } from '../src';
+import { SmileOutlined, SyncOutlined, LoadingOutlined, HomeOutlined, SettingFilled } from '../src';
+import Icon, { FilterOutlined } from '../src';
+import { AntDesignOutlined } from '@ant-design/icons-svg';
+import IconBase from '../src/components/IconBase';
 
-Vue.component(Filter.name, Filter);
+Vue.component(FilterOutlined.name, FilterOutlined);
 const SimpleDemo = {
   render() {
     return (
       <div class="icons-list">
-        <Home />
+        <HomeOutlined />
         <SettingFilled />
-        <Smile />
-        <Sync spin />
-        <Smile rotate={180} />
-        <Loading />
-        <icon-filter />
+        <SmileOutlined />
+        <SyncOutlined spin />
+        <SmileOutlined rotate={180} />
+        <LoadingOutlined />
+        <icon-filter-outlined />
         <Icon viewBox="0 0 24 24">
           <title>Cool Home</title>
           <path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z" />
         </Icon>
         <Icon viewBox="0 0 24 24"></Icon>
+        <IconBase icon={AntDesignOutlined} />
       </div>
     );
   },

Diff for: packages/icons-vue/examples/simple.jsx

@@ -1,54 +1,54 @@
-import Vue from "vue";
-import { AntDesign, Dashboard, Twitter } from "../src";
-import "./index.less";
+import Vue from 'vue';
+import { AntDesignOutlined, DashboardOutlined, TwitterOutlined } from '../src';
+import './index.less';
 
-const displaySize = ["64px", "48px", "32px", "24px", "16px", "12px", "8px"];
+const displaySize = ['64px', '48px', '32px', '24px', '16px', '12px', '8px'];
 const relatedHref =
-  "https://blog.prototypr.io/align-svg-icons-to-text-and-say-goodbye-to-font-icons-d44b3d7b26b4";
+  'https://blog.prototypr.io/align-svg-icons-to-text-and-say-goodbye-to-font-icons-d44b3d7b26b4';
 const SimpleDemo = {
   methods: {
     renderStatement(fontSize) {
       const style = {
         fontSize,
-        color: (fontSize === "48px" && "lightblue") || "inherit"
+        color: (fontSize === '48px' && 'lightblue') || 'inherit',
       };
       return (
         <div class="simple-wrap" key={fontSize} style={style}>
           {fontSize}
           Ant Design
-          <AntDesign />
+          <AntDesignOutlined />
           0123
-          <Dashboard />
+          <DashboardOutlined />
           你好
-          <Twitter />
+          <TwitterOutlined />
         </div>
       );
     },
     renderStatements() {
       return displaySize.map(fontSize => {
         return this.renderStatement(fontSize);
       });
-    }
+    },
   },
 
   render() {
     return (
       <div>
         <h1>Simple Demo - Icons Alignments</h1>
         {this.renderStatements()}
-        See{" "}
-        <a href={relatedHref} target={"_blank"}>
+        See{' '}
+        <a href={relatedHref} target={'_blank'}>
           related blog
-        </a>{" "}
+        </a>{' '}
         for detail.
       </div>
     );
-  }
+  },
 };
 
 new Vue({
-  el: "#__vue-content>div",
+  el: '#__vue-content>div',
   render() {
     return <SimpleDemo />;
-  }
+  },
 });

Diff for: packages/icons-vue/examples/use-iconfontcn.jsx

@@ -1,8 +1,8 @@
-import Vue from "vue";
-import { createFromIconfontCN } from "../src";
+import Vue from 'vue';
+import { createFromIconfontCN } from '../src';
 
 const IconFont = createFromIconfontCN({
-  scriptUrl: "//at.alicdn.com/t/font_8d5l8fzk5b87iudi.js"
+  scriptUrl: '//at.alicdn.com/t/font_8d5l8fzk5b87iudi.js',
 });
 
 const SimpleDemo = {
@@ -20,12 +20,12 @@ const SimpleDemo = {
         <IconFont type="icon-twitter" />
       </div>
     );
-  }
+  },
 };
 
 new Vue({
-  el: "#__vue-content>div",
+  el: '#__vue-content>div',
   render() {
     return <SimpleDemo />;
-  }
+  },
 });

Diff for: packages/icons-vue/package.json

@@ -13,26 +13,22 @@
     ],
     "license": "MIT",
     "scripts": {
-        "cleanup": "./scripts/cleanup.sh",
+        "clean": "./scripts/cleanup.sh",
         "start": "vc-tools run server",
         "lint": "eslint -c ./.eslintrc --fix --ext .jsx,.js,.vue ./src",
         "compile": "vc-tools run compile --babel-runtime",
         "build": "vc-tools run build",
         "dist": "vc-tools run dist",
         "test": "cross-env NODE_ENV=test jest --config .jest.js",
-        "generate": "node scripts/generateIcons.js",
-        "prepublishOnly": "npm run lint && npm run test && npm run compile && np --no-cleanup --yolo --no-publish"
+        "generate": "rimraf src/icons && node scripts/generate.js --target=icon",
+        "postcompile": "npm run clean && node scripts/generate.js --target=entry",
+        "prepublishOnly": "npm run lint && npm run generate && npm run compile && npm run test && np --no-cleanup --yolo --no-publish"
     },
-    "files": [
-        "es",
-        "lib"
-    ],
     "peerDependencies": {
         "vue": ">=2.5.0",
         "vue-template-compiler": ">=2.5.0"
     },
     "devDependencies": {
-        "@ant-design/icons": "^2.0.0",
         "@types/jest": "^24.0.17",
         "@types/node": "^10.5.5",
         "@types/vue": "^2.0.0",

Diff for: packages/icons-vue/scripts/cleanup.sh

@@ -1,4 +1,4 @@
 #!/bin/sh
 ls | grep -v .jest.js | grep -v .eslintrc.js | grep -e '.d.ts' -e '.js$' | xargs rm
 # keep one d.ts to make vscode auto import working with corrcet path
-rm ./es/icons/*.d.ts
+rm ./es/icons/*.d.ts || echo

Diff for: packages/icons-vue/scripts/generate.js

@@ -0,0 +1,129 @@
+const fs = require('fs');
+const path = require('path');
+const lodash = require('lodash');
+const allIconDefs = require('@ant-design/icons-svg');
+
+const fsPromises = fs.promises;
+const template = lodash.template;
+
+function walk(fn) {
+  return Promise.all(
+    Object.keys(allIconDefs).map(svgIdentifier => {
+      const iconDef = allIconDefs[svgIdentifier];
+
+      return fn({ svgIdentifier, ...iconDef });
+    }),
+  );
+}
+
+async function generateIcons() {
+  const iconsDir = path.join(__dirname, '../src/icons');
+  try {
+    await fsPromises.access(iconsDir);
+  } catch (err) {
+    await fsPromises.mkdir(iconsDir);
+  }
+
+  const render = template(
+    `
+// GENERATE BY ./scripts/generate.js
+// DON NOT EDIT IT MANUALLY
+
+import Icon from '../components/AntdIcon';
+import <%= svgIdentifier %>Svg from '@ant-design/icons-svg/lib/asn/<%= svgIdentifier %>';
+
+export default {
+  name: 'Icon<%= svgIdentifier %>',
+  displayName: '<%= svgIdentifier %>',
+  functional: true,
+  props: [ ...Icon.props ],
+  render: (h, { data, children, props }) =>
+    h(
+      Icon,
+      { ...data, props: { ...data.props, ...props, icon: <%= svgIdentifier %>Svg } },
+      children,
+    ),
+};
+`.trim(),
+  );
+
+  await walk(async ({ svgIdentifier }) => {
+    // generate icon file
+    await fsPromises.writeFile(
+      path.resolve(__dirname, `../src/icons/${svgIdentifier}.jsx`),
+      render({ svgIdentifier }),
+    );
+  });
+
+  // generate icon index
+  const entryText = Object.keys(allIconDefs)
+    .map(svgIdentifier => {
+      return `export { default as ${svgIdentifier} } from './${svgIdentifier}';`;
+    })
+    .join('\n');
+
+  await fsPromises.appendFile(
+    path.resolve(__dirname, '../src/icons/index.jsx'),
+    `
+// GENERATE BY ./scripts/generate.js
+// DON NOT EDIT IT MANUALLY
+    `.trim() +
+      '\n' +
+      entryText,
+  );
+}
+
+async function generateEntries() {
+  const render = template(
+    `
+'use strict';
+  Object.defineProperty(exports, "__esModule", {
+    value: true
+  });
+  exports.default = void 0;
+  
+  var _<%= svgIdentifier %> = _interopRequireDefault(require('./lib/icons/<%= svgIdentifier %>'));
+  
+  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
+  
+  var _default = _<%= svgIdentifier %>;
+  exports.default = _default;
+  module.exports = _default;
+`.trim(),
+  );
+
+  await walk(async ({ svgIdentifier }) => {
+    // generate `Icon.js` in root folder
+    await fsPromises.writeFile(
+      path.resolve(__dirname, `../${svgIdentifier}.js`),
+      render({
+        svgIdentifier,
+      }),
+    );
+
+    // generate `Icon.d.ts` in root folder
+    await fsPromises.writeFile(
+      path.resolve(__dirname, `../${svgIdentifier}.d.ts`),
+      `
+import { IconDefinition } from '@ant-design/icons-svg/lib/types';
+declare class ${svgIdentifier} extends Vue {
+  static install(vue: typeof Vue): void;
+  icon: IconDefinition;
+  twoToneColor?: string | [string, string];
+  tabIndex?: number;
+  spin?: boolean;
+  rotate?: number;
+};
+export default ${svgIdentifier};
+      `.trim(),
+    );
+  });
+}
+
+if (process.argv[2] === '--target=icon') {
+  generateIcons();
+}
+
+if (process.argv[2] === '--target=entry') {
+  generateEntries();
+}