@uiw/react-icon
    TypeScript icon, indicating that this package has built-in type declarations

    4.9.7 • Public • Published

    Icon 图标

    语义化的矢量图形,内置的图标属于UI框架常用图形字体。icon字体以及样式,被抽离到一个新的仓库 uiw iconuiw去依赖 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 ReactDOM from 'react-dom';
    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>
        );
      }
    }
    ReactDOM.render(<Demo />, _mount_);

    如何使用

    使用<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 ReactDOM from 'react-dom';
    import { Icon } from 'uiw';
    
    ReactDOM.render(
      <div style={{ fontSize: 18, lineHeight: '12px' }}>
        <Icon type="heart-on" />
        <Icon type="pie-chart" />
        <Icon type="tag" />
      </div>,
      _mount_
    );

    图标尺寸

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

    import ReactDOM from 'react-dom';
    import { Icon } from 'uiw';
    
    ReactDOM.render(
      <div style={{ fontSize: '28px' }}>
        <Icon type="heart-on" />
        <Icon type="pie-chart" />
        <Icon type="tag" />
      </div>,
      _mount_
    );

    图标颜色

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

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

    import ReactDOM from 'react-dom';
    import { Icon } from 'uiw';
    
    ReactDOM.render(
      <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>,
      _mount_
    );

    与文本对齐

    import { Icon } from 'uiw';
    
    ReactDOM.render(
      <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>,
      _mount_
    );

    图标的命名规范

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

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

    import ReactDOM from 'react-dom';
    import { Icon } from 'uiw';
    
    ReactDOM.render(
      <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>,
      _mount_
    );

    图标旋转实例

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

    import ReactDOM from 'react-dom';
    import { Icon } from 'uiw';
    
    ReactDOM.render(
      <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>,
      _mount_
    );

    自定义图标

    import ReactDOM from 'react-dom';
    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 };
    
    ReactDOM.render(
      <div style={{ fontSize: 21, color: 'green' }}>
        <Icon style={styl} type={chat} color="red" />
        <Icon style={styl} type={contrast} spin={true} />
      </div>,
      _mount_
    );

    字体图标

    通过引入 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 设置图标的样式,例如 fillstroke Object -

    所有图标

    方向性图标

    import ReactDOM from 'react-dom';
    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',
    }
    
    ReactDOM.render(
      <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>,
      _mount_
    );

    圆圈方向性图标

    import ReactDOM from 'react-dom';
    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',
    }
    ReactDOM.render(
      <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>,
      _mount_
    );

    其它方向性图标

    import ReactDOM from 'react-dom';
    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',
    }
    
    ReactDOM.render(
      <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>,
      _mount_
    );

    提示建议性图标

    import ReactDOM from 'react-dom';
    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',
    }
    
    ReactDOM.render(
      <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>,
      _mount_
    );

    符号

    import ReactDOM from 'react-dom';
    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',
    }
    
    ReactDOM.render(
      <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>,
      _mount_
    );

    文件

    import ReactDOM from 'react-dom';
    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',
    }
    
    ReactDOM.render(
      <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>,
      _mount_
    );

    其它

    import ReactDOM from 'react-dom';
    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',
    }
    
    ReactDOM.render(
      <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>,
      _mount_
    );

    品牌标识

    import ReactDOM from 'react-dom';
    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',
    }
    
    ReactDOM.render(
      <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>,
      _mount_
    );

    浏览器图标

    import ReactDOM from 'react-dom';
    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',
    }
    
    ReactDOM.render(
      <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>,
      _mount_
    );

    Install

    npm i @uiw/react-icon

    DownloadsWeekly Downloads

    222

    Version

    4.9.7

    License

    MIT

    Unpacked Size

    42.7 kB

    Total Files

    14

    Last publish

    Collaborators

    • wcjiang