Merge pull request #2 from python-ellar/svg_components

Extra SVG Component

Author: eadwinCode

README.md

@@ -9,6 +9,11 @@ Although there are Jinja and Mako in this space, I don't intend to make this lib
 
 **This is just an experiment.**
 
+## Installation
+```shell
+pip install py-htmlbuilder
+```
+
 ## Quick Bootstrap Example
 
 ```python
@@ -37,7 +42,24 @@ def template():
             el.header(
                 class_name="pb-3 mb-4 border-bottom",
                 *(
-                    el.a(href="/", class_name="d-flex align-items-center text-dark text-decoration-none"),
+                    el.a(href="/", class_name="d-flex align-items-center text-dark text-decoration-none", *(
+                        el.svg(width=40, height=32, class_name="me-2", viewBox="0 0 118 94", *(
+                            el.path(fill_rule="evenodd", clip_rule="evenodd", fill="currentColor", d=(
+                               """
+                               M24.509 0c-6.733 0-11.715 5.893-11.492 12.284.214 6.14-.064 14.092-2.066 20.577C8.943 
+                               39.365 5.547 43.485 0 44.014v5.972c5.547.529 8.943 4.649 10.951 11.153 2.002 6.485 2.28 
+                               14.437 2.066 20.577C12.794 88.106 17.776 94 24.51 94H93.5c6.733 0 11.714-5.893 
+                               11.491-12.284-.214-6.14.064-14.092 2.066-20.577 2.009-6.504 5.396-10.624 
+                               10.943-11.153v-5.972c-5.547-.529-8.934-4.649-10.943-11.153-2.002-6.484-2.28-14.437-2.066-20.577C105.214 
+                               5.894 100.233 0 93.5 0H24.508zM80 57.863C80 66.663 73.436 72 62.543 72H44a2 
+                               2 0 01-2-2V24a2 2 0 012-2h18.437c9.083 0 15.044 4.92 15.044 12.474 0 5.302-4.01 
+                               10.049-9.119 10.88v.277C75.317 46.394 80 51.21 80 57.863zM60.521 28.34H49.948v14.934h8.905c6.884 
+                               0 10.68-2.772 10.68-7.727 0-4.643-3.264-7.207-9.012-7.207zM49.948 49.2v16.458H60.91c7.167 
+                               0 10.964-2.876 10.964-8.281 0-5.406-3.903-8.178-11.425-8.178H49.948z
+                               """ 
+                            )),
+                        )),
+                    )),
                     el.span("Jumbotron example", class_name="fs-4")
                 )
             ),

py_html/__init__.py

@@ -1,3 +1,3 @@
-"""PyHTML is HTML in python objects"""
+"""PyHTMLBuilder is HTML in python objects"""
 
-__version__ = "0.1.0"
+__version__ = "0.1.1"

py_html/el/__init__.py

@@ -183,6 +183,15 @@
 from .elements.images import (
     Canvas as canvas,
 )
+from .elements.images import (
+    Circle as circle,
+)
+from .elements.images import (
+    Defs as defs,
+)
+from .elements.images import (
+    Ellipse as ellipse,
+)
 from .elements.images import (
     FigCaption as figcaption,
 )
@@ -192,15 +201,33 @@
 from .elements.images import (
     Image as img,
 )
+from .elements.images import (
+    LinearGradient as linearGradient,
+)
 from .elements.images import (
     Map as map,
 )
+from .elements.images import (
+    Path as path,
+)
 from .elements.images import (
     Picture as picture,
 )
+from .elements.images import (
+    Polygon as polygon,
+)
+from .elements.images import (
+    Rect as rect,
+)
+from .elements.images import (
+    Stop as stop,
+)
 from .elements.images import (
     Svg as svg,
 )
+from .elements.images import (
+    Text as text,
+)
 from .elements.images import (
     Use as use,
 )
@@ -433,6 +460,15 @@
     "video",
     "track",
     "source",
+    "circle",
+    "rect",
+    "polygon",
+    "defs",
+    "linearGradient",
+    "stop",
+    "ellipse",
+    "text",
+    "path",
     "BaseElement",
     "BaseHTML",
     "Element",

py_html/el/elements/images.py

@@ -1,6 +1,6 @@
 import typing as t
 
-from py_html.el.base import BaseHTML
+from py_html.el.base import BaseElement, BaseHTML
 
 
 class Image(BaseHTML):
@@ -164,11 +164,17 @@ def __init__(
         self,
         height: t.Optional[t.Any] = None,
         width: t.Optional[t.Any] = None,
+        xmlns: str = "http://www.w3.org/2000/svg",
+        viewBox: t.Optional[str] = None,
+        role: str = "img",
         **attrs,
     ) -> None:
         super().__init__(
             height=height,
             width=width,
+            xmlns=xmlns,
+            role=role,
+            viewBox=viewBox,
             **attrs,
         )
 
@@ -200,3 +206,172 @@ def __init__(
 
     def render_tag(self, attrs: str, inner_html: str) -> str:
         return f"<{self.tag} {attrs}/>"
+
+
+class Circle(BaseElement):
+    tag = "circle"
+
+    def __init__(
+        self,
+        *content: t.Any,
+        cx: t.Optional[int] = None,
+        cy: t.Optional[int] = None,
+        r: t.Optional[int] = None,
+        stroke: t.Optional[str] = None,
+        stroke_width: t.Optional[str] = None,
+        fill: t.Optional[str] = None,
+        **attrs,
+    ):
+        super().__init__(
+            *content,
+            cx=cx,
+            cy=cy,
+            r=r,
+            stroke=stroke,
+            stroke_width=stroke_width,
+            fill=fill,
+            **attrs,
+        )
+
+
+class Rect(BaseElement):
+    tag = "rect"
+
+    def __init__(
+        self,
+        *content: t.Any,
+        x: t.Optional[int] = None,
+        y: t.Optional[int] = None,
+        width: t.Optional[int] = None,
+        height: t.Optional[int] = None,
+        stroke: t.Optional[str] = None,
+        stroke_width: t.Optional[str] = None,
+        fill: t.Optional[str] = None,
+        **attrs,
+    ):
+        super().__init__(
+            *content,
+            x=x,
+            y=y,
+            width=width,
+            height=height,
+            stroke=stroke,
+            stroke_width=stroke_width,
+            fill=fill,
+            **attrs,
+        )
+
+
+class Polygon(BaseElement):
+    tag = "polygon"
+
+    def __init__(
+        self,
+        *content: t.Any,
+        points: t.Optional[str] = None,
+        stroke: t.Optional[str] = None,
+        stroke_width: t.Optional[str] = None,
+        fill: t.Optional[str] = None,
+        **attrs,
+    ):
+        super().__init__(
+            *content,
+            points=points,
+            stroke=stroke,
+            stroke_width=stroke_width,
+            fill=fill,
+            **attrs,
+        )
+
+
+class Defs(BaseElement):
+    tag = "defs"
+
+
+class LinearGradient(BaseElement):
+    tag = "linearGradient"
+
+
+class Stop(BaseElement):
+    tag = "stop"
+
+    def __init__(self, *content: t.Any, stop_color: t.Optional[str] = None, **attrs):
+        super().__init__(*content, stop_color=stop_color, **attrs)
+
+
+class Ellipse(BaseElement):
+    tag = "ellipse"
+
+    def __init__(
+        self,
+        *content: t.Any,
+        cx: t.Optional[int] = None,
+        cy: t.Optional[int] = None,
+        r: t.Optional[int] = None,
+        rx: t.Optional[int] = None,
+        ry: t.Optional[int] = None,
+        stroke: t.Optional[str] = None,
+        stroke_width: t.Optional[str] = None,
+        fill: t.Optional[str] = None,
+        **attrs,
+    ):
+        super().__init__(
+            *content,
+            cx=cx,
+            cy=cy,
+            r=r,
+            rx=rx,
+            ry=ry,
+            stroke=stroke,
+            stroke_width=stroke_width,
+            fill=fill,
+            **attrs,
+        )
+
+
+class Text(BaseElement):
+    tag = "text"
+
+    def __init__(
+        self,
+        *content: t.Any,
+        font_size: t.Optional[int] = None,
+        font_family: t.Optional[str] = None,
+        x: t.Optional[str] = None,
+        y: t.Optional[str] = None,
+        fill: t.Optional[str] = None,
+        **attrs,
+    ):
+        super().__init__(
+            *content,
+            font_size=font_size,
+            font_family=font_family,
+            x=x,
+            y=y,
+            fill=fill,
+            **attrs,
+        )
+
+
+class Path(BaseElement):
+    tag = "path"
+
+    def __init__(
+        self,
+        *content: t.Any,
+        d: t.Optional[str] = None,
+        fill_rule: t.Optional[str] = None,
+        clip_rule: t.Optional[str] = None,
+        stroke: t.Optional[str] = None,
+        fill: t.Optional[str] = None,
+        **attrs,
+    ):
+        super().__init__(
+            *content,
+            d=d,
+            fill_rule=fill_rule,
+            clip_rule=clip_rule,
+            stroke=stroke,
+            fill=fill,
+            **attrs,
+        )