React / Typescript - SVG component that accepts SVG in `as` prop --

box.tsx

import React from "react";
// Ignore because SC type pkg is broken for now
// @ts-ignore
import styled from "styled-components";
import {
  compose,
  typography,
  space,
  color,
  layout,
  SpaceProps,
  ColorProps,
} from "styled-system";

export type Assign<T, U> = {
  [P in keyof (T & U)]: P extends keyof T
    ? T[P]
    : P extends keyof U
    ? U[P]
    : never;
};

export interface BoxOwnProps extends SpaceProps, ColorProps {
  as?: React.ElementType;
  variant?: string;
}
export interface BoxProps
  extends Assign<React.ComponentProps<"div">, BoxOwnProps> {}

export const Box = styled("div")<BoxProps>(
  {
    boxSizing: "border-box",
    margin: 0,
    minWidth: 0,
  },
  compose(typography, space, color, layout)
);

svg.tsx

import * as React from "react";
import { Box, Assign, BoxOwnProps } from "zenny-ui-box";

export interface SVGProps
  extends Assign<React.ComponentProps<"svg">, BoxOwnProps> {}

export const SVG = styled(Box).attrs(
  ({ as: Component, width, height, viewBox }: SVGProps) => ({
    // Define props on top of Box
    // Set underlying element as svg
    // Or custom component (like react-icons)
    as: Component ?? "svg",
    xmlns: "http://www.w3.org/2000/svg",
    viewBox: viewBox ?? "0 0 24 24",
    width: width ?? "24px",
    height: height ?? "24px",
  })
)<SVGProps>();

// <SVG as={FiArrowDownCircle} width="48px" height="48px" />
// <SVG as={FiArrowDownCircle} color="primary" stroke="currentcolor" />