# Icon

## 内置 icon

```tsx
import { Icon } from 'qy-react-ui';

const Index = () => {
  return (
    <div style={{ display: 'flex', gap: 20, flexWrap: 'wrap' }}>
      {Icon.iconNames.map((name) => {
        return (
          <div
            key={name}
            style={{
              display: 'flex',
              flexDirection: 'column',
              gap: 10,
              padding: 10,
              alignItems: 'center',
            }}
          >
            <Icon name={name} size={40}></Icon>
            <span>{name}</span>
          </div>
        );
      })}
    </div>
  );
};

export default Index;
```

## icon 尺寸

```tsx
import { Icon } from 'qy-react-ui';

const Index = () => {
  return <Icon name="home" size={40}></Icon>;
};

export default Index;
```

## icon 颜色

```tsx
import { Icon } from 'qy-react-ui';

const Index = () => {
  return <Icon name="home" color="red"></Icon>;
};

export default Index;
```

## 自定义 svg 图片

```tsx
import { Icon } from 'qy-react-ui';

const Index = () => {
  return (
    <Icon.Svg>
      <svg
        xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 1024 1024"
        version="1.1"
        p-id="1467"
        width="200"
        height="200"
      >
        <path
          d="M966.4 668.8l-435.2-432c-9.6-9.6-25.6-9.6-35.2 0l-441.6 432c-9.6 9.6-9.6 25.6 0 35.2 9.6 9.6 25.6 9.6 35.2 0l425.6-416 416 416c9.6 9.6 25.6 9.6 35.2 0S976 678.4 966.4 668.8z"
          p-id="1468"
        />
      </svg>
    </Icon.Svg>
  );
};

export default Index;
```

## 自定义 img 图片

```tsx
import { Icon } from 'qy-react-ui';

const Index = () => {
  return (
    <Icon.Img
      url={'/qy-react-ui/images/logo.png'}
      width={100}
      height={40}
    ></Icon.Img>
  );
};

export default Index;
```

## API

### Icon

| 属性  | 说明      | 类型   | 默认值 |
| ----- | --------- | ------ | ------ |
| name  | icon 标识 | string | -      |
| size  | icon 大小 | number | -      |
| color | icon 颜色 | number | -      |

### Icon.Svg

| 属性     | 说明          | 类型   | 默认值 |
| -------- | ------------- | ------ | ------ |
| size     | icon 大小     | number | -      |
| color    | icon 颜色     | number | -      |
| children | 自定义 svg 图 |        | -      |

### Icon.Img

| 属性   | 说明     | 类型   | 默认值 |
| ------ | -------- | ------ | ------ |
| url    | 图片地址 | string | -      |
| width  | 图片宽度 | number | -      |
| height | 图片高度 | number | -      |
