Add support for strokeWidth

[wojciechkrol]

Some icon sets allow for the configuration of strokeWidth. Unfortunately, the strokeWidth argument does not work on icons that have stroke-width defined in nested tags. I found a workaround that allows overriding stroke-width, but I'm not sure how you want to implement it in the library, so I'll just suggest an idea:

Example Icon SVG:

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="0.5"><path d="M17 8V5a1 1 0 0 0-1-1H6a2 2 0 0 0 0 4h12a1 1 0 0 1 1 1v3m0 4v3a1 1 0 0 1-1 1H6a2 2 0 0 1-2-2V6"/><path d="M20 12v4h-4a2 2 0 0 1 0-4z"/></g></svg>

My workaround:

export const renderIcon = (props: RuntimeProps) => {
  const svg = prepareSvgIcon(props);

  if (!props.iconData || !svg || !svg.body) {
    return null;
  }

  if (props.strokeWidth !== undefined) {
    svg.body = svg.body.replace(
      /stroke-width="[^"]*"/g,
      `stroke-width="${props.strokeWidth}"`
    );
  }

  if (Platform.OS === 'web') {
    return renderWebIcon(svg, props);
  }

  return renderNativeIcon(svg, props);
};

[oktaysenkan]

We should use React.Children for change props.

[wojciechkrol]

What do you mean? For now svg.body is a string.