How to use the @bentley/ui-core.Size function in @bentley/ui-core

private setSizeFromRef(button: HTMLButtonElement | null) {
    // istanbul ignore else
    if (button) {
      const rect = button.getBoundingClientRect();
      this.size = new Size(rect.width, rect.height);

      if (this.props.onSizeKnown)
        this.props.onSizeKnown(this.size);
    }
  }

private _onResize = (width: number, height: number) => {
    // do allow toolbar to go to a size that doesn't show at least one button;
    if (width < this._minToolbarSize) width = this._minToolbarSize;
    if (height < this._minToolbarSize) height = this._minToolbarSize;
    if (this.state.width !== width || this.state.height !== height) {
      const items = this.generateToolbarItems(this.props.items, new Size(width, height));
      this.setState({ width, height, items });
    }
  }

private setDivRef(div: HTMLDivElement | null) {
    // istanbul ignore else
    if (div) {
      const rect = div.getBoundingClientRect();
      const size = new Size(rect.width, rect.height);

      // istanbul ignore else
      if (this.props.onSizeKnown)
        this.props.onSizeKnown(size);
    }
  }

public componentDidUpdate(prevProps: ToolbarProps, _prevState: State) {
    if (this.props.items !== prevProps.items) {
      // if sync event changed number of displayable buttons layout the toolbar and re-render
      const items = this.generateToolbarItems(this.props.items, new Size(this.state.width, this.state.height));
      this.setState({ items });
    }
  }

private setDivRef(div: HTMLDivElement | null) {
    // istanbul ignore else
    if (div) {
      const rect = div.getBoundingClientRect();
      const newSize = new Size(rect.width, rect.height);

      // istanbul ignore else
      if (!this.state.size.equals(newSize)) {
        // istanbul ignore else
        if (this.props.onSizeKnown)
          this.props.onSizeKnown(newSize);

        // istanbul ignore else
        if (this._isMounted)
          this.setState({ size: newSize });
      }
    }
  }

setImmediate(() => {
        // if sync event changed number of displayable buttons layout the toolbar and re-render
        const items = this.generateToolbarItems(this.props.items, new Size(this.state.width, this.state.height));
        this.setState({ items });
      });
    }

/** Function called when the item is clicked. */
  onClick?: () => void;
  /** Function called when a key is pressed. */
  onKeyDown?: (e: React.KeyboardEvent) => void;
  /** Title for the item. */
  title?: string;
  /** Function called when size is known. */
  onSizeKnown?: (size: SizeProps) => void;
  /** A badge to draw. */
  badge?: React.ReactNode;
}

class ActualItem extends React.PureComponent implements ToolbarItem {
  public readonly panel = document.createElement("div");
  public readonly history = document.createElement("div");
  public size: Size = new Size(0, 0);

  private setSizeFromRef(button: HTMLButtonElement | null) {
    // istanbul ignore else
    if (button) {
      const rect = button.getBoundingClientRect();
      this.size = new Size(rect.width, rect.height);

      if (this.props.onSizeKnown)
        this.props.onSizeKnown(this.size);
    }
  }

  public render() {
    const className = classnames(
      "nz-toolbar-item-item",
      this.props.isActive && "nz-active",