Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →

@uiw/react-icon

Package Overview

Dependencies

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

@uiw/react-icon

Icon component

5.0.0-bate-1
Source
npm

Version published: 2 years ago

Weekly downloads: 385; increased by51.57%

Maintainers: 2

Weekly downloads

Created: 5 years ago

Source

Icon 图标

语义化的矢量图形，内置的图标属于UI框架常用图形字体。icon字体以及样式，被抽离到一个新的仓库 uiw icon ，uiw去依赖 uiw-iconfont，这个仓库主要是维护一套svg图片，并将svg图片转换为 *.symbol.svg *.ttf *.woff *.woff2 *.eot svgPaths.json 等字体及相关文件并发布到 npm 上去。

import { Icon } from 'uiw';
// or
import Icon from '@uiw/react-icon';

搜索图标

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 (
      <div>
        <Input preIcon="search" placeholder="请输入图标名称" type="text" style={{ maxWidth: 200 }} onChange={this.onChange.bind(this)} />
        <div style={{ padding: '10px 0' }}>
          搜索到 {this.state.len} 个结果{len > 0 && <span>，下面展示 {len > 15 ? '15' : len} 个图标，可以点击复制图标代码: </span>}
        </div>
        <div style={{ display: 'flex', flexWrap: 'wrap', marginBottom: -10, marginRight: -10 }}>
          {result.map((type, idx) => {
            const iconTxt = `<Icon type="${type}" />`;
            return (
              <CopyToClipboard
                key={idx}
                style={itemStyl}
                text={iconTxt}
                onClick={() => {
                  Notify.success({
                    title: '你已复制内容！',
                    description: (
                      <span>
                        已复制 <b style={{ color: 'red' }}>{iconTxt}</b> 可以去粘贴了！
                      </span>
                    ),
                  });
                }}
              >
                <div key={idx}>
                  <Icon type={type} />
                  <div style={{ color: '#525252', fontSize: 12, paddingTop: 8 }}>{type}</div>
                </div>
              </CopyToClipboard>
            )
          })}
        </div>
      </div>
    );
  }
}
export default Demo

如何使用

使用<Icon />组件，指定图标对应的type属性，示例代码：

import { Icon } from 'uiw';

<Icon type="minus" />

渲染为

<span class="w-icon w-icon-middle">
  <svg viewBox="0 0 24 24">
    <path d="M16.038 3.176c2.313-.551 4.58.248 5.648 1.603.985 1.25 1.433 2.55 1.287 4.468-.105 1.383-.55 2.408-1.428 3.536-.162.208-.34.421-.563.68-.13.153-.628.72-.602.692-.88 1.008-3.471 3.535-7.814 7.62a.83.83 0 0 1-1.139-.003c-3.728-3.55-6.141-5.888-7.248-7.022-2.043-2.094-2.82-3.31-3.102-5.276-.295-2.055.27-3.742 1.538-5.053 1.19-1.229 3.319-1.684 5.42-1.25 1.231.254 2.542 1.072 3.961 2.436 1.21-1.261 2.56-2.077 4.042-2.43z" fill-rule="evenodd">
    </path>
  </svg>
</span>

示例如下:

const Demo = () => (
  <div>
    <Icon type="arrow-down" />
    <Icon type="minus" />
    <Icon type="plus" />
    <Icon type="check" />
    <Icon type="close" />
  </div>
)

import React from "react"
import { Icon } from 'uiw';

const Demo =()=>(
  <div style={{ fontSize: 18, lineHeight: '12px' }}>
    <Icon type="heart-on" />
    <Icon type="pie-chart" />
    <Icon type="tag" />
  </div>
);
export default Demo

图标尺寸

默认情况下，图标非常小，它们继承了父级的字体大小。如果没有设置字体大小，可以通过 size 来设置尺寸。通常情况 size 会很累赘没有什么用。

import React from "react"
import { Icon } from 'uiw';

const Demo = () => (
  <div style={{ fontSize: '28px' }}>
    <Icon type="heart-on" />
    <Icon type="pie-chart" />
    <Icon type="tag" />
  </div>
);
export default Demo

图标颜色

默认纯黑色图标，当前图标是 svg 格式展示，在为SVG设置样式时，请使用 fill 或 stroke 属性而不是 color。这些可以直接在 Icon 上设置为 style 或通过 CSS 设置。

一个有用的技巧是将 fill 设置为 currentColor，以便从图标容器的文本颜色继承填充颜色。

import React from "react"
import { Icon } from 'uiw';

