Turn SVG icon into button

Question

<button className="zapButton"> <Zap /> </button>

The only thing I've been able to find is wrapping the icon in the button tag. The only problem with this is I get a rectangular button and the icon inside the rectangle. What i am trying to figure out is how to make it so that the button is only the SVG icon.

Answer 1

You can add onClick attribute to Zap itself, any element can be clickable, doesn't need to be button. Or you can remove the border from the button you currently have with css border: none to make it look like there's no rectangular button.

Answer 2

<button class="zap-button" style="height: auto; width: auto; border: none;">
  <svg></svg>
</button>

And of course you shouldn't use inline styles.