dogicon.js

import React from 'react';
import { EditOutlined, EditFilled, HeartOutlined, HeartFilled} from "@ant-design/icons";

function getIcon (theme, iconType) {
    let Icon;
    
    if (theme === 'filled') {
        if (iconType === 'edit') {
            Icon = EditFilled
        } else if (iconType === 'heart') {
            Icon = HeartFilled
        } 
    } else if (theme === 'outlined') {
        if (iconType === 'edit') {
            Icon = EditOutlined
        } else if (iconType === 'heart') {
            Icon = HeartOutlined
        } 
    }
    
    return Icon;  
}

class PostIcon extends React.Component {
    constructor(props){
        super(props);
        this.state = {
            selected: props.selected
        };
        this.onClick = this.onClick.bind(this);
    }

    onClick(){
        //reverse the selected state with every click
        this.setState({selected: !this.state.selected});
    }

    render(){
        const theme = this.state.selected ? 'filled' : 'outlined';
        const iconType = this.props.type;
        const Icon = getIcon(theme, iconType);
        
        return (
            <span>
                <Icon
                    onClick={this.onClick}
                    style={{color:'steelblue'}} />
                {this.props.count}
          </span>
        );
    }
}
    
export default PostIcon;