From 0b94f2fcb448e5442509f49d4055ed95a2fb44fc Mon Sep 17 00:00:00 2001
From: Emmanuelle Delescolle <emma@levit.be>
Date: Wed, 3 Jul 2024 16:08:22 +0200
Subject: [PATCH] :book: documentation for named components

---
 docs/docs/using-components.md | 22 ++++++++++++++++++++++
 1 file changed, 22 insertions(+)

diff --git a/docs/docs/using-components.md b/docs/docs/using-components.md
index 7249c61..d31459f 100644
--- a/docs/docs/using-components.md
+++ b/docs/docs/using-components.md
@@ -38,6 +38,28 @@ The inline syntax just uses the plain component name. No `#` or `/`.
 <button><svg>...</svg></button>
 ```
 
+## Named component syntax
+
+Components can also be accessed using their name as a string or variable.
+
+For inline coponents, you may use
+
+```twig
+{% inline-component "icon_button" icon="heart" %}
+{% inline-component var_containing_component_name %}
+```
+
+And similarly for block components
+
+```twig
+{% component "icon_button" icon="star" %}
+  Hello
+{% endcomponent %}
+{% component var_containing_component_name icon="heart" %}
+  World
+{% endcomponent %}
+```
+
 ## Component context
 
 Unlike the `include` tag, component template tags **do not** pass the current context to the child component. Variables need to be passed in explicitly.