Icon

  • 可通过phIcon来配置不同类型的符号, 可选查看所有icon类型
  • 支持自定义className,事件等操作。

主要属性和接口:

  • phIcon:配置不同类型的符号
    如:<Icon phIcon='search' />
Extends Component
Defined in: src/icon/index.js:10
Module: 标签组件

Available since 1.3.0

Constructor

Icon

Icon ()

Defined in src/icon/index.js:10

Available since 1.3.0

Example:

import React, { Component } from "react"

import Icon from "phoenix-ui/lib/icon"
import Code from "./code/code"

export default class icon extends Component{
    render(){
        return(
            <div>
                <h2 className="comp-title">Icon</h2>

                <h3 className="comp-type">phIcon 符号类型(对应icon的名称)</h3>
                <div className="content">
                    <Icon phIcon="search" />
                    <Icon phIcon="home" />
                </div>
                <a className="code-mark ph-button-link" href="http://future-team.github.io/gfs-icons/index.html">查看所有icon类型</a>
                <Code target="icon-phicon" />

                <h3 className="comp-type">phSize 符号大小</h3>
                <div className="content">
                    <h3 className="comp-tip">xs-24px</h3>
                    <Icon phIcon="tip-circle" phSize="xs" />
                    <h3 className="comp-tip">sm-32px</h3>
                    <Icon phIcon="tip-circle" phSize="sm" />
                    <h3 className="comp-tip">md-40px</h3>
                    <Icon phIcon="tip-circle" phSize="md" />
                    <h3 className="comp-tip">lg-48px</h3>
                    <Icon phIcon="tip-circle" phSize="lg" />
                    <h3 className="comp-tip">xlg-80px</h3>
                    <Icon phIcon="tip-circle" phSize="xlg" />
                </div>
                <Code target="icon-phsize" />

                <h3 className="comp-type">phStyle 符号颜色</h3>
                <div className="content">
                    <Icon phIcon="search" phStyle="primary" />
                    <Icon phIcon="search" phStyle="info" />
                    <Icon phIcon="search" phStyle="success" />
                </div>
                <Code target="icon-phstyle" />

                <h3 className="comp-type">其他(动态,不存在icon库)</h3>
                <div className="content" style={{backgroundColor: '#f0f0f0'}}>
                    <h3 className="comp-tip">白色加载中(按钮,Toast)</h3>
                    <Icon phIcon="loading-white" />
                    <h3 className="comp-tip">灰色加载中(列表)</h3>
                    <Icon phIcon="loading-gray" />
                </div>
                <Code target="icon-other" />
            </div>
        );
    }
}

属性

classPrefix

String

样式前缀

Default:

'icon'

componentTag

String

标签tagName

Default:

'span'

phIcon

String

icon符号类型

Default:

''

phSize

String

按钮尺寸[xs、sm、md、lg、xlg], 默认为sm

Default:

'sm'

phStyle

Boolean

按钮颜色[default, primary、warning、danger、info、error、success], 默认default

Default:

'default'