const Demo = () => (
  <div style={{ fontSize: '28px',color: 'green' }}>
    <Icon type="apple" color="red" />
    <Icon type="pie-chart" style={{fill: 'currentColor'}} />
    <Icon type="frown" style={{fill: 'blue'}} />
    <Icon type="uiw" style={{stroke: 'red',fill: '#ffef00'}} />
  </div>
);
export default Demo

与文本对齐

import React from "react"
import { Icon } from 'uiw';

const Demo = () => (
  <div>
    <h3 style={{ margin: 0 }}>Exit <Icon verticalAlign="baseline" type="baidu" /></h3>
    <span>uiw</span><Icon type="uiw" verticalAlign="baseline" style={{ fill: '#009688', fontSize: 21 }} />
  </div>
);
export default Demo

图标的命名规范

我们为每个图标赋予了语义化的命名，命名规则如下:

[形状?]-[图标名]-[描线?]-[方向?] 方向：down、up、left、right 描线：-o 图标添加边框描线默认：w-icon- 默认引用的字体文件作用域自定定义：w-icon-uiw- 自定定义作用域

import React from "react"
import { Icon } from 'uiw';

const Demo = () => (
  <div>
    <Icon type="circle-close" verticalAlign="baseline" />  图标名称：circle-close，[circle圈]-[关闭close]
    <br/>
    <Icon type="circle-close-o" verticalAlign="baseline" /> 图标名称：circle-close-o，[circle圈]-[关闭close]-[o描线]
  </div>
);
export default Demo

图标旋转实例

通过设置参数 spin={true} 来设置图标旋转。

import React from "react"
import { Icon } from 'uiw';

const Demo = () => (
  <div style={{ fontSize: 21, color: 'green' }}>
    <Icon type="loading" spin={true} color="red" />
    <Icon type="reload" spin={true} />
    <Icon type="picasa" spin={true} style={{fill: 'blue'}} />
    <Icon type="smile-o" spin={true} style={{fill: 'blue'}} />
  </div>
);
export default Demo

自定义图标

import React from "react"
import { Icon } from 'uiw';

const chat = (
  <svg width="20" height="20" viewBox="0 0 20 20">
    <path d="M19 0H7c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h5.59l3.71 3.71c.17.18.42.29.7.29.55 0 1-.45 1-1v-3h1c.55 0 1-.45 1-1V1c0-.55-.45-1-1-1zM7 13c-1.1 0-2-.9-2-2V4H1c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h1v3a1.003 1.003 0 0 0 1.71.71L7.41 16H13c.55 0 1-.45 1-1v-.17L12.17 13H7z" fillRule="evenodd" />
  </svg>
)
const contrast = (
  <svg width="20" height="20" viewBox="0 0 20 20">
    <path d="M19 8h-1.26c-.19-.73-.48-1.42-.85-2.06l.94-.94a.996.996 0 0 0 0-1.41l-1.41-1.41a.996.996 0 0 0-1.41 0l-.94.94c-.65-.38-1.34-.67-2.07-.86V1c0-.55-.45-1-1-1H9c-.55 0-1 .45-1 1v1.26c-.76.2-1.47.5-2.13.89L5 2.28a.972.972 0 0 0-1.36 0L2.28 3.64c-.37.38-.37.98 0 1.36l.87.87c-.39.66-.69 1.37-.89 2.13H1c-.55 0-1 .45-1 1v2c0 .55.45 1 1 1h1.26c.19.73.48 1.42.85 2.06l-.94.94a.996.996 0 0 0 0 1.41l1.41 1.41c.39.39 1.02.39 1.41 0l.94-.94c.64.38 1.33.66 2.06.85V19c0 .55.45 1 1 1h2c.55 0 1-.45 1-1v-1.26c.76-.2 1.47-.5 2.13-.89l.88.87c.37.37.98.37 1.36 0l1.36-1.36c.37-.38.37-.98 0-1.36l-.87-.87c.4-.65.7-1.37.89-2.13H19c.55 0 1-.45 1-1V9c0-.55-.45-1-1-1zm-9 7c-2.76 0-5-2.24-5-5s2.24-5 5-5v10z" fillRule="evenodd" />
  </svg>
)
const styl = { marginRight: 10 };

const Demo = () => (
  <div style={{ fontSize: 21, color: 'green' }}>
    <Icon style={styl} type={chat} color="red" />
    <Icon style={styl} type={contrast} spin={true} />
  </div>
);
export default Demo

字体图标

通过引入 uiw-iconfont 字体样式，在 uiw-iconfont官网找到对应的图标名称，就可以使用了，uiw 已经依赖 uiw-iconfont 你无需安装即可使用，更多使用方法查看官方文档。

