图标（Icon）解决方案

[imsobear]

Do you want to request a feature or report a bug?

feature

What is the current behavior?

icon 比较少

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem.

• icejs version：
• Node verson：
• Platform：
• build.json：
• src/app.(ts|js)：

What is the expected behavior?

[imsobear]

方案参考：

• 使用 https://ant.design/components/icon-cn/ 资源，然后开发者只需要写 <Icon type="xxx" />，我们通过语法分析自动帮他引入 xxx 的 Icon 组件
• 已有资源如果不满足，可以给个 dynamic 注册的口子，只要注册了就可以用对应的 type

对于开发者来说使用的都是从 Fusion/antd 里导出的 <Icon /> 组件，目标是「同一个 Icon 组件，type 你随便用，扩展 type 不需要改 jsx 代码」。

[we6288815]

非常期待这个功能早日落地，目前我使用以下方式使用额外的icon，但是icon样式比较难控制

const CustomIcon = Icon.createFromIconfontCN({ scriptUrl: '//at.alicdn.com/t/font_2014782_5n26pinyyvm.js', });

[jacktang]

@imsobear @we6288815 请教下 iconfont的svg js链接怎么生成的？我想引入外部icon但是找不到对应的url

[we6288815]

@jacktang 我是把图标加入到项目里面生成的

[jacktang]

@we6288815 多谢 解决了 👍

[imsobear]

https://iconify.design/ 基于这个方案貌似不错

[TrumanDu]

https://iconify.design/ 基于这个方案貌似不错

希望能够采用该方案

[FuzzyFade]

@imsobear 类似于这样？

Usage

import { Icon, addIconSet } from 'ice'

// 自定义 icon
addIconSet('cos', {
  'account-box': {
    body: '<path />'
  },
  'home': {
    body: '<path />'
  }
})

function FC() {
  return (
    <>
      <Icon type="cos:home" style={{ width: 25, height: 25 }} />
      <Icon type="icon:home" style={{ width: 25, height: 25 }} />
    </>
  )
}

Decs

默认添加 https://ant.design/components/icon-cn 的资源，引用时：type = 'icon:114514'

Icon 组件收集所有 type，然后进行分析并远程拉取内部定义的资源

[we6288815]

这个功能什么时候能落地？都等了一两年了……

[imsobear]

这个功能什么时候能落地？都等了一两年了……

Vite 模式的话可以直接用 unocss 来实现，参考：https://github.com/alibaba/ice/issues/4864#issuecomment-961599838 ，unocss 貌似已经支持 webpack 模式了，不过我目前还没有测试过。

[we6288815]

这个功能什么时候能落地？都等了一两年了……

Vite 模式的话可以直接用 unocss 来实现，参考：#4864 (comment) ，unocss 貌似已经支持 webpack 模式了，不过我目前还没有测试过。

ok，我看看