Ideas for Button and Icon

Button and Icon

@IsButton: {
  type,
  id: '',
  color: 'default',
  size: 'md',
  disabled: false,
  circle: false,
  onClick: () => {},
  className: '',
  icon: false, // boolean or string
  iconOptions: {
    position: '',
    className: '',
    ...
  },
  ...
}
-----------------------------------------------
import Button from MUI

@IsButton
class ButtonMUI {
  render() {
    <Button ...>
      {this.props.children}
    </Button>
  }
}
-----------------------------------------------
import Button from ReactStrap

@IsButton
class ButtonMaterial {
  render() {
    <Button ...>
      {this.props.children}
    </Button>
  }
}
-----------------------------------------------
IDMatrix:
import ButtonMUI

class ButtonIDM {
  render() {
    <ButtonMUI ...>
      {this.props.children}
    </ButtonMUI>
  }
}
-----------------------------------------------
In project:
import Button from ButtonIDM

render() {
  <Button icon='bin' onClick={this.onDelete} size='lg' >
    Delete
  </Button>
}

----------------------------------------------------------------------------------------------
Icon:
@IsIcon: {
  source: 'fa', // fa, custom (buit from svg source), ...
  icon or name: 'user',
  size: 'lg', // can be extended from its parent component (don't know how)
  className: '', // primary, warning, ...
}

import IconBin from 'idm-icon-bin'
import IconUser from 'idm-icon-user'
import IconInfo from 'idm-icon-info'

@IsIcon
class Icon {
  render() {
    
  }
}
-----------------------------------------------
class ButtonMUI {
  render() {
    <Button>
      this.props.iconOptions.position == 'left' && <Icon source="custom" name="user" size="md" className="danger customClass"/>
      {this.props.children}
      this.props.iconOptions.position == 'right' && <Icon source="custom" name="user" size="md" className="danger customClass"/>
    </Button>
  }
}

Класс Icon который parent of IconUser, IconBin, etc не нужен

render() {
  <IconUser type="svg" />
}

class IconUser {
  render() {
    is font awesome && <IconFA icon="user"/>
    is custom cvg && <IconSVG icon="user" />
    is bootstrap && <IconBootstrap icon="user" />
  }
}

class IconFA {
  render() {
    <i class="fa fa-{props.icon}" />
  }
}

dependencies:

• IconUser, IconBin, only required
• IconFa
• IconSVG
• IconBootstrap

better than:

• Icon
  • All icons