zarm/lib/icon/demo.md

基于 React 的移动端UI库

# Icon 图标

## 基本用法

```jsx
import { Grid, Icon } from 'zarm';

const MyIcon = Icon.createFromIconfont('//lf1-cdn-tos.bytegoofy.com/obj/iconpark/svg_20337_14.627ee457cf7594fbbce6d5e14b8c29ef.js'); // generated by iconfont.cn

ReactDOM.render(
  <Grid square>
    <Grid.Item>
      <div className="block">
        <MyIcon type="home" theme="primary" />
        <span>home</span>
      </div>
    </Grid.Item>
    <Grid.Item>
      <div className="block">
        <MyIcon type="user" theme="primary" />
        <span>user</span>
      </div>
    </Grid.Item>
  </Grid>,
  mountNode,
);
```

## 图标主题

```jsx
import { Grid, Icon } from 'zarm';

const MyIcon = Icon.createFromIconfont('//lf1-cdn-tos.bytegoofy.com/obj/iconpark/svg_20337_14.627ee457cf7594fbbce6d5e14b8c29ef.js');

ReactDOM.render(
  <Grid square>
    <Grid.Item>
      <div className="block">
        <MyIcon type="home" theme="warning" />
        <span>warning</span>
      </div>
    </Grid.Item>
    <Grid.Item>
      <div className="block">
        <MyIcon type="home" theme="danger" />
        <span>danger</span>
      </div>
    </Grid.Item>
    <Grid.Item>
      <div className="block">
        <MyIcon type="home" style={{ color: '#1890ff' }} />
        <span>custom color</span>
      </div>
    </Grid.Item>
  </Grid>,
  mountNode,
);
```

## 图标尺寸

```jsx
import { Grid, Icon } from 'zarm';

const MyIcon = Icon.createFromIconfont('//lf1-cdn-tos.bytegoofy.com/obj/iconpark/svg_20337_14.627ee457cf7594fbbce6d5e14b8c29ef.js');

ReactDOM.render(
  <Grid square>
    <Grid.Item>
      <div className="block">
        <MyIcon type="home" theme="primary" size="sm" />
        <span>sm</span>
      </div>
    </Grid.Item>
    <Grid.Item>
      <div className="block">
        <MyIcon type="home" theme="primary" />
        <span>md</span>
      </div>
    </Grid.Item>
    <Grid.Item>
      <div className="block">
        <MyIcon type="home" theme="primary" size="lg" />
        <span>lg</span>
      </div>
    </Grid.Item>
  </Grid>,
  mountNode,
);
```

## @zarm-design/icons 自带图标

```jsx
import { useState } from 'react';
import { Grid, List, Radio } from 'zarm';
import Icons from '@zarm-design/icons';

function Demo() {
  const [mode, setMode] = useState('svg');
  return (
    <>
      <List>
        <List.Item
          title="模式"
          suffix={
            <Radio.Group compact type="button" onChange={setMode} value={mode}>
              <Radio value="svg">svg</Radio>
              <Radio value="font">font</Radio>
            </Radio.Group>
          }
        />
      </List>
      <Grid square>
        {Object.keys(Icons).map((item, index) => {
          if (['Icon', 'Empty', 'IconProvider'].includes(item)) return;
          return (
            <Grid.Item key={+index}>
              <div className="block">
                {React.createElement(Icons[item], {
                  key: +index,
                  theme: 'primary',
                  mode,
                })}
                <span>{item}</span>
              </div>
            </Grid.Item>
          );
        })}
      </Grid>
    </>
  );
}
ReactDOM.render(<Demo />, mountNode);
```

## 自定义 Iconfont 图标

我们提供了一个 createFromIconfont 方法，方便开发者调用在 <a href="https://www.iconfont.cn" target="_blank">iconfont.cn</a>、<a href="https://iconpark.oceanengine.com" target="_blank">iconpark</a> 等平台上自行管理的图标。

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

```jsx
import { Grid, Icon } from 'zarm';

const MyIcon = Icon.createFromIconfont('//lf1-cdn-tos.bytegoofy.com/obj/iconpark/svg_20337_14.627ee457cf7594fbbce6d5e14b8c29ef.js');

ReactDOM.render(
  <Grid square>
    <Grid.Item>
      <div className="block">
        <MyIcon type="home" theme="primary" />
        <span>home</span>
      </div>
    </Grid.Item>
    <Grid.Item>
      <div className="block">
        <MyIcon type="user" theme="primary" />
        <span>user</span>
      </div>
    </Grid.Item>
  </Grid>,
  mountNode,
);
```

## 自定义 SVG 图标

可以通过配置 <a href="https://github.com/smooth-code/svgr" target="_blank">svgr</a> 来将 svg 图标作为 React 组件导入。

本示例以 webpack 为参考，使用 <a href="https://www.npmjs.com/package/@svgr/webpack" target="_blank">@svgr/webpack</a> 来实现，其他实现方式请参阅 <a href="https://www.smooth-code.com/open-source/svgr/docs/getting-started/" target="_blank">svgr 文档</a>

```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';
import { ReactComponent as YourSvg } from 'path/to/yourSvg.svg'; // path to your '*.svg' file.

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

### 使用 `font` 模式
需要手动引入样式文件
```
  @import "@zarm-design/icons/style/font";
```


## API

| 属性      | 类型                                                           | 默认值      | 说明                                                              |
| :-------- | :------------------------------------------------------------- | :---------- | :---------------------------------------------------------------- |
| theme     | string                                                         | 'default'   | 主题，可选值 `default`、`primary`、`success`、`warning`、`danger` |
| size      | string                                                         | -           | 大小，可选值 `sm`、`lg`                                           |
| type      | string                                                         | -           | 图标类型，可选项为来源 iconfont 的图标名称                        |
| mode      | string                                                         | 'svg'       | 模式，可选值 `svg`、`font` 自带 icon 可选                         |
| component | React.ComponentType&lt;React.SVGProps&lt;SVGSVGElement&gt;&gt; | -           | 本地 svg 文件，需配合 viewBox 使用                                |
| viewBox   | string                                                         | '0 0 32 32' | 自定义 SVG 图标时，用来设置画布的起始坐标及大小                   |

## CSS 变量

| 属性        | 默认值                 | 说明     |
| :---------- | :--------------------- | :------- |
| --font-size | '24px'                 | 图标大小 |
| --color     | 'var(--za-color-text)' | 图标颜色 |