fix(Icon): correctly parse function with default props

[arteria32]

Now, we can catch a bag when the size or width and height are not specified directly and transform the input data for the icon by svgr.

**Example of transformed by svgr data svg from gravity-ui/icons/ **

var ArrowUpRightFromSquareIcon = function ArrowUpRightFromSquareIcon(props) {
  return /*#__PURE__*/_jsx("svg", _objectSpread(_objectSpread({}, props), {}, {
    children: /*#__PURE__*/_jsx("path", {
      fill: "currentColor",
      fillRule: "evenodd",
      d: "M10 1.5A.75.75 0 0 0 10 3h1.94L6.97 7.97a.75.75 0 0 0 1.06 1.06L13 4.06V6a.75.75 0 0 0 1.5 0V2.25a.75.75 0 0 0-.75-.75H10ZM7.5 3.25a.75.75 0 0 0-.75-.75H4.5a3 3 0 0 0-3 3v6a3 3 0 0 0 3 3h6a3 3 0 0 0 3-3V9.25a.75.75 0 0 0-1.5 0v2.25a1.5 1.5 0 0 1-1.5 1.5h-6A1.5 1.5 0 0 1 3 11.5v-6A1.5 1.5 0 0 1 4.5 4h2.25a.75.75 0 0 0 .75-.75Z",
      clipRule: "evenodd"
    })
  }));
};
ArrowUpRightFromSquareIcon.defaultProps = {
  xmlns: "http://www.w3.org/2000/svg",
  width: "16",
  height: "16",
  fill: "none",
  viewBox: "0 0 16 16"
};

Creating a component as a usual function skips the default props of the component.
Let's change the method of creating the SVGR component to getting props.

---

I hereby agree to the terms of the CLA available at: CLA.

[gravity-ui-bot]

Preview is ready.

[gravity-ui-bot]

Visual Tests Report is ready.

[amje]

As you can see in line 125, we don't want the default props to be applied. It was intentional

[arteria32]

Yes, I understand.
But on line 61, you would like to get the width and height from the viewBox in case they were not specified.
And the viewBox is passed to defaultProps in svgr transformed icons.
sorry, if I miss something

[amje]

The problem is data({}) and React.createElement(data, {}) produce different results. Return type of React.createElement(data, {}) is not svg element and it hasn't the viewBox prop.

[arteria32]

Also, I can try a alternative solution- extends available types for component svg data

export function isComponentSvgData(data: SVGIconData): data is SVGIconComponentData {
    return (typeof data === 'object' || typeof data === 'function') && 'defaultProps' in data;
}

[amje]

@arteria32 I tried to get same result as yours when transforming via SVGR in the playground but I couldn't. How do you get function component + defaultProps code?

[arteria32]

@arteria32 I tried to get same result as yours when transforming via SVGR in the playground but I couldn't. How do you get function component + defaultProps code?

Example:
1 step. Create component
src/..../IconWithoutSize.tsx

export const IconWithoutSize = () => {
    return <Icon data={ArrowUpRightFromSquareIcon} />;
};

2 step: We build project with gravity-ui/app-builder

import {LibraryConfig} from '@gravity-ui/app-builder';

const config: LibraryConfig = {
    lib: {
        internalDirs: ['i18n/keysets'],
    },
};

export default config;

3 step: Get a bad component in build package in build/esm/components/.../IconWithoutSize/IconWithoutSize.js

import _objectSpread from "@babel/runtime/helpers/objectSpread2";
var ArrowUpRightFromSquareIcon = function ArrowUpRightFromSquareIcon(props) {
  return /*#__PURE__*/_jsx("svg", _objectSpread(_objectSpread({}, props), {}, {
    children: /*#__PURE__*/_jsx("path", {
      fill: "currentColor",
      fillRule: "evenodd",
      d: "M10 1.5A.75.75 0 0 0 10 3h1.94L6.97 7.97a.75.75 0 0 0 1.06 1.06L13 4.06V6a.75.75 0 0 0 1.5 0V2.25a.75.75 0 0 0-.75-.75H10ZM7.5 3.25a.75.75 0 0 0-.75-.75H4.5a3 3 0 0 0-3 3v6a3 3 0 0 0 3 3h6a3 3 0 0 0 3-3V9.25a.75.75 0 0 0-1.5 0v2.25a1.5 1.5 0 0 1-1.5 1.5h-6A1.5 1.5 0 0 1 3 11.5v-6A1.5 1.5 0 0 1 4.5 4h2.25a.75.75 0 0 0 .75-.75Z",
      clipRule: "evenodd"
    })
  }));
};
ArrowUpRightFromSquareIcon.defaultProps = {
  xmlns: "http://www.w3.org/2000/svg",
  width: "16",
  height: "16",
  fill: "none",
  viewBox: "0 0 16 16"
};

export var IconWithoutSize = function IconWithoutSize() {
  return /*#__PURE__*/_jsx(Icon, {
    data: ArrowUpRightFromSquareIcon
  });
};
// #sourceMappingURL=CrmSelectDefaultOption.js.map