teamix 图标组件

@teamix/icon

独立的 teamix 图标组件

API

TeamixIcon

| 参数名 | 说明 | 必填 | 类型 | 默认值 | 备注 | | ------ | ---- | ---- | ---- | ------ | ---- | | type | 图标类型 | 是 | string | | | | symbolPrefix | iconfont.cn 项目前缀，可从项目信息中查看 | 否 | string | 'hybridcloud-' | 优先级高于 Provider、setConfig 设置的 symbolPrefix | | size | 图标尺寸 | 否 | 'xxs' | 'xs' | 'small' | 'medium' | 'large' | 'xl' | 'xxl' | 'xxxl' |'inherit' | 'medium' | | | style | 设置组件样式 | 否 | React.CSSProperties | | | | className | 设置组件类名 | 否 | string | | |

注：

• 还可设置其他 html 元素属性，会透传到最外层的 DOM 结构上

TeamixIcon.setConfig

入参为一个对象

interface IOption {
  symbolPrefix?: string;
  scriptUrl: string | string [];
}

默认内置 TeamixIcon.YUNXIAO， TeamixIcon.HYBRIDCLOUD，即

// 云效
TeamixIcon.setConfig(TeamixIcon.YUNXIAO);

// 混合云
TeamixIcon.setConfig(TeamixIcon.HYBRIDCLOUD);

TeamixIcon.Provider

以组件形式通过 react context 进行全局设置：

  <TeamixIcon.Provider config={TeamixIcon.HYBRIDCLOUD}>
    <TeamixIcon type="xxx" />
  </TeamixIcon.Provider>

config 格式同上， 为：

interface IOption {
  symbolPrefix?: string;
  scriptUrl: string | string [];
}

| 参数名 | 说明 | 必填 | 类型 | 默认值 | 备注 | | ------ | ---- | ---- | ---- | ------ | ---- | | scriptUrl | iconfont.cn 项目在线生成的 symbol js 地址，为数组时需保证 symbolPrefix 一致 | 是 | string | string[] | | | | symbolPrefix | iconfont.cn 项目前缀，可从项目信息中查看 | 否 | string | 'hybridcloud-' | |

注：

• 在使用该组件时，一定要调用 TeamixIcon.setConfig 或者 TeamixIcon.Provider 指定图标源信息
• TeamixIcon.Provider 优先级高于 TeamixIcon.setConfig
• TeamixIcon.setConfig 每次调用会增加图标源（重复的不会添加），symbolPrefix 后设置会覆盖前设置的值。如果不想被覆盖，可通过 symbolPrefix 组件属性进行设置
• TeamixIcon.Provider 遵循就近原则，在组件树中最接近TeamixIcon 的嵌套优先级最高