src/icon/index.js File

import React from 'react'
import PropTypes from 'prop-types'
import Component from '../utils/Component'
import classnames from 'classnames'
import Logger from '../utils/logger'

import '../style'
import 'phoenix-styles/less/modules/iconfont.less'

/**
 * Icon<br/>
 * - 可通过phIcon来配置不同类型的符号, 可选[查看所有icon类型](http://future-team.github.io/gfs-icons/index.html)。
 * - 支持自定义className，事件等操作。
 *
 * 主要属性和接口：
 * - phIcon:配置不同类型的符号 <br/>
 * 如：`<Icon phIcon='search' />`
 *
 * @class Icon
 * @module 标签组件
 * @extends Component
 * @constructor
 * @since 1.3.0
 * @demo icon|icon.js {展示}
 * @show true
 * */

export default class Icon extends Component{
    static propTypes = {
        /**
         * 样式前缀
         * @property classPrefix
         * @type String
         * @default 'icon'
         * */
        classPrefix: PropTypes.string,
        /**
         * 标签tagName
         * @property componentTag
         * @type String
         * @default 'span'
         * */
        componentTag:PropTypes.string,
        /**
         * icon符号类型
         * @property phIcon
         * @type string
         * @default ''
         **/
        phIcon:PropTypes.string,
         /**
         * 按钮尺寸[xs、sm、md、lg、xlg], 默认为sm
         * @property phSize
         * @type String
         * @default 'sm'
         * */
        phSize:PropTypes.string,
        /**
         * 按钮颜色[default, primary、warning、danger、info、error、success], 默认default
         * @property phStyle
         * @type Boolean
         * @default 'default'
         * */
        phStyle:PropTypes.string,
    };

    static defaultProps ={
        phIcon: '',
        phSize: 'sm',
        phStyle: 'default',
        classPrefix:'icon',
        componentTag:'span',
        classMapping : {
            'default':'default',
            'primary':'primary',
            'info':'info',
            'success':'success',
            'error':'error',
            'warning':'warning',
            'danger':'danger'
        }
    };

    constructor(props,context){
        super(props,context);
        new Logger('Icon');
    }

    renderIcon(){
        let {componentTag:Component, className, phIcon, classPrefix} = this.props

        return(
            <Component {...this.otherProps} className={classnames(
                'gfs-icon',
                this.getProperty(true),
                className,
                phIcon? classPrefix + '-' + phIcon:'',
                phIcon && phIcon.indexOf('loading')>=0 ? 'gfs-icon-loading':''
           )}>
               {this.props.children}
           </Component>
        )
    }

    render(){
        return this.renderIcon()
    }
}