Feature: Add icon/SVG specific options?

[marcaaron]

Working on an app that requires a custom twitter button as icon (but no text) and would love to leverage this code!

Is there any way to pass in a custom SVG without altering the module itself? I see you pass props for: tag, text content, dimensions, style/className (for component but not icon), and whether or not to show the SVG icon.

But how might one pass in their own SVG path with a custom size? For example, I'm trying to use a variation on the twitter logo featured here then alter the dimensions, fill, etc.

It would be great if it were possible to pass in some svg options with a specified {path:"", width, height} and/or perhaps add a unique className for css fills, transforms, etc.

[ivanvs]

Hi marcaaron,

I looked at the code, and find out that actually you can change content of button, but I forgot to put it in documentation. There is children prop, and so if you put your desired SVG into component together with text that you want you will override current content of SVG button. So that would look like this:

//convert svg into react element
const TwitterIcon = React.createClass({
  render() {
    return (
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-.139 9.237c.209 4.617-3.234 9.765-9.33 9.765-1.854 0-3.579-.543-5.032-1.475 1.742.205 3.48-.278 4.86-1.359-1.437-.027-2.649-.976-3.066-2.28.515.098 1.021.069 1.482-.056-1.579-.317-2.668-1.739-2.633-3.26.442.246.949.394 1.486.411-1.461-.977-1.875-2.907-1.016-4.383 1.619 1.986 4.038 3.293 6.766 3.43-.479-2.053 1.08-4.03 3.199-4.03.943 0 1.797.398 2.395 1.037.748-.147 1.451-.42 2.086-.796-.246.767-.766 1.41-1.443 1.816.664-.08 1.297-.256 1.885-.517-.439.656-.996 1.234-1.639 1.697z"/>
      </svg>
    );
  }
});

  //use icon like this in other component
  <div>
        <TwitterLogin loginUrl="http://localhost:4000/api/v1/auth/twitter"
                      onFailure={this.onFailed}
                      onSuccess={this.onSuccess}
                      requestTokenUrl="http://localhost:4000/api/v1/auth/twitter/reverse"
                      showIcon={true}
                      customHeaders={customHeader}>
          <TwitterIcon/> Twitter Login
        </TwitterLogin>
      </div> 

I will update documentation. Do you still think that there is need for icon, iconProps and iconClassName props?

[marcaaron]

Nice! Very cool! No I think adding options is probably unnecessary if you can overwrite the svg content but up to you :) Thanks for the tip!!!

[ivanvs]

Sorry it took me that much time to find that out. But I had really crazy week.

I will add option to change size and color of icon. I could imagine that that could be useful if you desire just to style button.

Thank you very much. I think that this will improve documentation a lot.