0.4em of whitespace to the right of the icon on small "size" setting

Set the icons to "small" and you will notice that there is a small amount of whitespace in the container of the icon to the right of the icon itself. This is due to the .resp-sharing-button span css selector and it's padding-left. When there is no text, this whitespace causes the icon itself to look askew. I can think of two remedies for this:

Remove the padding on the class, adding padding right to the icon class with an offset on the possible span, or make the classes used slightly more specific on the span inside of the icon container instead of just by tag span
Do not render the span when there is no text: https://github.com/mxstbr/sharingbuttons.io/blob/master/js/components/PreviewButton.react.js#L27

It seems like this issue related to this PR: https://github.com/mxstbr/sharingbuttons.io/pull/55

Likely the latter is the better of the two options: you can simply replace

{shareText}

with

{shareText || null}

or something very similar to that, like pulling all of the logic for text out to another function:

getIconText(name) {
    let shareText = null;

    switch (this.props.size) {
    case 'large':
        // GitHub does not like my updates to this line...but I do...
        // shareText = `Share ${/^e-?mail$/i.test(this.props.network.name) ? "by" : "on"} ${name}`;
        shareText = "Share " + (this.props.network.name.toLowerCase() === "e-mail" ? "by " : "on ") + name;
        break;
    case 'medium':
        if (this.props.network && this.props.network.name) {
            shareText = this.props.network.name;
        }
        break;
    default:
    }

    return shareText;
}

mxstbr / sharingbuttons.io

0.4em of whitespace to the right of the icon on small "size" setting #64