FEAT: Icon parent wrapper element/component

packages/react-icons/src/iconBase.tsx

@@ -34,6 +34,12 @@ export interface IconBaseProps extends React.SVGAttributes<SVGElement> {
   size?: string | number;
   color?: string;
   title?: string;
+  wrapper?:
+    | React.FunctionComponent<any>
+    | React.ComponentClass<any>
+    | string
+    | null;
+  wrapperClassName?: string;
 }
 
 export type IconType = (props: IconBaseProps) => JSX.Element;
@@ -48,7 +54,7 @@ export function IconBase(
     if (props.className)
       className = (className ? className + " " : "") + props.className;
 
-    return (
+    const icon = (
       <svg
         stroke="currentColor"
         fill="currentColor"
@@ -70,6 +76,27 @@ export function IconBase(
         {props.children}
       </svg>
     );
+
+    // if props.wrapper is null, explicitly skip Wrapper component.
+    // else, prioritize the wrapper component from props, then the context.
+    const wrapper =
+      props.wrapper === null ? undefined : props.wrapper || conf.wrapper;
+
+    // wrap component if wrapper is set.
+    if (wrapper) {
+      let wrapperClassName;
+      if (conf.wrapperClassName) wrapperClassName = conf.wrapperClassName;
+      if (props.wrapperClassName)
+        wrapperClassName =
+          (wrapperClassName ? wrapperClassName + " " : "") +
+          props.wrapperClassName;
+      return React.createElement(
+        wrapper,
+        { className: wrapperClassName },
+        icon
+      );
+    }
+    return icon;
   };
 
   return IconContext !== undefined ? (

packages/react-icons/src/iconContext.tsx

@@ -6,6 +6,8 @@ export interface IconContext {
   className?: string;
   style?: React.CSSProperties;
   attr?: React.SVGAttributes<SVGElement>;
+  wrapper?: React.FunctionComponent<any> | React.ComponentClass<any> | string;
+  wrapperClassName?: string;
 }
 
 export const DefaultContext: IconContext = {
@@ -14,6 +16,8 @@ export const DefaultContext: IconContext = {
   className: undefined,
   style: undefined,
   attr: undefined,
+  wrapper: undefined,
+  wrapperClassName: undefined,
 };
 
 export const IconContext: React.Context<IconContext> =