# UnityIcon

统一 Icon，UI 组在 iconfont.cn 上提供，

# Usage

> tip:只能通过全局 install 的方式，app.use 有使用了才会加载 icon 资源

```ts
import { UnityIcon } from '@kt/unity-componenets';

// 方式1
app.use(UnityIcon);

// 方式2，传入额外的参数，参考 https://antdv.com/components/icon-cn#%E8%87%AA%E5%AE%9A%E4%B9%89-font-%E5%9B%BE%E6%A0%87
app.use(UnityIcon, {
  props: {
    scriptUrl: '',
    extraCommonProps: {}
  }
});
```

页面调用，type 名称，可以到 iconfont.cn 进行查阅

```html
<unity-icon type="icon-guizepeizhi" />

<unity-icon type="icon-guizepeizhi" style="font-size: 100px; color: red" />
```

# 注意

~~ svg 静态资源目前存放到阿里云 oss 服务器上地址为，https://keytop-unity.oss-cn-hangzhou.aliyuncs.com/iconfont/iconfont.js，如果UI组有新增 icon，需要重新上传 ~~

已切换至 iconfont 官网的 cdn 源 https://at.alicdn.com/t/c/font_3512902_bf29vmv8mrj.js

## 如何上传

~~iconfont.cn->资源管理->我的项目->下载至本地->找到 iconfont.js 文件~~

~~阿里云云 oss 服务->Bucket->keytop-unity/iconfont/->上传 iconfont.js 文件~~

## 基于 micro-app 下使用 UnityIcon（必读）

由于 micro-app 的设计会自动拦截请求，UnityIcon 的 cdn 请求就会被拦截导致 svg 资源不能正常加载，这是 micro-app 的一个问题，[#525](https://github.com/micro-zoe/micro-app/issues/525)

解决方案（ [issue 评论](https://github.com/micro-zoe/micro-app/issues/525#issuecomment-1220594862) ）：

1. [升级至 0.8.10](https://github.com/micro-zoe/micro-app/releases/tag/v0.8.10)

2. 基座配置

```ts
import microApp from '@micro-zoe/micro-app';
microApp.start({
  excludeAssetFilter(assetUrl) {
    if (assetUrl.indexOf('https://at.alicdn.com/t/c/font') !== -1) {
      return true; // 返回true则micro-app不会劫持处理当前文件
    }
    return false;
  }
});
```
