Add svg package and a few helpers (#67)

Introducing SVG, to inline vector graphics in your HTML! 🥳

4 files changed, 101 insertions, 0 deletions

diff --git a/svg/attributes.go b/svg/attributes.go
new file mode 100644
index 0000000..10b7c69
--- /dev/null
+++ b/svg/attributes.go
@@ -0,0 +1,29 @@
+package svg
+
+import (
+	g "github.com/maragudk/gomponents"
+)
+
+func ClipRule(v string) g.Node {
+	return g.Attr("clip-rule", v)
+}
+
+func D(v string) g.Node {
+	return g.Attr("d", v)
+}
+
+func Fill(v string) g.Node {
+	return g.Attr("fill", v)
+}
+
+func FillRule(v string) g.Node {
+	return g.Attr("fill-rule", v)
+}
+
+func Stroke(v string) g.Node {
+	return g.Attr("stroke", v)
+}
+
+func ViewBox(v string) g.Node {
+	return g.Attr("viewBox", v)
+}
diff --git a/svg/attributes_test.go b/svg/attributes_test.go
new file mode 100644
index 0000000..41935e8
--- /dev/null
+++ b/svg/attributes_test.go
@@ -0,0 +1,28 @@
+package svg_test
+
+import (
+	"fmt"
+	"testing"
+
+	g "github.com/maragudk/gomponents"
+	"github.com/maragudk/gomponents/assert"
+	. "github.com/maragudk/gomponents/svg"
+)
+
+func TestSimpleAttributes(t *testing.T) {
+	cases := map[string]func(string) g.Node{
+		"clip-rule": ClipRule,
+		"d":         D,
+		"fill":      Fill,
+		"fill-rule": FillRule,
+		"stroke":    Stroke,
+		"viewBox":   ViewBox,
+	}
+
+	for name, fn := range cases {
+		t.Run(fmt.Sprintf(`should output %v="hat"`, name), func(t *testing.T) {
+			n := g.El("element", fn("hat"))
+			assert.Equal(t, fmt.Sprintf(`<element %v="hat"></element>`, name), n)
+		})
+	}
+}
diff --git a/svg/elements.go b/svg/elements.go
new file mode 100644
index 0000000..98db644
--- /dev/null
+++ b/svg/elements.go
@@ -0,0 +1,15 @@
+// Package svg provides common SVG elements and attributes.
+// See https://developer.mozilla.org/en-US/docs/Web/SVG/Element for an overview.
+package svg
+
+import (
+	g "github.com/maragudk/gomponents"
+)
+
+func Path(children ...g.Node) g.Node {
+	return g.El("path", children...)
+}
+
+func SVG(children ...g.Node) g.Node {
+	return g.El("svg", g.Attr("xmlns", "http://www.w3.org/2000/svg"), g.Group(children))
+}
diff --git a/svg/elements_test.go b/svg/elements_test.go
new file mode 100644
index 0000000..1b5e9d8
--- /dev/null
+++ b/svg/elements_test.go
@@ -0,0 +1,29 @@
+package svg_test
+
+import (
+	"fmt"
+	"testing"
+
+	g "github.com/maragudk/gomponents"
+	"github.com/maragudk/gomponents/assert"
+	. "github.com/maragudk/gomponents/svg"
+)
+
+func TestSimpleElements(t *testing.T) {
+	cases := map[string]func(...g.Node) g.Node{
+		"path": Path,
+	}
+
+	for name, fn := range cases {
+		t.Run(fmt.Sprintf("should output %v", name), func(t *testing.T) {
+			n := fn(g.Attr("id", "hat"))
+			assert.Equal(t, fmt.Sprintf(`<%v id="hat"></%v>`, name, name), n)
+		})
+	}
+}
+
+func TestSVG(t *testing.T) {
+	t.Run("outputs svg element with xml namespace attribute", func(t *testing.T) {
+		assert.Equal(t, `<svg xmlns="http://www.w3.org/2000/svg"><path></path></svg>`, SVG(g.El("path")))
+	})
+}