Redesigned Toolbar Custom Definition API

There is no good way to define icon size.
Because there needs to be an easier way to define toolbars. Unless we redesign the toolbar definition API.

Similar to the API design below:

<MDEditor.Markdown 
  source="...."
  commands={
    <Command>
      <Title3 />
      <CommandGroup>
        <Title1 />
        <Title2 />
        <Title3 width="12" height="12" buttonProps={{ 'aria-label': 'Insert title'}} />
      </CommandGroup>
    </Command>
  }
/>

This one has more work and can be considered for expansion in the next version. The only solution so far is as follows:

const title1: ICommand = {
  ...commands.title1,
  icon: (
    <svg width="23" height="23" viewBox="0 0 520 520">
      <path fill="currentColor" d="M15.708333..." />
    </svg>
  ),
};

@jeepers3327

Originally posted by @jaywcjlove in https://github.com/uiwjs/react-md-editor/issues/387#issuecomment-1133659574

Start by reviewing the existing toolbar command API, including ICommand and the commands.title1 example shown here. Before implementation, settle the intended nested command structure, icon sizing, and buttonProps behavior; this issue is done only when those decisions are specified and covered by suitable acceptance criteria.