[Feature Request] [plugin-icons] <Icon /> 组件支持别名 / aliasing <Icon />

[tonywu6]

对于 plugin-icons，当 Icon 组件通过别名被使用时，对本地图标的使用在开发时或是编译时都不再被编译器检测到（除非显式地在 include 中提供）

正常情况下：

import { Icon } from 'umi';

// info  - [icons] generate icons local:some-icon
<Icon icon="local:some-icon" />;

别名的一个例子是使用 styled-components 为 Icon 组件提供样式：

import { Icon } from 'umi';
import styled from 'styled-components';

const MyIcon = styled(Icon)`
  color: red;
`;

// info  - [icons] no icons was found
<MyIcon icon="local:some-icon" />;

目前的一个 workaround 是将别名反过来：

import { Icon as UmiIcon } from 'umi';
import styled from 'styled-components';

const Icon = styled(UmiIcon)`
  color: red;
`;

// info  - [icons] generate icons local:some-icon
<Icon icon="local:some-icon" />;

是否有可能支持此种别名用法（在合理的范围之内）？

[fz6m]

为了按需的自动生成最少 icon 的 svg 内容，目前实现是固定扫描 <Icon icon="..." 开头这个 pattern 。

按你这个情况来看，组件名字在 jsx 里就可以是任意的了，你认为有什么比较好的方式确认这个组件是 icon 组件吗，或者针对你这个 SC 的 case 有什么解决方案吗。

[tonywu6]

需要静态分析；不过一旦出现别名，可能的写法就无穷尽，所以只能支持有限并且常用的写法：

• 符号是直接从 umi 引入的 import { Icon } from "umi";
• 出现简单赋值 const MyIcon = Icon; <MyIcon icon="..." /> （不过不知道有什么情况需要这样做）
• import styled from "styled-components" 然后出现 styled(Icon) 的表达式

实现成本可能会很高

或许直接在文档里声明这个方案的原理和注意事项？

[fz6m]

如果你需要用 SC 包裹，可以写成：

import { Icon as UmiIcon } from 'umi'

const Icon = styled(UmiIcon)`
  // ...
`

这样就符合扫描规则了。

欢迎 PR 添加组件使用时名字必须为 Icon 的补充说明。

另外你是从哪里了解到 icons 这个功能的？这个功能并没有很多的篇幅介绍，除了 蚂蚁 or 集团内 之外使用的人应该很少。

[xiaohuoni]

@fz6m 文档里面有的 https://umijs.org/docs/api/config#icons

[fz6m]

有是有，但我感觉文档本来乱糟糟的，目测没人会从一大堆选项里面找到这个 icons 的小区域 - -

[stormslowly]

暂无支持复杂场景下的 Icons 分析功能。

请先暂时先用你“反过来”别名的解决方法，如果有更好的方案可以 PR ❤️