expose svg elements at the el level (#4962)

Author: adhami3310

reflex/components/core/banner.py

@@ -382,7 +382,7 @@ def create(cls, **props) -> Component:
                             ),
                             rx.hstack(
                                 rx.el.svg(
-                                    rx.el.svg.path(
+                                    rx.el.path(
                                         d="M6.90816 1.34341C7.61776 1.10786 8.38256 1.10786 9.09216 1.34341C9.7989 1.57799 10.3538 2.13435 10.9112 2.91605C11.4668 3.69515 12.0807 4.78145 12.872 6.18175L12.9031 6.23672C13.6946 7.63721 14.3085 8.72348 14.6911 9.60441C15.0755 10.4896 15.267 11.2539 15.1142 11.9881C14.9604 12.7275 14.5811 13.3997 14.0287 13.9079C13.4776 14.4147 12.7273 14.6286 11.7826 14.7313C10.8432 14.8334 9.6143 14.8334 8.0327 14.8334H7.9677C6.38604 14.8334 5.15719 14.8334 4.21778 14.7313C3.27301 14.6286 2.52269 14.4147 1.97164 13.9079C1.41924 13.3997 1.03995 12.7275 0.88613 11.9881C0.733363 11.2539 0.92483 10.4896 1.30926 9.60441C1.69184 8.72348 2.30573 7.63721 3.09722 6.23671L3.12828 6.18175C3.91964 4.78146 4.53355 3.69515 5.08914 2.91605C5.64658 2.13435 6.20146 1.57799 6.90816 1.34341ZM7.3335 11.3334C7.3335 10.9652 7.63063 10.6667 7.99716 10.6667H8.00316C8.3697 10.6667 8.66683 10.9652 8.66683 11.3334C8.66683 11.7016 8.3697 12.0001 8.00316 12.0001H7.99716C7.63063 12.0001 7.3335 11.7016 7.3335 11.3334ZM7.3335 8.66675C7.3335 9.03495 7.63196 9.33341 8.00016 9.33341C8.36836 9.33341 8.66683 9.03495 8.66683 8.66675V6.00008C8.66683 5.63189 8.36836 5.33341 8.00016 5.33341C7.63196 5.33341 7.3335 5.63189 7.3335 6.00008V8.66675Z",
                                         fill_rule="evenodd",
                                         clip_rule="evenodd",

reflex/components/datadisplay/logo.py

@@ -18,7 +18,7 @@ def svg_logo(
     """
 
     def logo_path(d: str):
-        return rx.el.svg.path(d=d)
+        return rx.el.path(d=d)
 
     paths = [
         "M0 11.5999V0.399902H8.96V4.8799H6.72V2.6399H2.24V4.8799H6.72V7.1199H2.24V11.5999H0ZM6.72 11.5999V7.1199H8.96V11.5999H6.72Z",

reflex/components/el/__init__.pyi

@@ -90,29 +90,51 @@ from .elements.inline import u as u
 from .elements.inline import wbr as wbr
 from .elements.media import Area as Area
 from .elements.media import Audio as Audio
+from .elements.media import Circle as Circle
+from .elements.media import Defs as Defs
+from .elements.media import Ellipse as Ellipse
 from .elements.media import Embed as Embed
 from .elements.media import Iframe as Iframe
 from .elements.media import Img as Img
+from .elements.media import Line as Line
+from .elements.media import LinearGradient as LinearGradient
 from .elements.media import Map as Map
 from .elements.media import Object as Object
+from .elements.media import Path as Path
 from .elements.media import Picture as Picture
+from .elements.media import Polygon as Polygon
 from .elements.media import Portal as Portal
+from .elements.media import RadialGradient as RadialGradient
+from .elements.media import Rect as Rect
 from .elements.media import Source as Source
+from .elements.media import Stop as Stop
 from .elements.media import Svg as Svg
+from .elements.media import Text as Text
 from .elements.media import Track as Track
 from .elements.media import Video as Video
 from .elements.media import area as area
 from .elements.media import audio as audio
+from .elements.media import circle as circle
+from .elements.media import defs as defs
+from .elements.media import ellipse as ellipse
 from .elements.media import embed as embed
 from .elements.media import iframe as iframe
 from .elements.media import image as image
 from .elements.media import img as img
+from .elements.media import line as line
+from .elements.media import linear_gradient as linear_gradient
 from .elements.media import map as map
 from .elements.media import object as object
+from .elements.media import path as path
 from .elements.media import picture as picture
+from .elements.media import polygon as polygon
 from .elements.media import portal as portal
+from .elements.media import radial_gradient as radial_gradient
+from .elements.media import rect as rect
 from .elements.media import source as source
+from .elements.media import stop as stop
 from .elements.media import svg as svg
+from .elements.media import text as text
 from .elements.media import track as track
 from .elements.media import video as video
 from .elements.metadata import Base as Base

reflex/components/el/elements/__init__.py

@@ -66,6 +66,17 @@
         "portal",
         "source",
         "svg",
+        "text",
+        "line",
+        "circle",
+        "ellipse",
+        "rect",
+        "polygon",
+        "path",
+        "stop",
+        "linear_gradient",
+        "radial_gradient",
+        "defs",
     ],
     "metadata": [
         "base",
@@ -128,7 +139,15 @@
 
 EXCLUDE = ["del_", "Del", "image"]
 for v in _MAPPING.values():
-    v.extend([mod.capitalize() for mod in v if mod not in EXCLUDE])
+    from reflex.utils.format import to_camel_case
+
+    v.extend(
+        [
+            to_camel_case(mod)[0].upper() + to_camel_case(mod)[1:]
+            for mod in v
+            if mod not in EXCLUDE
+        ]
+    )
 
 _SUBMOD_ATTRS: dict[str, list[str]] = _MAPPING
 

reflex/components/el/elements/__init__.pyi

@@ -89,29 +89,51 @@ from .inline import u as u
 from .inline import wbr as wbr
 from .media import Area as Area
 from .media import Audio as Audio
+from .media import Circle as Circle
+from .media import Defs as Defs
+from .media import Ellipse as Ellipse
 from .media import Embed as Embed
 from .media import Iframe as Iframe
 from .media import Img as Img
+from .media import Line as Line
+from .media import LinearGradient as LinearGradient
 from .media import Map as Map
 from .media import Object as Object
+from .media import Path as Path
 from .media import Picture as Picture
+from .media import Polygon as Polygon
 from .media import Portal as Portal
+from .media import RadialGradient as RadialGradient
+from .media import Rect as Rect
 from .media import Source as Source
+from .media import Stop as Stop
 from .media import Svg as Svg
+from .media import Text as Text
 from .media import Track as Track
 from .media import Video as Video
 from .media import area as area
 from .media import audio as audio
+from .media import circle as circle
+from .media import defs as defs
+from .media import ellipse as ellipse
 from .media import embed as embed
 from .media import iframe as iframe
 from .media import image as image
 from .media import img as img
+from .media import line as line
+from .media import linear_gradient as linear_gradient
 from .media import map as map
 from .media import object as object
+from .media import path as path
 from .media import picture as picture
+from .media import polygon as polygon
 from .media import portal as portal
+from .media import radial_gradient as radial_gradient
+from .media import rect as rect
 from .media import source as source
+from .media import stop as stop
 from .media import svg as svg
+from .media import text as text
 from .media import track as track
 from .media import video as video
 from .metadata import Base as Base
@@ -287,6 +309,17 @@ _MAPPING = {
         "portal",
         "source",
         "svg",
+        "text",
+        "line",
+        "circle",
+        "ellipse",
+        "rect",
+        "polygon",
+        "path",
+        "stop",
+        "linear_gradient",
+        "radial_gradient",
+        "defs",
     ],
     "metadata": ["base", "head", "link", "meta", "title", "style"],
     "other": ["details", "dialog", "summary", "slot", "template", "math", "html"],
@@ -340,4 +373,12 @@ _MAPPING = {
 }
 EXCLUDE = ["del_", "Del", "image"]
 for v in _MAPPING.values():
-    v.extend([mod.capitalize() for mod in v if mod not in EXCLUDE])
+    from reflex.utils.format import to_camel_case
+
+    v.extend(
+        [
+            to_camel_case(mod)[0].upper() + to_camel_case(mod)[1:]
+            for mod in v
+            if mod not in EXCLUDE
+        ]
+    )

reflex/components/el/elements/media.py

@@ -501,6 +501,17 @@ class SVG(ComponentNamespace):
     __call__ = staticmethod(Svg.create)
 
 
+text = Text.create
+line = Line.create
+circle = Circle.create
+ellipse = Ellipse.create
+rect = Rect.create
+polygon = Polygon.create
+path = Path.create
+stop = Stop.create
+linear_gradient = LinearGradient.create
+radial_gradient = RadialGradient.create
+defs = Defs.create
 area = Area.create
 audio = Audio.create
 image = img = Img.create

reflex/components/el/elements/media.pyi

@@ -6345,6 +6345,17 @@ class SVG(ComponentNamespace):
         """
         ...
 
+text = Text.create
+line = Line.create
+circle = Circle.create
+ellipse = Ellipse.create
+rect = Rect.create
+polygon = Polygon.create
+path = Path.create
+stop = Stop.create
+linear_gradient = LinearGradient.create
+radial_gradient = RadialGradient.create
+defs = Defs.create
 area = Area.create
 audio = Audio.create
 image = img = Img.create