# @uiw/react-icon
> Icon component
Latest version **4.22.3** (published 2023-11-29) · MIT license · 0 weekly downloads
## Install
```sh
npm install @uiw/react-icon
pnpm add @uiw/react-icon
yarn add @uiw/react-icon
bun add @uiw/react-icon
```
## Health
**Score 40/100 (D)** — status: abandoned.
Positive: has types; esm support; no vulnerabilities; has provenance.
Warnings: low downloads.
Negative: abandoned.
## Facts
| | |
|---|---|
| Version | 4.22.3 |
| Published | 2023-11-29 |
| First published | 2020-05-01 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 31.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Provenance | attested (GitHub Actions) |
| GitHub stars | 740 |
| Author | Kenny Wong |
| Maintainers | uiwjs, wcjiang |
| Keywords | icon, react-icon, design, uiw, uiw-react, react.js, react, react-component, component, components, ui, css, uikit, react-ui, framework, front-end, frontend |
## Links
- npm: https://www.npmjs.com/package/@uiw/react-icon
- Repository: https://github.com/uiwjs/uiw
- Homepage: https://uiwjs.github.io/#/components/icon
- Issues: https://github.com/uiwjs/uiw/issues
- Funding: https://jaywcjlove.github.io/#/sponsor
- npm.io page: https://npm.io/package/@uiw/react-icon
## Dependencies (1)
- [@uiw/icons](https://npm.io/package/@uiw/icons.md) ~2.6.0
## Alternatives
- [@progress/kendo-ooxml](https://npm.io/package/@progress/kendo-ooxml.md) — 152.1K weekly downloads
- [@progress/kendo-react-ripple](https://npm.io/package/@progress/kendo-react-ripple.md) — 8.0K weekly downloads
- [@progress/kendo-react-orgchart](https://npm.io/package/@progress/kendo-react-orgchart.md) — 4.3K weekly downloads
- [@praxisui/dynamic-fields](https://npm.io/package/@praxisui/dynamic-fields.md) — 2.4K weekly downloads
- [@mesalvo/react-ui](https://npm.io/package/@mesalvo/react-ui.md) — 1.7K weekly downloads
## Recent versions
- 4.22.3 (latest) — 2023-11-29
- 5.0.0-bate.2.1 (bate) — 2023-03-10
- 4.22.2 — 2023-11-09
- 4.22.1 — 2023-11-08
- 4.22.0 — 2023-09-19
- 4.21.28 — 2023-05-05
- 4.21.27 — 2023-04-21
- 4.21.26 — 2023-04-20
- 4.21.25 — 2023-03-14
- 4.21.24 — 2023-03-08
- 5.0.0-bate.2.0 — 2023-03-02
- 4.21.23 — 2022-12-21
- 4.21.22 — 2022-12-19
- 4.21.21 — 2022-12-19
- 5.0.0-bate-19 — 2022-12-12
- … 156 more at https://npm.io/package/@uiw/react-icon/versions
## README
Icon 图标
===
[](https://jaywcjlove.github.io/#/sponsor)
[](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-icon/file/README.md)
[](https://www.npmjs.com/package/@uiw/react-icon)
[](https://npmjs.com/@uiw/react-icon)
语义化的矢量图形，内置的图标属于UI框架常用图形字体。icon字体以及样式，被抽离到一个新的仓库 [uiw icon](https://uiwjs.github.io/icons/) ，`uiw`去依赖 [uiw-iconfont](https://github.com/uiwjs/icons)，这个仓库主要是维护一套svg图片，并将svg图片转换为 `*.symbol.svg` `*.ttf` `*.woff` `*.woff2` `*.eot` `svgPaths.json` 等字体及相关文件并发布到 [npm](https://www.npmjs.com/package/uiw-iconfont) 上去。
```jsx
import { Icon } from 'uiw';
// or
import Icon from '@uiw/react-icon';
```
### 搜索图标
```jsx mdx:preview&bg=#fff
import React from 'react';
import { Input, CopyToClipboard, Icon, Notify } from 'uiw';
const icons = ["adobe", "alipay", "aliwangwang", "android-o", "android", "apple", "appstore-o", "appstore", "area-chart", "down", "left", "right", "up", "arrow-down", "arrow-left", "arrow-right", "arrow-up", "arrows-alt", "asterisk", "backward", "baidu", "bar-chart", "barcode", "bell", "camera-o", "caret-down", "caret-left", "caret-right", "caret-up", "check-square-o", "check-square", "check", "chrome", "circle-check-o", "circle-check", "circle-close-o", "circle-close", "close-square-o", "close-square", "close", "cloud-download-o", "cloud-download", "cloud-upload-o", "cloud-upload", "coffee", "component", "copy", "copyright", "css3", "cut", "d-arrow-left", "d-arrow-right", "d-caret", "dashboard", "date", "delete", "dingding", "dislike-o", "document", "dot-chart", "circle-o", "down-circle-o", "down-circle", "down-square-o", "down-square", "square-o", "download", "edit", "enter", "environment-o", "environment", "eye-o", "eye", "facebook", "file-add", "file-excel", "file-jpg", "file-pdf", "file-text", "file-unknown", "filter", "firefox", "folder-add", "folder-open", "folder", "forward", "foursquare", "frown-o", "frown", "github-o", "github", "global", "heart-off", "heart-on", "home", "html5", "ie", "inbox", "information-o", "information", "laptop", "left-circle-o", "left-circle", "left-square-o", "left-square", "like-o", "link", "linkedin", "linux", "loading", "lock", "login", "logout", "man", "map", "meh-o", "meh", "menu-fold", "menu-unfold", "menu", "mail", "mail-o", "message", "minus-circle-o", "minus-circle", "minus-square-o", "minus-square", "minus", "mobile", "more", "notification", "opera", "paper-clip", "pause-circle-o", "pause-circle", "pause", "pay-circle-o", "pay", "picasa", "picture", "pie-chart", "pinterest", "play-circle-o", "play-circle", "plus-circle-o", "plus-circle", "plus-square-o", "plus-square", "plus", "poweroff", "printer", "qq", "qrcode", "question-circle-o", "question-circle", "reddit", "reload", "right-circle-o", "right-circle", "right-square-o", "right-square", "rollback", "safari", "safety", "save", "search", "setting-o", "setting", "share", "shopping-cart", "shrink", "smile-o", "smile", "star-off", "star-on", "swap-left", "swap-right", "swap", "table", "tag-o", "tag", "tags-o", "tags", "taobao", "time-o", "time", "twitter", "uiw", "unlock", "up-circle-o", "up-circle", "up-square-o", "up-square", "upload", "user-add", "user-delete", "user", "usergroup-add", "usergroup-delete", "verification", "verticle-left", "verticle-right", "video-camera", "warning-o", "warning", "weibo", "weixin", "wifi", "windows", "woman", "zoom-in", "zoom-out", 'stop-o', 'stop'];
const itemStyl = {
fontSize: 26, minWidth: 120, background: '#eaeaea', marginBottom: 10, marginRight: 10, padding: '20px 0',
display: 'flex', flexDirection: 'column', alignItems: 'center', textAlign: 'center', justifyContent: 'center', fill: '#525252',
}
class Demo extends React.Component {
constructor(props) {
super(props);
this.state = {
len: 0,
result: [],
}
}
onChange(env) {
const value = env.target.value;
const data = value ? icons.filter((item) => item.indexOf(value) > -1) : [];
const len = data.length;
const result = data.splice(0, 15);
this.setState({ len, result });
}
render() {
const { len, result } = this.state;
return (
搜索到 {this.state.len} 个结果{len > 0 && ，下面展示 {len > 15 ? '15' : len} 个图标，可以点击复制图标代码: }
{result.map((type, idx) => {
const iconTxt = `
`;
return (
{
Notify.success({
title: '你已复制内容！',
description: (
已复制 {iconTxt} 可以去粘贴了！
),
});
}}
>
)
})}
);
}
}
export default Demo;
```
## 如何使用
使用`
```
示例如下:
```jsx
const Demo = () => (
)
```
```jsx mdx:preview&bg=#fff
import React from 'react';
import { Icon } from 'uiw';
export default function Demo() {
return (
);
}
```
### 图标尺寸
默认情况下，图标非常小，它们继承了父级的字体大小。 如果没有设置字体大小，可以通过 `size` 来设置尺寸。通常情况 `size` 会很累赘没有什么用。
```jsx mdx:preview&bg=#fff
import React from 'react';
import { Icon } from 'uiw';
export default function Demo() {
return (
);
}
```
### 图标颜色
默认纯黑色图标，当前图标是 svg 格式展示，在为SVG设置样式时，请使用 `fill` 或 `stroke` 属性而不是 `color`。 这些可以直接在 `Icon` 上设置为 `style` 或通过 `CSS` 设置。
> 一个有用的技巧是将 `fill` 设置为 `currentColor`，以便从图标容器的文本颜色继承填充颜色。
```jsx mdx:preview&bg=#fff
import React from 'react';
import { Icon } from 'uiw';
export default function Demo() {
return (
);
}
```
### 与文本对齐
```jsx mdx:preview&bg=#fff
import React from 'react';
import { Icon } from 'uiw';
export default function Demo() {
return (
Exit
uiw
);
}
```
### 图标旋转实例
通过设置参数 `spin={true}` 来设置图标旋转。
```jsx mdx:preview&bg=#fff
import React from 'react';
import { Icon } from 'uiw';
export default function Demo() {
return (
);
}
```
### 自定义图标
```jsx mdx:preview&bg=#fff
import React from 'react';
import { Icon } from 'uiw';
const chat = (
)
const contrast = (
)
const styl = { marginRight: 10 };
export default function Demo() {
return (
);
}
```
## 字体图标
通过引入 [uiw-iconfont](https://github.com/uiwjs/icons) 字体样式，在 [uiw-iconfont官网](https://uiwjs.github.io/icons) 找到对应的图标名称，就可以使用了，`uiw` 已经依赖 `uiw-iconfont` 你无需安装即可使用，更多使用方法[查看官方文档](https://github.com/uiwjs/icons)。
```bash
# 如果你没有安装，可单独使用，安装
npm i uiw-iconfont --save
```
引入字体样式
```jsx
import 'uiw-iconfont/fonts/w-icon.css';
```
在 HTML 中使用：
```html
)
```
## API
| 参数 | 说明 | 类型 | 默认值 |
|--------- |-------- |--------- |-------- |
| type | 图标的名称 | String/ReactNode | - |
| spin | 是否有旋转动画 | Boolean | `false` |
| verticalAlign | 垂直对齐方式 | Enum {baseline, middle} | `baseline` |
| style | 设置图标的样式，例如 `fill` 和 `stroke` | Object | - |
## 所有图标
### 方向性图标
```jsx mdx:preview&bg=#fff
import React from 'react';
import { Icon } from 'uiw';
const iconList = [
'circle-o', 'down-square-o','down-square','up-square-o', 'up-square','left-square-o','left-square', 'right-square-o', 'right-square',
]
const itemStyl = {
fontSize: 18, minWidth: 120, background: '#eaeaea', marginBottom: 10, marginRight: 10, padding: '20px 0',
display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', fill: '#525252',
}
export default function Demo() {
return (
{iconList.map((type, idx) => {
return (
)
})}
{iconList.map((type, idx) => {
return (
)
})}
{iconList.map((type, idx) => {
return (
)
})}
{iconList.map((type, idx) => {
return (
)
})}
{iconList.map((type, idx) => {
return (
)
})}
{iconList.map((type, idx) => {
return (
)
})}
{iconList.map((type, idx) => {
return (
)
})}
{iconList.map((type, idx) => {
return (
)
})}
{iconList.map((type, idx) => {
return (
)
})}