# 如果你没有安装，可单独使用，安装
npm i uiw-iconfont --save

引入字体样式

import 'uiw-iconfont/fonts/w-icon.css';

在 HTML 中使用：

<i className="w-icon-apple"></i>

在 React 中使用：

const Demo = () => (
  <div style={{ color: 'green' }}>
    <i className="w-icon-apple" />
    <i className="w-icon-appstore" />
  </div>
)

API

参数	说明	类型	默认值
type	图标的名称	String/ReactNode	-
spin	是否有旋转动画	Boolean	`false`
verticalAlign	垂直对齐方式	Enum {baseline, middle}	`baseline`
style	设置图标的样式，例如 `fill` 和 `stroke`	Object	-

所有图标

方向性图标

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',
}

const Demo = () => (
  <div style={{ display: 'flex', flexWrap: 'wrap', marginBottom: -10, marginRight: -10 }}>
    {iconList.map((type, idx) => {
      return (
        <div key={idx} style={itemStyl}>
          <Icon type={type} />
          <div style={{ color: '#525252', fontSize: 12, paddingTop: 8 }}>{type}</div>
        </div>
      )
    })}
  </div>
);
export default Demo

圆圈方向性图标

import React from "react"
import { Icon } from 'uiw';

const iconList = [
  'square-o', 'down-circle-o', 'down-circle','up-circle-o','up-circle','left-circle-o', 'left-circle','right-circle-o', 'right-circle','play-circle-o',  'play-circle',
]
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',
}
const Demo = () => (
  <div style={{ display: 'flex', flexWrap: 'wrap', marginBottom: -10, marginRight: -10 }}>
    {iconList.map((type, idx) => {
      return (
        <div key={idx} style={itemStyl}>
          <Icon type={type} />
          <div style={{ color: '#525252', fontSize: 12, paddingTop: 8 }}>{type}</div>
        </div>
      )
    })}
  </div>
);
export default Demo

其它方向性图标

import React from "react"
import { Icon } from 'uiw';

const iconList = [
  'down', 'up', 'left', 'right', 'caret-down', 'caret-up', 'caret-left', 'caret-right', 'arrow-down', 'arrow-up', 'arrow-left', 'arrow-right',
  'shrink','arrows-alt','d-arrow-left','d-arrow-right','enter',
  'rollback', 'd-caret','backward','forward',  'logout', 'login', 'swap-left', 'swap-right', 'swap',
  'verticle-left', 'verticle-right', 'menu','menu-fold', 'menu-unfold',
]
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',
}

const Demo = () => (
  <div style={{ display: 'flex', flexWrap: 'wrap', marginBottom: -10, marginRight: -10 }}>
    {iconList.map((type, idx) => {
      return (
        <div key={idx} style={itemStyl}>
          <Icon type={type} />
          <div style={{ color: '#525252', fontSize: 12, paddingTop: 8 }}>{type}</div>
        </div>
      )
    })}
  </div>
);
export default Demo

提示建议性图标

import React from "react"
import { Icon } from 'uiw';

const iconList = [
  'smile-o', 'smile','frown-o', 'frown', 'meh-o', 'meh',
  'pause-circle-o', 'pause', 'pause-circle', 'information-o', 'information', 'warning-o', 'warning',
  'question-circle-o', 'question-circle', 'stop-o', 'stop',
];
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',
}

const Demo = () => (
  <div style={{ display: 'flex', flexWrap: 'wrap', marginBottom: -10, marginRight: -10 }}>
    {iconList.map((type, idx) => {
      return (
        <div key={idx} style={itemStyl}>
          <Icon type={type} />
          <div style={{ color: '#525252', fontSize: 12, paddingTop: 8 }}>{type}</div>
        </div>
      )
    })}
  </div>
);
export default Demo

符号

import React from "react"
import { Icon } from 'uiw';

const iconList = [
 'plus', 'plus-circle-o','plus-circle', 'plus-square', 'plus-square-o',
 'minus', 'minus-circle-o', 'minus-circle', 'minus-square', 'minus-square-o',
 'close','circle-close-o', 'circle-close','close-square', 'close-square-o', 'asterisk',
  'check', 'circle-check-o', 'circle-check','check-square','check-square-o', 'copyright',
]
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',
}

const Demo = () => (
  <div style={{ display: 'flex', flexWrap: 'wrap', marginBottom: -10, marginRight: -10 }}>
    {iconList.map((type, idx) => {
      return (
        <div key={idx} style={itemStyl}>
          <Icon type={type} />
          <div style={{ color: '#525252', fontSize: 12, paddingTop: 8 }}>{type}</div>
        </div>
      )
    })}
  </div>
);
export default Demo

