binary data image for Button icon

[luca.stancapiano]

Hi all, How can I import a binary data as icon inside the Button component?

I expect the icon parameter accept something as:

Code: Select all

const binaryData = "iVBORw0KGgoAAAANSUhEUgAAAFgA.....";

class Example extends React.Component{
    
    render() {
        return <Button ... icon={`data:image/jpeg;base64,${binaryData}`}></Button>
    }
}

But it seems not be supported. Is there some alternative to do it?

[luca.stancapiano]

I resolved extending the Button component so:

Code: Select all

import React from 'react';
import { Button } from 'primereact/button';
import classNames from 'classnames';

export class ButtonData extends Button {

    renderIcon() {
        if (this.props.icon) {
            let className = classNames(this.props.icon, 'p-c', {
                'p-button-icon-left': this.props.iconPos !== 'right',
                'p-button-icon-right': this.props.iconPos === 'right'
            });

            return (
                <span className={className}>
                    {this.props.icondata && <img alt='Party symbol' src={this.props.icondata} style={{ 'width': '120px', 'height': '120px' }} />}</span>
            );
        }
        else {
            return null;
        }
    }

    render() {
        let className = classNames('p-button p-component', this.props.className, {
                'p-button-icon-only': this.props.icon && !this.props.label,
                'p-button-text-icon-left': this.props.icon && this.props.label && this.props.iconPos === 'left',
                'p-button-text-icon-right': this.props.icon && this.props.label && this.props.iconPos === 'right',
                'p-button-text-only': !this.props.icon && this.props.label,
                'p-disabled': this.props.disabled
        });
        let icon = this.renderIcon();
        let label = this.renderLabel();

        let buttonProps = Object.assign({}, this.props);
        delete buttonProps.iconPos;
        delete buttonProps.icon;
        delete buttonProps.icondata;
        delete buttonProps.label;
        delete buttonProps.tooltip;
        delete buttonProps.tooltipOptions;

        return (
            <button ref={(el) => this.element = el} {...buttonProps} className={className}>
                {this.props.iconPos === 'left' && icon}
                {label}
                {this.props.iconPos === 'right' && icon}
                {this.props.children}
            </button>
        );
    }
}

This component can be called so:

Code: Select all

<ButtonData ... icondata={`data:image/jpeg;base64,${binaryCode}`}>
                        </ButtonData>

where icondata is a new property where add the binary code. I sent a pull request with the extension https://github.com/primefaces/primereact/pull/818