@teamix/icon

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 的嵌套优先级最高