Add default button icon components

[joeldenning]

Canopy has nice icons designed by its designers, but my current projects using bandicoot do not.

It would be nice to expose a ButtonIcon component from bandicoot that has decent defaults. Or maybe even a BoldButton, ItalicButton, etc.

We can use a free icon website to get the default icons.

[joeldenning]

@dvnrns any interest in helping with this?

[dvnrsn]

Absolutely. Also would be cool to create a demo on bandicoot.js.org or elsewhere

[joeldenning]

Here are some text editor icons that are free to use (if you attribute the author somewhere in the website that uses them).

https://www.flaticon.com/icon-packs/text-editor

Thoughts on the following API for this?

import { IconButton, BoldIcon, useDocumentExecCommand, useDocumentQueryCommandState } from 'bandicoot'

function Bold() {
  const {performCommand} = useDocumentExecCommand('bold')
  const {isActive} = useDocumentQueryCommandState('bold')

  return (
    <IconButton
      onClick={performCommand}
      className={isActive ? 'active-control-button' : ''}
    >
      <BoldIcon />
    </button>
  )
}

Also, here are a few things the implementation should have:

• We should make sure that people not these button icons do not have to include them in their final bundle. I think this will happen automatically since we have an esm bundle and a module property which enable webpack's automatic tree shaking. But we should verify this before merging it.
• The component exposed for buttons should allow for any and all <button> props to be passed through to the real button that is rendered. For example: <button {...props} className="with-hover-state"> (except account for if props has a className on it, too)
• Figure out easiest way to get the css for the button loaded into the DOM. Could be to require the user to import a single .css file, could be manually appending a style element, or it could be using kremling which auto-appends. The first option is the most popular among other react libs.