# @teamix/icon

> 独立的 teamix 图标组件

Latest version **1.3.12** (published 2023-02-21) · MIT license · 0 weekly downloads

## Install

```sh
npm install @teamix/icon
pnpm add @teamix/icon
yarn add @teamix/icon
bun add @teamix/icon
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.3.12 |
| Published | 2023-02-21 |
| First published | 2021-04-06 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Unpacked size | 517.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | renjun.frj, sanguai.sxy, yanqianyu.yqy, yofine, kiwikang99, zhongliang.lsh, zuoqi, zaranengap, purple-force, cyris, roy.mellon, ifblooms, dingyu.wdy, damujiangr, linzx, talent_xwd, bowei.jbw, maplor, lucy.cl, jiangcheng001, chesstar |
| Keywords | teamix, react, component |

## Links

- npm: https://www.npmjs.com/package/@teamix/icon
- Homepage: https://unpkg.com/@teamix/icon@1.3.12/build/index.html
- npm.io page: https://npm.io/package/@teamix/icon

## Dependencies (2)

- [classnames](https://npm.io/package/classnames.md) ^2.2.6
- [@alicloudfe/components](https://npm.io/package/@alicloudfe/components.md) ^1.0.0

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 1.3.12 (latest) — 2023-02-21
- 1.0.0-alpha.3 (alpha) — 2021-04-06
- 1.3.11 — 2023-02-21
- 1.3.10 — 2023-02-21
- 1.3.9 — 2023-01-16
- 1.3.8 — 2022-10-14
- 1.3.7 — 2022-08-30
- 1.3.6 — 2022-08-22
- 1.3.5 — 2022-06-14
- 1.3.4 — 2022-06-14
- 1.3.3 — 2022-01-20
- 1.3.2 — 2021-12-08
- 1.3.1 — 2021-12-02
- 1.3.0 — 2021-11-12
- 1.2.15 — 2021-11-04
- … 23 more at https://npm.io/package/@teamix/icon/versions

## README

# teamix 图标组件

@teamix/icon

独立的 teamix 图标组件

## API

### TeamixIcon

| 参数名 | 说明 | 必填 | 类型 | 默认值 | 备注 |
| ------ | ---- | ---- | ---- | ------ | ---- |
|   type     |   图标类型   |  是    |  string    |        |      |
|   symbolPrefix     |    [iconfont.cn](https://www.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 进行全局设置：

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

`config` 格式同上， 为：
```
interface IOption {
  symbolPrefix?: string;
  scriptUrl: string | string [];
}
```

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

**注：**

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

---
_Source: https://npm.io/package/@teamix/icon · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._