[Icon]支持svg的icon

[youluna]

Component

Icon

Feature Description

优势

1. svg格式支持彩色 —— 满足设计师诉求
2. svg作为HTML标签引入到页面上，相比较与iconfont需要请求下载字体文件的方式，svg格式不会闪烁（iconfont可能会有at.alicdn.com加载失败导致出现小方块的问题，以及编码不正确出现的乱码问题）

改造点

• 组件（暂不考虑按需）
• 配置平台
• 工程配套
• FusionCool

组件

为保证兼容，iconfont格式在基础组件的导出中仍然要保留（因为更改了dom结构，用户对iconfont格式的覆盖会失效），但配置平台导出的主题包可以提供选择让用户只加载其中一种。

改造点

• <SvgIcon /> 作为新组件加入Next（用不到的用户可以被按需加载处理掉）—— P0
• <SvgIcon /> 支持设置style(font-size, color) 、size等，保证用户迁移成本基本为0 —— P0

改造方案

1. 增加新组件 SvgIcon ，使用方式如下

// iconfont
import { Icon } from '@alifd/next';
<Icon type="atm" />

// svg
import { SvgIcon as Icon } from '@alifd/next';
<Icon type="atm" />

创建小包 @alifd/next-icons 存储默认icon的svg模式，小包目录结构为：

├── build/                         # 构建产物
├── demo/                          # 本地模拟数据
│   └── basic.md
├── src/                           # 源码
│   └── index.ts     
├── lib/         
│   ├─   main.scss              # 保证去掉，为支持css-variable                
│   ├─   style.js                    # 保证去掉，为支持css-variable
│   └── index.js

├── svg/                           # svg icon源文件
│   └── base/                   # 默认icon
│       ├── atm.svg                   
│       ├── arrow-right.svg        
│       ├── arrow-left.svg                 
│       ├── success.svg                
│       └── error.svg                  
│
├── babel.config.js
├── README.md
└── package.json

next大包结构如下：

├── build/                            # 构建产物
├── docs/                            # 本地模拟数据
│   ├─   ...       
│   └─  svg-icon/                  # 增加目录
│      ├─   demo/                    # 增加 
│      └── index.md                  
|
├── lib/         
│   ├─   ...                           
│   ├─   svg-icon/                    # 增加目录
│   ├─   index.d.ts                   # 增加 `export { default as SvgIcon } from './svg-icon';`
│   └── index.js                     # 增加 SvgIcon
├── es/                         #  同lib
├── types/                      #  同 lib
├── src/         
│   ├─   ...                           
│   ├─   svg-icon/                    # 增加目录
│   │   ├─   main.scss
│   │   ├─   style.js 
│   │   └─   index.js                  # 引入 SvgIcon `import SvgIcon from '@alifd/next-icons';export default SvgIcon;`
│   ├─ index.d.ts                    # 增加 `export { default as SvgIcon } from './svg-icon';`
│   └── index.js                     # 增加 SvgIcon           
├── babel.config.js
├── README.md
└── package.json

对于@alifd/next：

• 再dist/next.min.js dist/next.js中增加内置的基础icon（这样，默认情况下会有两份icon，一份svg、一份css）

配置平台

对于 @alifd/theme-xxxx：

• 修改@alifd/next-theme-template，让主题包中的dist/next.min.js dist/next.js包含基础+自定义icon —— P0

对于平台：

• 修改@alifd/next-theme-template，增加dist/svgicon.min.js（功能相当于icon.scss）, 为工程提供svg素材 —— P0
• 修改@alifd/next-theme-template，保证发布的主题包中的dist/next.min.js dist/next.js包含自定义的icon —— P0
• 支持SvgIcon后，主题包默认同时支持font icon和 svg icon，为给用户提供选择，完全摆脱font的icon，配置平台站点增加选择，可以只加载svg，不加载font icon —— P0

工程配套

改造点

• 新增一个类似@alifd/next-theme-webpack-plugin的插件，引入主题下的全量SvgIcon —— P0(新方案默认通过类似组件引入的方式实现，icon不需要再特殊处理 )
• 升级ice插件ice-plugin-fusion支持全量引入SvgIcon —— P0(新方案默认通过类似组件引入的方式实现，icon不需要再特殊处理 )
• 增加工程插件，支持SvgIcon按需引入 —— P2

FusionCool

// 接入 svg 格式的icon
基本没有影响，需要确认

[bindoon]

• @alifd/next-icons 是内置在 Next 大包里面吗？ 对包的体积影响有多大？
• “升级ice插件ice-plugin-fusion支持全量引入SvgIcon” 为什么要全量引入？和工具有是关系？

[youluna]

• @alifd/next-icons 是内置在 Next 大包里面吗？ 对包的体积影响有多大？
• “升级ice插件ice-plugin-fusion支持全量引入SvgIcon” 为什么要全量引入？和工具有是关系？

1. 是内置在 Next 大包里，包体积估计会增加 20k + 5k = 25k左右（参考http://at.alicdn.com/t/font_515771_xjdbujl2iu.js 的大小 ）
2. 已经去掉这一行，SvgIcon是通过组件的方式做的组件的按需（类似Button Collapse等），不需要通过插件再进行处理

[youluna]

争议点：

1. 要不要做，改动比较大，需要调研看用户实际需求。
2. 对于@alifd/next：在dist/next.min.js dist/next.js中增加内置的基础icon。这样，默认情况下会有两份icon，一份svg、一份css，这种方式能否被接受
3. 对于@alifd/theme-xxx：主题包中的dist/next.min.js dist/next.js包含自定义的icon ，部分团队比如icbu等团队包会很大
4. 两类按需：SvgIcon 跟 Icon 的按需，<Icon type="atm"> <Icon type="check">的按需

[zuoqi705]

我也觉得 Icon 应该同时支持 svg & unicode 两种形式，目前 pc 端主流都是 svg。。这点 antd 可能就比较好

• Ten reasons we switched from an icon font to SVG
• Icon Fonts vs SVGs - Which One Should You Use in 2018?

[youluna]

跨端融合项目需要支持mobile小程序，强制不支持svg标签，当前task 暂时hold，待重启