Refactor SVG component to Icon and update exports

basehub-ai · Jan 14, 2025 · 50cca19 · 50cca19
1 parent 09006e4
commit 50cca19
Show file tree

Hide file tree

Showing 6 changed files with 37 additions and 7 deletions.
diff --git a/packages/basehub/react-icon.d.ts b/packages/basehub/react-icon.d.ts
@@ -0,0 +1 @@
+export * from "./dist/react-icon";
diff --git a/packages/basehub/react-icon.js b/packages/basehub/react-icon.js
@@ -0,0 +1 @@
+export * from "./dist/react-icon";
diff --git a/packages/basehub/src/react/svg/index.ts → packages/basehub/src/react/icon/index.ts b/packages/basehub/src/react/svg/index.ts → packages/basehub/src/react/icon/index.ts
diff --git a/packages/basehub/src/react/svg/primitive.tsx → ...ages/basehub/src/react/icon/primitive.tsx b/packages/basehub/src/react/svg/primitive.tsx → ...ages/basehub/src/react/icon/primitive.tsx
@@ -110,8 +110,7 @@ const parseStyleString = (styleString: string): React.CSSProperties => {
 };
 
 /* COMPONENT */
-
-export const SVG = ({
+export const Icon = ({
   content: _content,
   children,
   components = DEFAULT_COMPONENTS,
@@ -212,9 +211,11 @@ export const SVG = ({
           .filter(Boolean);
 
         // Create the component with children if they exist
-        return children.length > 0
-          ? React.createElement(tag, props, children)
-          : React.createElement(tag, props);
+        return children.length > 0 ? (
+          <Component {...props}>{children}</Component>
+        ) : (
+          <Component {...props} />
+        );
       };
 
       if (!svgElement) return null;
@@ -230,3 +231,29 @@ export const SVG = ({
 
   return parseAndRenderSVG as React.ReactElement;
 };
+
+interface SVGProps {
+  content: string;
+  /**
+   * @deprecated Use `content` instead.
+   */
+  children?: string;
+  components?: Partial<ComponentsOverride>;
+}
+
+/**
+ * @deprecated Use the `Icon` component instead.
+ */
+export const SVG: React.FC<SVGProps> = ({
+  content: _content,
+  children,
+  components = DEFAULT_COMPONENTS,
+}) => {
+  console.warn(
+    "Warning: The SVG component is deprecated and will be removed in the next major version. Please use the Icon component instead."
+  );
+
+  const content = _content ?? children;
+
+  return <Icon content={content} components={components} />;
+};
diff --git a/packages/basehub/src/react/index.ts b/packages/basehub/src/react/index.ts
@@ -5,4 +5,4 @@ export {
   type CustomBlocksBase,
   type HandlerProps as RichTextHandlerProps,
 } from "./rich-text/primitive";
-export { SVG } from "./svg/primitive";
+export { SVG, Icon } from "./icon/primitive";
diff --git a/packages/basehub/tsup-client.config.ts b/packages/basehub/tsup-client.config.ts
@@ -7,7 +7,8 @@ export default defineConfig((_options: Options) => {
     minify: false,
     dts: true,
     entry: {
-      "react-svg": "./src/react/svg/index.ts",
+      "react-svg": "./src/react/icon/index.ts",
+      "react-icon": "./src/react/icon/index.ts",
       "react-rich-text": "./src/react/rich-text/index.ts",
       "react-form": "./src/react/form/index.ts",
       "react-code-block/index": "./src/react/code-block/index.ts",