@eisgs/icon

Превью иконок

  import * as icons from "@eisgs/icon";

  <div className="md-icon-grid">
    {Object.keys(icons).map((key) => {
      if(['createSvgIcon', 'StyledSvgIcon'].includes(key)) return null;

      const Icon = icons[key];

      return(
        <div className="md-icon" key={key}>
          <Icon size={30}/>
          {key}
        </div>
      );
    })}
  </div>

Размеры иконок

Управление размером иконок size

  import { InfoIcon } from "@eisgs/icon";

  <>
    <InfoIcon size={10} />
    <InfoIcon size={20} />
    <InfoIcon size={30} />
    <InfoIcon size={50} />
    <InfoIcon size={70} />
    <InfoIcon size={100} />
  </>

Управление цветом

Если цвет явно не указан, то он наследуется по свойству currentColor из родительского компонента. Цвет может быть задан явно color и изменен при ховере hoverColor и hoverable (обязательное свойство).

  import { InfoIcon } from "@eisgs/icon";

  <>
    <div className="md-icon" style={{ color: "#ff0000", marginBottom: '10px' }}>
      <InfoIcon size={50}/>
      Цвет наследован
    </div>
    <div className="md-icon">
      <InfoIcon size={50} color="red" hoverColor="yellow" hoverable />
      Цвет задан явно и меняется при ховере
    </div>
  </>