@teamix/icon NPM

teamix 图标组件

@teamix/icon

独立的 teamix 图标组件

参数名	说明	必填	类型	默认值	备注
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

注：

入参为一个对象

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

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

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

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

以组件形式通过 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 的嵌套优先级最高