zarm-web/lib/icon/demo.md

基于 React 的桌面端UI库

# Icon 图标



## 基本用法
```jsx
import { Icon } from 'zarm-web';

const ICONS = [
  'add', 'add-round', 'add-round-fill', 
  'minus', 'minus-round', 'minus-round-fill',
  'arrow-top', 'arrow-bottom', 'arrow-left', 'arrow-right',
  'info-round', 'info-round-fill',
  'warning-round', 'warning-round-fill',
  'right', 'right-round', 'right-round-fill',
  'wrong', 'wrong-round', 'wrong-round-fill',
  'question-round', 'question-round-fill',
  'required', 'broadcast', 'deletekey', 'keyboard', 'search', 'date', 'time',
];

ReactDOM.render(
  <div className="grid">
    {ICONS.sort().map((iconType) => {
      return (
        <div className="grid-column" key={iconType}>
          <Icon type={iconType} theme="primary" size="lg" />
          <span>{iconType}</span>
        </div>);
    })}
  </div>
, mountNode);
```



## 主题
```jsx
import { Icon } from 'zarm-web';

ReactDOM.render(
  <div className="grid">
    <div className="grid-column">
      <Icon type="warning-round" theme="warning" />
      <span>warning</span>
    </div>
    <div className="grid-column">
      <Icon type="wrong-round" theme="danger" />
      <span>danger</span>
    </div>
    <div className="grid-column">
      <Icon type="info-round" style={{ color: '#1890ff' }}/>
      <span>custom color</span>
    </div>
  </div>
, mountNode);
```



## 尺寸
```jsx
import { Icon } from 'zarm-web';

ReactDOM.render(
  <div className="grid">
    <div className="grid-column">
        <Icon type="search" theme="primary" size="sm" />
        <span>sm</span>
    </div>
    <div className="grid-column">
        <Icon type="search" theme="primary" />
        <span>md</span>
    </div>
    <div className="grid-column">
        <Icon type="search" theme="primary" size="lg" />
        <span>lg</span>
    </div>
  </div>
, mountNode)
```

## 自定义 Iconfont 图标

我们提供了一个 createFromIconfont 方法，方便开发者调用在 [iconfont.cn](iconfont.cn) 上自行管理的图标。

其本质上是组件在渲染前会自动引入 iconfont.cn 项目中的图标符号集，并且创建了一个 `<use>` 标签来渲染图标的组件。

详见 [iconfont.cn 使用帮助](https://www.iconfont.cn/help/detail?spm=a313x.7781069.1998910419.d8d11a391&helptype=code) 查看如何生成symbol代码的 js 地址。

```jsx
import { Icon } from 'zarm-web';

const MyIcon = Icon.createFromIconfont('//at.alicdn.com/t/font_1340918_4p9b5skcr79.js'); // generated by iconfont.cn

ReactDOM.render(
  <div className="grid">
    <div className="grid-column">
        <MyIcon type="home" theme="primary" />
        <span>home</span>
    </div>
    <div className="grid-column">
        <MyIcon type="user" theme="primary" />
        <span>user</span>
    </div>
  </div>
, mountNode);
```

## 自定义 SVG 图标

可以通过配置 [svgr](https://github.com/smooth-code/svgr) 来将 svg 图标作为 React 组件导入。

本示例以 webpack 为参考，使用 [@svgr/webpack](https://www.npmjs.com/package/@svgr/webpack) 来实现，其他实现方式请参阅 [svgr 文档](https://www.smooth-code.com/open-source/svgr/docs/getting-started/)。

```js
// webpack.config.js
{
  test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
  issuer: {
    test: /\.jsx?$/,
  },
  use: [
    {
      loader: 'babel-loader',
    },
    {
      loader: '@svgr/webpack',
      options: {
        babel: false,
        icon: true,
      },
    },
  ],
},
```
```jsx
import { Icon } from 'zarm-web';
import { ReactComponent as YourSvg } from 'path/to/yourSvg.svg'; // path to your '*.svg' file.

ReactDOM.render(<Icon component={YourSvg} />, mountNode);
```



## API

| 属性 | 类型 | 默认值 | 说明 |
| :--- | :--- | :--- | :--- |
| theme | string | 'default' | 主题，可选值 `default`、`primary`、`success`、`warning`、`danger` |
| size | string | 'md' | 大小，可选值 `sm`、`md`、`lg` |
| type | string | - | 图标类型，可选值 `wrong-round`、`wrong-round-fill`、`wrong`、`warning-round`、`warning-round-fill`、`time`、`keyboard`、`deletekey`、`search`、`required`、`right-round`、`right-round-fill`、`right`、`question-round`、`info-round`、`info-round-fill`、`minus`、`broadcast`、`add`、`arrow-right`、`arrow-left`、`arrow-bottom`、`arrow-top`、`date`|
| component | React.ComponentType&lt;React.SVGProps&lt;SVGSVGElement&gt;&gt; | - | 本地svg文件，需配合viewBox使用 |
| viewBox | string | '0 0 32 32' | 自定义 SVG 图标时，用来设置画布的起始坐标及大小 |