refactor icons-svg@4.x with gulp & rename icons-svg-legacy

[HeskeyBaozi]

该pr #91 由于冲突无法解决所以关闭

此 pr 包含以下可能具有破坏性的改动：

包相关变动

packages/icons 中的包名由 @ant-design/icons-svg 修改为 @ant-design/icons-svg-legacy。包名 @ant-design/icons-svg 由项目下的目录重写的 packages/icons-svg 继承。

新的 @ant-design/icons-svg 包和原来的版本 ( 4.0.0-alpha.0 和 @ant-design/icons <= 2.1.1 ) 相比，有如下改动：

• 不再提供用于存放未处理的图标的 svg 目录
• 不再提供用于全量引入的 dist.js 文件和压缩过的 umd.js 文件，全量引入直接用 import * as allIcons from '@ant-design/icons-svg'， 走 index.js 即可
• 不再提供用于 tree-shaking 的 lib/index.es.js 文件
• 不再提供用于字符串字面量引入用的短横线图标名称的清单 manifest.js 文件
• 提供 es 目录用于 tree-shaking

最终用户得到的目录如下：

es
inline-svg # 此为处理后存放的svg图标
lib
package.json
ReadMe.md

这些改动的原则都是倾向于按需引入，保证主入口文件只有图标的导出，使得 import * as allIcons from '@ant-design/icons-svg' 只会导出图标信息。

此PR来源于

#90
@ant-design/icon-kit 这个脚手架已自我废弃

目前图标

查看当前全部图标

为什么

• 不使用 rxjs
  响应式编程这类范式强大之处在于对可观察数据的时序性控制和数学上持续性赋值:=不同流的可组合性。图标生成就是文件系统IO和数据结构转换。显然gulp及其生态能把这个任务做得更好，rxjs也可以做但显然其长处并没有发挥出来，且编写无确切规范导致维护性差。

• 速度与维护选择

Before	icon-kit (rxjs)	gulp
15.42s	6.88s	9.55s

WIP

• npm prepublish

[HeskeyBaozi]

由于@ant-design/icons-svg@4.0.0-alpha.1未发包
所以icons/icons-vue/icons-angular仍然使用着2.1.1或者4.0.0-alpha.0版本。
建议合并后先锁版本发包icons/icons-vue，
再开始对icons/icons-vue/icons-angular基于新的4.0.0-alpha.1版本进行重构

基本引入构建思路：

import * as allIconDefs from '@ant-design/icons-svg';

const arr = Object.keys(allIconDefs).map(identifier => allIconDefs[identifier]);

Object.keys(allIconDefs).forEach(identifier => {
  const iconDef = allIconDefs[identifier];
  const { name, theme, icon } = iconDef;
  // do something
});

[vagusX]

由于@ant-design/icons-svg@4.0.0-alpha.1未发包
所以icons/icons-vue/icons-angular仍然使用着2.1.1或者4.0.0-alpha.0版本。
建议合并后先锁版本发包icons/icons-vue，
再开始对icons/icons-vue/icons-angular基于新的4.0.0-alpha.1版本进行重构

基本引入构建思路：

import * as allIconDefs from '@ant-design/icons-svg';

const arr = Object.keys(allIconDefs).map(identifier => allIconDefs[identifier]);

Object.keys(allIconDefs).forEach(identifier => {
const iconDef = allIconDefs[identifier];
const { name, theme, icon } = iconDef;
// do something
});

@wendzhue 看看？

[wzhudev]

由于@ant-design/icons-svg@4.0.0-alpha.1未发包
所以icons/icons-vue/icons-angular仍然使用着2.1.1或者4.0.0-alpha.0版本。
建议合并后先锁版本发包icons/icons-vue，
再开始对icons/icons-vue/icons-angular基于新的4.0.0-alpha.1版本进行重构
基本引入构建思路：
import * as allIconDefs from '@ant-design/icons-svg';
const arr = Object.keys(allIconDefs).map(identifier => allIconDefs[identifier]);
Object.keys(allIconDefs).forEach(identifier => {
const iconDef = allIconDefs[identifier];
const { name, theme, icon } = iconDef;
// do something
});

@wendzhue 看看？

[wzhudev]

Angular 的 js 文件没有像 React 和 Vue（或者说公用底包 /icons-svg）那样拆成 AST 树，直接就是 SVG 字面量（用的时侯直接 innerHTML 即可），因为 Angular 没有原生 v-DOM 和渲染函数的支持。

不过好像我在 Angular 这边对打包脚本稍作修改就可以了，问题不大。

[HeskeyBaozi]

@wendzhue 我的本意是不希望再把整个构建过程像原来的icons-angular照搬一边+微修改的。利用提供的渲染函数写一个新的生成脚本替代原来的直接搬过来的替代过程如何？

思路类似这样

// generate.ts
// $ node generate.ts --require ts-node/register
import * as allIconDefs from '@ant-design/icons-svg';
import { renderIconDefinitionToSVGElement } from '@ant-design/icons-svg/es/helpers';
import { IconDefinition } from '@ant-design/icons-svg/es/types';
import * as path from 'path';
import { writeFile, emptyDir } from 'fs-extra';

export interface IconDefinitionNg extends Omit<IconDefinition, 'icon'> {
  identifier: string;
  icon: string;
}

export function walk<T>(fn: (iconDef: IconDefinitionNg) => Promise<T>) {
  return Promise.all(
    Object.keys(allIconDefs).map((identifier) => {
      const iconDef = (allIconDefs as { [id: string]: IconDefinition })[
        identifier
      ];
      const { name, theme } = iconDef;
      const inlineSvg = renderIconDefinitionToSVGElement(iconDef, {
        // the options only affect the two-tone icons.
        placeholders: { primaryColor: '#333', secondaryColor: '#E6E6E6' }
      });

      return fn({ name, theme, icon: inlineSvg, identifier });
    })
  );
}

(async () => {
  await emptyDir(path.resolve(__dirname, `../lib/icons/defs`));

  const publicApiRows = await walk(async ({ identifier, ...iconDef }) => {
    await writeFile(
      path.resolve(__dirname, `../lib/icons/defs/${identifier}.ts`),
      `export const ${identifier} = ${JSON.stringify(iconDef)};`,
      'utf8'
    );

    return `export { ${identifier} } from './defs/${identifier}';`;
  });

  await writeFile(
    path.resolve(__dirname, `../lib/icons/public_api.ts`),
    publicApiRows.join('\n'),
    'utf8'
  );
})();

生成效果：