文件

import React from "react"
import { Icon } from 'uiw';

const iconList = [
  'file-text', 'file-jpg', 'file-unknown', 'file-add', 'file-excel', 'file-pdf',
  'folder-add', 'folder-open', 'paper-clip',
]
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',
}

const Demo = () => (
  <div style={{ display: 'flex', flexWrap: 'wrap', marginBottom: -10, marginRight: -10 }}>
    {iconList.map((type, idx) => {
      return (
        <div key={idx} style={itemStyl}>
          <Icon type={type} />
          <div style={{ color: '#525252', fontSize: 12, paddingTop: 8 }}>{type}</div>
        </div>
      )
    })}
  </div>
);
export default Demo

其它

import React from "react"
import { Icon } from 'uiw';

const iconList = [
  'heart-off', 'heart-on', 'star-on', 'star-off','lock', 'unlock','dashboard',
  'area-chart', 'bar-chart', 'dot-chart','pie-chart',
  'dislike-o', 'like-o','loading', 'reload','appstore', 'appstore-o',
  'tag', 'tag-o','tags','tags-o', 'setting','setting-o','map','table','qrcode','barcode','printer',
  'cloud-upload','cloud-upload-o', 'cloud-download','cloud-download-o', 'download','message', 'mail', 'mail-o',
  'user', 'user-add', 'user-delete', 'usergroup-add', 'usergroup-delete', 'zoom-in', 'zoom-out','time', 'time-o',
  'bell', 'camera-o', 'coffee', 'document', 'delete', 'date', 'edit',  'eye-o', 'environment-o', 'filter', 'global', 'inbox', 'home', 'laptop', 'link', 'copy', 'more', 'shopping-cart', 'search', 'save', 'safety', 'poweroff', 'picasa', 'notification',
  'pay-circle-o', 'pay', 'picture', 'woman', 'man', 'verification', 'wifi', 'video-camera', 'mobile'
]
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',
}

const Demo = () => (
  <div style={{ display: 'flex', flexWrap: 'wrap', marginBottom: -10, marginRight: -10 }}>
    {iconList.map((type, idx) => {
      return (
        <div key={idx} style={itemStyl}>
          <Icon type={type} />
          <div style={{ color: '#525252', fontSize: 12, paddingTop: 8 }}>{type}</div>
        </div>
      )
    })}
  </div>
);
export default Demo

品牌标识

import React from "react"
import { Icon } from 'uiw';

const iconList = ['uiw', 'windows', 'linux', 'apple', 'facebook', 'twitter', 'adobe', 'baidu', 'alipay', 'android-o', 'android','reddit', 'github', 'github-o', 'aliwangwang',   'dingding', 'foursquare', 'linkedin', 'pinterest', 'qq',  'weibo', 'taobao', 'weixin', 'css3', 'html5'];

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',
}

const Demo = () => (
  <div style={{ display: 'flex', flexWrap: 'wrap', marginBottom: -10, marginRight: -10 }}>
    {iconList.map((type, idx) => {
      return (
        <div key={idx} style={itemStyl}>
          <Icon type={type} />
          <div style={{ color: '#525252', fontSize: 12, paddingTop: 8 }}>{type}</div>
        </div>
      )
    })}
  </div>
);
export default Demo

浏览器图标

import React from "react"
import { Icon } from 'uiw';

const iconList = [ "chrome", "safari", "firefox", "opera", "ie", ];
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',
}

const Demo = () => (
  <div style={{ display: 'flex', flexWrap: 'wrap', marginBottom: -10, marginRight: -10 }}>
    {iconList.map((type, idx) => {
      return (
        <div key={idx} style={itemStyl}>
          <Icon type={type} />
          <div style={{ color: '#525252', fontSize: 12, paddingTop: 8 }}>{type}</div>
        </div>
      )
    })}
  </div>
);
export default Demo

Keywords

FAQs

What is @uiw/react-icon?

Is @uiw/react-icon popular?

Is @uiw/react-icon well maintained?

Package last updated on 27 Aug 2022

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

@uiw/react-icon

Icon 图标

搜索图标

如何使用

图标尺寸

图标颜色

与文本对齐

图标的命名规范

图标旋转实例

自定义图标

字体图标

API

所有图标

方向性图标

提示建议性图标

符号

文件

其它

品牌标识

浏览器图标

Keywords

Related posts

Weekly Downloads Now Available in npm Package Search Results

Tech's $90B Ghost Engineer Problem: Stanford Study Finds 9.5% of Engineers Do Almost Nothing