How to use the grommet-icons.Attraction function in grommet-icons

var CustomCarousel = function CustomCarousel(_ref) {
  var controls = _ref.controls,
      rest = _objectWithoutPropertiesLoose(_ref, ["controls"]);

  return _react["default"].createElement(_grommet.Grommet, {
    theme: customTheme
  }, _react["default"].createElement(_grommet.Box, {
    align: "center",
    pad: "large"
  }, _react["default"].createElement(_grommet.Carousel, _extends({
    controls: controls
  }, rest), _react["default"].createElement(_grommet.Box, {
    pad: "xlarge",
    background: "accent-1"
  }, _react["default"].createElement(_grommetIcons.Attraction, {
    size: "xlarge"
  })), _react["default"].createElement(_grommet.Box, {
    pad: "xlarge",
    background: "accent-2"
  }, _react["default"].createElement(_grommetIcons.TreeOption, {
    size: "xlarge"
  })), _react["default"].createElement(_grommet.Box, {
    pad: "xlarge",
    background: "accent-3"
  }, _react["default"].createElement(_grommetIcons.Car, {
    size: "xlarge"
  })))));
};

ControlledTabs.prototype.render = function render() {
    var index = this.state.index;

    return _react2.default.createElement(
      _Grommet2.default,
      { theme: _themes.grommet },
      _react2.default.createElement(
        _Tabs2.default,
        { activeIndex: index, onActive: this.onActive },
        _react2.default.createElement(
          _Tab2.default,
          { title: 'Tab 1' },
          _react2.default.createElement(
            _Box2.default,
            { margin: 'small', pad: 'large', align: 'center', background: 'accent-1' },
            _react2.default.createElement(_grommetIcons.Attraction, { size: 'xlarge' })
          )
        ),
        _react2.default.createElement(
          _Tab2.default,
          { title: 'Tab 2' },
          _react2.default.createElement(
            _Box2.default,
            { margin: 'small', pad: 'large', align: 'center', background: 'accent-2' },
            _react2.default.createElement(_grommetIcons.TreeOption, { size: 'xlarge' })
          )
        ),
        _react2.default.createElement(
          _Tab2.default,
          { title: 'Tab 3' },
          _react2.default.createElement(
            _Box2.default,

_Box2.default,
        {
          direction: 'row-responsive',
          justify: 'center',
          align: 'center',
          pad: 'xlarge',
          background: 'dark-2'
        },
        _react2.default.createElement(
          _Box2.default,
          {
            pad: 'xlarge',
            align: 'center',
            background: { color: 'light-2', opacity: 'strong' }
          },
          _react2.default.createElement(_grommetIcons.Attraction, { size: 'xlarge' }),
          _react2.default.createElement(
            _Text2.default,
            null,
            'Party'
          ),
          _react2.default.createElement(_Anchor2.default, { href: '', label: 'Link' }),
          _react2.default.createElement(_Button2.default, { label: 'Button', onClick: function onClick() {} })
        ),
        _react2.default.createElement(
          _Box2.default,
          {
            pad: 'xlarge',
            align: 'center',
            background: { color: 'accent-2', opacity: 'weak' }
          },
          _react2.default.createElement(_grommetIcons.TreeOption, { size: 'xlarge' }),