Implemented all suggestions

Author: javiereguiluz

cookbook/profiler/data_collector.rst

@@ -114,19 +114,23 @@ web debug toolbar and in the web profiler. To do so, you need to create a Twig
 template that includes some specific blocks.
 
 In the simplest case, you just want to display the information in the toolbar
-without providing a profiler panel:
+without providing a profiler panel. This requires to define the ``toolbar``
+block and set the value of two variables called ``icon`` and ``text``:
 
 .. code-block:: jinja
 
     {% extends '@WebProfiler/Profiler/layout.html.twig' %}
 
     {% block toolbar %}
         {% set icon %}
+            {# this is the content displayed as a panel in the toolbar #}
             <span class="icon"><img src="..." alt=""/></span>
             <span class="sf-toolbar-status">Information</span>
         {% endset %}
 
         {% set text %}
+            {# this is the content displayed when hovering the mouse over
+               the toolbar panel #}
             <div class="sf-toolbar-info-piece">
                 <b>Quick piece of data</b>
                 <span>100 units</span>
@@ -137,16 +141,11 @@ without providing a profiler panel:
             </div>
         {% endset %}
 
-        {# the 'link' value set to 'false' means that this panel doesn't show
-           a section in the web profiler. #}
+        {# the 'link' value set to 'false' means that this panel doesn't
+           show a section in the web profiler. #}
         {{ include('@WebProfiler/Profiler/toolbar_item.html.twig', { link: false }) }}
     {% endblock %}
 
-The ``toolbar`` block is used to create a panel in the web debug toolbar. The
-inner ``icon`` block defines the content to display right inside the toolbar
-and the ``text`` block defines the content displayed when hovering the mouse
-over that same panel.
-
 .. tip::
 
     Built-in collector templates define all their images as embedded base64-encoded
@@ -157,7 +156,15 @@ over that same panel.
 
         <img src="data:image/png;base64,..." />
 
-    You are encouraged to use this same technique for your own toolbar panels.
+    Another solution is to define the images as SVG files. In addition to being
+    resolution-independent, these images can be easily embedded in the Twig
+    template or included from an external file to reuse them in several templates:
+
+    .. code-block:: jinja
+
+        {{ include('@WebProfiler/Icon/my_collector.svg') }}
+
+    You are encouraged to use the latter technique for your own toolbar panels.
 
 If the toolbar panel includes extended web profiler information, the Twig template
 must also define other blocks:
@@ -179,12 +186,14 @@ must also define other blocks:
         {% endset %}
 
         {# the 'link' value is now set to 'true', which allows the user to click
-           on it to access to the web profiler panel. #}
+           on it to access to the web profiler panel. Since 'true' is the default
+           value, you can omit the 'link' parameter entirely #}
         {{ include('@WebProfiler/Profiler/toolbar_item.html.twig', { link: true }) }}
     {% endblock %}
 
     {% block head %}
         {# Optional, here you can link to or define your own CSS and JS contents #}
+        {# Use {{ parent() }} to keep the default styles #}
     {% endblock %}
 
     {% block menu %}