---
title: WKIcon 图标
group:
  title: 基础组件
  path: /base/
---

## 何时使用

提供了一套常用的图标集合。

## 基本使用

```tsx | pure
/**
 * title: 基本使用
 * desc: 基本使用方法
 */
import React from 'react';
import { WKIcon } from '@wakeapp/components';
export default () => {
  return (
    <div>
      <WKIcon icon="people" width="40px" color="#000000" />
    </div>
  );
};
```

## 修改 SVG 图片颜色

```tsx | pure
/**
 * title: 修改SVG图片颜色
 * desc: 注意引入的方式不同，如果不修改颜色则正常方式引入即可
 */
import React from 'react';
import { WKIcon } from '@wakeapp/components';
import svgImg from '!!raw-loader!./zan.svg';

export default () => {
  return (
    <div>
      <WKIcon icon={svgImg} width="40px" color="red" />
    </div>
  );
};
```

## 图标合集

```tsx
/**
 * inline: true
 */
import React from 'react';
import icons from '@wakeapp/components/WKIcon/icons/icons.js';
import { WKIcon, WKView } from '@wakeapp/components';
import { copy } from '../../utils';

export default () => {
  return (
    <div>
      {Object.keys(icons).map(iconName => {
        return (
          <WKView
            key={iconName}
            style={{ width: '150px', cursor: 'pointer', height: '150px', textAlign: 'center', display: 'inline-block' }}
            onClick={() => copy(`<WKIcon icon='${iconName}' width='40px' color='#000000'/>`)}
          >
            <WKIcon icon={icons[iconName]} width="35px" color="#000000" />
            <WKView>{iconName}</WKView>
          </WKView>
        );
      })}
    </div>
  );
};
```

<API src='@wakeapp/components/WKIcon/index.d.ts' ></API>
