Centralize inline SVGs as Django template includes

.gitignore

@@ -5,6 +5,8 @@ dumper/*.json
 htmlcov/
 db.sql
 db.sqlite
+db.sqlite3
+.rodney/
 initial_data.json
 ve
 graph.*

CLAUDE.md

@@ -27,6 +27,27 @@ JS libs only when necessary
 - Follow Django naming: models in PascalCase, fields/methods in snake_case
 - Use `blank=True, default=""` for optional text fields
 
+## Icons
+All icons are Bootstrap Icons stored as Django template includes in `www/templates/icons/`.
+Use them with `{% include %}` — never write inline SVGs directly in templates.
+
+```html
+{% include "icons/bi-download.html" %}
+{% include "icons/bi-download.html" with size=20 %}
+{% include "icons/bi-star-fill.html" with class="text-warning hover-spin" %}
+{% include "icons/bi-exclamation-triangle-fill.html" with size=22 style="color: #ef4444;" %}
+{% include "icons/bi-check-circle.html" with fill="green" %}
+```
+
+Parameters (all optional):
+- `size` — width and height in px, default `16`
+- `class` — extra CSS classes appended after the base `bi bi-*` class
+- `style` — inline style string
+- `fill` — SVG fill value, default `currentColor` (inherits from text color)
+- `title` — accessible title attribute (used on `bi-patch-check-fill` for "Staff pick")
+
+To add a new icon, create `www/templates/icons/bi-<name>.html` following the same pattern as existing files.
+
 ## Text Tone & User-Facing Content
 The application uses a **friendly, informal, student-to-student tone** in all user-facing text:
 

catalog/templates/catalog/finder.html

@@ -44,11 +44,7 @@ <h5>
                     {% if forloop.last and not forloop.first %}
                         <div class="d-inline-flex d-md-none hover-scale">
                             <a href="../">
-                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
-                                     class="bi bi-arrow-left-circle-fill" viewBox="0 0 16 16">
-                                    <path
-                                        d="M8 0a8 8 0 1 0 0 16A8 8 0 0 0 8 0zm3.5 7.5a.5.5 0 0 1 0 1H5.707l2.147 2.146a.5.5 0 0 1-.708.708l-3-3a.5.5 0 0 1 0-.708l3-3a.5.5 0 1 1 .708.708L5.707 7.5H11.5z"/>
-                                </svg>
+                                {% include "icons/bi-arrow-left-circle-fill.html" %}
                             </a>
                         </div>
                     {% endif %}
@@ -60,13 +56,7 @@ <h5>
                         {% if type.grouper != "OTHE" %}
                             <li>
                                 <div class="d-flex align-items-center gap-1 fs-5 border-bottom">
-                                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
-                                         fill="currentColor" class="bi bi-mortarboard" viewBox="0 0 16 16">
-                                        <path
-                                            d="M8.211 2.047a.5.5 0 0 0-.422 0l-7.5 3.5a.5.5 0 0 0 .025.917l7.5 3a.5.5 0 0 0 .372 0L14 7.14V13a1 1 0 0 0-1 1v2h3v-2a1 1 0 0 0-1-1V6.739l.686-.275a.5.5 0 0 0 .025-.917l-7.5-3.5ZM8 8.46 1.758 5.965 8 3.052l6.242 2.913L8 8.46Z"/>
-                                        <path
-                                            d="M4.176 9.032a.5.5 0 0 0-.656.327l-.5 1.7a.5.5 0 0 0 .294.605l4.5 1.8a.5.5 0 0 0 .372 0l4.5-1.8a.5.5 0 0 0 .294-.605l-.5-1.7a.5.5 0 0 0-.656-.327L8 10.466 4.176 9.032Zm-.068 1.873.22-.748 3.496 1.311a.5.5 0 0 0 .352 0l3.496-1.311.22.748L8 12.46l-3.892-1.556Z"/>
-                                    </svg>
+                                    {% include "icons/bi-mortarboard.html" %}
                                     <div>{{ type.grouper }}{{ type.list|pluralize }}</div>
                                 </div>
                             </li>
@@ -93,12 +83,7 @@ <h5>
                                class="text-body text-decoration-none">
                                 <div class="d-flex align-items-center my-1 border-bottom">
                                     <div class="flex-shrink-0 px-2 py-1">
-                                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
-                                             fill="currentColor"
-                                             class="bi bi-folder" viewBox="0 0 16 16">
-                                            <path
-                                                d="M.54 3.87.5 3a2 2 0 0 1 2-2h3.672a2 2 0 0 1 1.414.586l.828.828A2 2 0 0 0 9.828 3h3.982a2 2 0 0 1 1.992 2.181l-.637 7A2 2 0 0 1 13.174 14H2.826a2 2 0 0 1-1.991-1.819l-.637-7a1.99 1.99 0 0 1 .342-1.31zM2.19 4a1 1 0 0 0-.996 1.09l.637 7a1 1 0 0 0 .995.91h10.348a1 1 0 0 0 .995-.91l.637-7A1 1 0 0 0 13.81 4H2.19zm4.69-1.707A1 1 0 0 0 6.172 2H2.5a1 1 0 0 0-1 .981l.006.139C1.72 3.042 1.95 3 2.19 3h5.396l-.707-.707z"/>
-                                        </svg>
+                                        {% include "icons/bi-folder.html" %}
                                     </div>
                                     <div class="flex-grow-1">
                                         <span class="hover-underline">{{ course.name }}</span>

documents/templates/documents/document_bulk.html

@@ -5,22 +5,11 @@
 {% block content %}
     <a href="{% url "catalog:course_show" course %}"
        class="text-reset text-decoration-none d-flex align-items-center gap-1">
-        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor"
-             class="bi bi-arrow-left hover-translate"
-             viewBox="0 0 16 16">
-            <path fill-rule="evenodd"
-                  d="M15 8a.5.5 0 0 0-.5-.5H2.707l3.147-3.146a.5.5 0 1 0-.708-.708l-4 4a.5.5 0 0 0 0 .708l4 4a.5.5 0 0 0 .708-.708L2.707 8.5H14.5A.5.5 0 0 0 15 8z"/>
-        </svg>
+        {% include "icons/bi-arrow-left.html" with size=20 class="hover-translate" %}
         <span class="hover-underline">{{ course.slug|upper }} {{ course.name }}</span>
     </a>
     <div class="alert alert-success mt-2 d-flex align-items-center gap-2" role="alert">
-        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-cloud-upload"
-             viewBox="0 0 16 16">
-            <path fill-rule="evenodd"
-                  d="M4.406 1.342A5.53 5.53 0 0 1 8 0c2.69 0 4.923 2 5.166 4.579C14.758 4.804 16 6.137 16 7.773 16 9.569 14.502 11 12.687 11H10a.5.5 0 0 1 0-1h2.688C13.979 10 15 8.988 15 7.773c0-1.216-1.02-2.228-2.313-2.228h-.5v-.5C12.188 2.825 10.328 1 8 1a4.53 4.53 0 0 0-2.941 1.1c-.757.652-1.153 1.438-1.153 2.055v.448l-.445.049C2.064 4.805 1 5.952 1 7.318 1 8.785 2.23 10 3.781 10H6a.5.5 0 0 1 0 1H3.781C1.708 11 0 9.366 0 7.318c0-1.763 1.266-3.223 2.942-3.593.143-.863.698-1.723 1.464-2.383z"/>
-            <path fill-rule="evenodd"
-                  d="M7.646 4.146a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1-.708.708L8.5 5.707V14.5a.5.5 0 0 1-1 0V5.707L5.354 7.854a.5.5 0 1 1-.708-.708l3-3z"/>
-        </svg>
+        {% include "icons/bi-cloud-upload.html" with size=20 %}
         <div>
             Merci ! Ton lien a bien été reçu par DocHub. Il se pourrait que les documents prennent plusieurs jours
             avant d'apparaitre sur le cours.<br/> Tu recevras un email une fois que c'est le cas !

documents/templates/documents/document_edit.html

@@ -43,12 +43,7 @@ <h5 class="card-header">Modération</h5>
                                 Cela signifie que l'équipe de modération de DocHub considère ce document comme
                                 étant d'une grande qualité et méritant d'être mis en avant.<br/>
                                 Il apparaitra dans la liste des documents avec cette icône :
-                                <svg title="Staff pick" xmlns="http://www.w3.org/2000/svg"
-                                     width="16" height="16" fill="currentColor"
-                                     class="bi bi-patch-check-fill" viewBox="0 0 16 16">
-                                    <path
-                                        d="M10.067.87a2.89 2.89 0 0 0-4.134 0l-.622.638-.89-.011a2.89 2.89 0 0 0-2.924 2.924l.01.89-.636.622a2.89 2.89 0 0 0 0 4.134l.637.622-.011.89a2.89 2.89 0 0 0 2.924 2.924l.89-.01.622.636a2.89 2.89 0 0 0 4.134 0l.622-.637.89.011a2.89 2.89 0 0 0 2.924-2.924l-.01-.89.636-.622a2.89 2.89 0 0 0 0-4.134l-.637-.622.011-.89a2.89 2.89 0 0 0-2.924-2.924l-.89.01-.622-.636zm.287 5.984-3 3a.5.5 0 0 1-.708 0l-1.5-1.5a.5.5 0 1 1 .708-.708L7 8.793l2.646-2.647a.5.5 0 0 1 .708.708z"/>
-                                </svg>
+                                {% include "icons/bi-patch-check-fill.html" with title="Staff pick" %}
                             </div>
                         </div>
                         <div class="mb-3">

documents/templates/documents/document_upload.html

@@ -32,12 +32,7 @@
     {% endif %}
     <a href="{% url "catalog:course_show" course %}"
        class="text-reset text-decoration-none d-flex align-items-center gap-1">
-        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor"
-             class="bi bi-arrow-left hover-translate"
-             viewBox="0 0 16 16">
-            <path fill-rule="evenodd"
-                  d="M15 8a.5.5 0 0 0-.5-.5H2.707l3.147-3.146a.5.5 0 1 0-.708-.708l-4 4a.5.5 0 0 0 0 .708l4 4a.5.5 0 0 0 .708-.708L2.707 8.5H14.5A.5.5 0 0 0 15 8z"/>
-        </svg>
+        {% include "icons/bi-arrow-left.html" with size=20 class="hover-translate" %}
         <span class="hover-underline">{{ course.slug|upper }} {{ course.name }}</span>
     </a>
     {% if course.is_archive %}
@@ -61,58 +56,18 @@
             doc(x), ppt(x), odt, et bien plus encore.
         </p>
         <p>
-            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="green"
-                 class="bi bi-check-circle" viewBox="0 0 16 16">
-                <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
-                <path
-                    d="M10.97 4.97a.235.235 0 0 0-.02.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-1.071-1.05z"/>
-            </svg>
-            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor"
-                 class="bi bi-file-earmark-pdf" viewBox="0 0 16 16">
-                <path
-                    d="M14 14V4.5L9.5 0H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2zM9.5 3A1.5 1.5 0 0 0 11 4.5h2V14a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h5.5v2z"/>
-                <path
-                    d="M4.603 14.087a.81.81 0 0 1-.438-.42c-.195-.388-.13-.776.08-1.102.198-.307.526-.568.897-.787a7.68 7.68 0 0 1 1.482-.645 19.697 19.697 0 0 0 1.062-2.227 7.269 7.269 0 0 1-.43-1.295c-.086-.4-.119-.796-.046-1.136.075-.354.274-.672.65-.823.192-.077.4-.12.602-.077a.7.7 0 0 1 .477.365c.088.164.12.356.127.538.007.188-.012.396-.047.614-.084.51-.27 1.134-.52 1.794a10.954 10.954 0 0 0 .98 1.686 5.753 5.753 0 0 1 1.334.05c.364.066.734.195.96.465.12.144.193.32.2.518.007.192-.047.382-.138.563a1.04 1.04 0 0 1-.354.416.856.856 0 0 1-.51.138c-.331-.014-.654-.196-.933-.417a5.712 5.712 0 0 1-.911-.95 11.651 11.651 0 0 0-1.997.406 11.307 11.307 0 0 1-1.02 1.51c-.292.35-.609.656-.927.787a.793.793 0 0 1-.58.029zm1.379-1.901c-.166.076-.32.156-.459.238-.328.194-.541.383-.647.547-.094.145-.096.25-.04.361.01.022.02.036.026.044a.266.266 0 0 0 .035-.012c.137-.056.355-.235.635-.572a8.18 8.18 0 0 0 .45-.606zm1.64-1.33a12.71 12.71 0 0 1 1.01-.193 11.744 11.744 0 0 1-.51-.858 20.801 20.801 0 0 1-.5 1.05zm2.446.45c.15.163.296.3.435.41.24.19.407.253.498.256a.107.107 0 0 0 .07-.015.307.307 0 0 0 .094-.125.436.436 0 0 0 .059-.2.095.095 0 0 0-.026-.063c-.052-.062-.2-.152-.518-.209a3.876 3.876 0 0 0-.612-.053zM8.078 7.8a6.7 6.7 0 0 0 .2-.828c.031-.188.043-.343.038-.465a.613.613 0 0 0-.032-.198.517.517 0 0 0-.145.04c-.087.035-.158.106-.196.283-.04.192-.03.469.046.822.024.111.054.227.09.346z"/>
-            </svg>
-            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor"
-                 class="bi bi-file-earmark-word" viewBox="0 0 16 16">
-                <path
-                    d="M5.485 6.879a.5.5 0 1 0-.97.242l1.5 6a.5.5 0 0 0 .967.01L8 9.402l1.018 3.73a.5.5 0 0 0 .967-.01l1.5-6a.5.5 0 0 0-.97-.242l-1.036 4.144-.997-3.655a.5.5 0 0 0-.964 0l-.997 3.655L5.485 6.88z"/>
-                <path
-                    d="M14 14V4.5L9.5 0H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2zM9.5 3A1.5 1.5 0 0 0 11 4.5h2V14a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h5.5v2z"/>
-            </svg>
-            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor"
-                 class="bi bi-file-earmark-richtext" viewBox="0 0 16 16">
-                <path
-                    d="M14 4.5V14a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2h5.5L14 4.5zm-3 0A1.5 1.5 0 0 1 9.5 3V1H4a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V4.5h-2z"/>
-                <path
-                    d="M4.5 12.5A.5.5 0 0 1 5 12h3a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5zm0-2A.5.5 0 0 1 5 10h6a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5zm1.639-3.708 1.33.886 1.854-1.855a.25.25 0 0 1 .289-.047l1.888.974V8.5a.5.5 0 0 1-.5.5H5a.5.5 0 0 1-.5-.5V8s1.54-1.274 1.639-1.208zM6.25 6a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5z"/>
-            </svg>
-            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor"
-                 class="bi bi-file-earmark-slides" viewBox="0 0 16 16">
-                <path
-                    d="M5 6a.5.5 0 0 0-.496.438l-.5 4A.5.5 0 0 0 4.5 11h3v2.016c-.863.055-1.5.251-1.5.484 0 .276.895.5 2 .5s2-.224 2-.5c0-.233-.637-.429-1.5-.484V11h3a.5.5 0 0 0 .496-.562l-.5-4A.5.5 0 0 0 11 6H5zm2 3.78V7.22c0-.096.106-.156.19-.106l2.13 1.279a.125.125 0 0 1 0 .214l-2.13 1.28A.125.125 0 0 1 7 9.778z"/>
-                <path
-                    d="M14 14V4.5L9.5 0H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2zM9.5 3A1.5 1.5 0 0 0 11 4.5h2V14a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h5.5v2z"/>
-            </svg>
-            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor"
-                 class="bi bi-file-earmark-image" viewBox="0 0 16 16">
-                <path d="M6.502 7a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3z"/>
-                <path
-                    d="M14 14a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2h5.5L14 4.5V14zM4 1a1 1 0 0 0-1 1v10l2.224-2.224a.5.5 0 0 1 .61-.075L8 11l2.157-3.02a.5.5 0 0 1 .76-.063L13 10V4.5h-2A1.5 1.5 0 0 1 9.5 3V1H4z"/>
-            </svg>
-            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor"
-                 class="bi bi-file-earmark-plus" viewBox="0 0 16 16">
-                <path
-                    d="M8 6.5a.5.5 0 0 1 .5.5v1.5H10a.5.5 0 0 1 0 1H8.5V11a.5.5 0 0 1-1 0V9.5H6a.5.5 0 0 1 0-1h1.5V7a.5.5 0 0 1 .5-.5z"/>
-                <path
-                    d="M14 4.5V14a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2h5.5L14 4.5zm-3 0A1.5 1.5 0 0 1 9.5 3V1H4a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V4.5h-2z"/>
-            </svg>
+            {% include "icons/bi-check-circle.html" with fill="green" %}
+            {% include "icons/bi-file-earmark-pdf.html" with size=20 %}
+            {% include "icons/bi-file-earmark-word.html" with size=20 %}
+            {% include "icons/bi-file-earmark-richtext.html" with size=20 %}
+            {% include "icons/bi-file-earmark-slides.html" with size=20 %}
+            {% include "icons/bi-file-earmark-image.html" with size=20 %}
+            {% include "icons/bi-file-earmark-plus.html" with size=20 %}
 
         </p>
         <p>
             <small class="text-muted ">
-                N'oublie pas que ce qui est uploadé sur DocHub est soumis au droit d’auteur,
+                N'oublie pas que ce qui est uploadé sur DocHub est soumis au droit d'auteur,
                 et que tu dois donc avoir l'autorisation de son auteur pour l'y ajouter sur DocHub.
             </small>
         </p>
@@ -141,13 +96,7 @@
                 <div
                     class="position-absolute top-0 start-0 d-flex flex-column align-items-center justify-content-center text-muted p-2"
                     style="width: 100%; height: 100%;">
-                    <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor"
-                         class="bi bi-cloud-arrow-up" viewBox="0 0 16 16">
-                        <path fill-rule="evenodd"
-                              d="M7.646 5.146a.5.5 0 0 1 .708 0l2 2a.5.5 0 0 1-.708.708L8.5 6.707V10.5a.5.5 0 0 1-1 0V6.707L6.354 7.854a.5.5 0 1 1-.708-.708l2-2z"/>
-                        <path
-                            d="M4.406 3.342A5.53 5.53 0 0 1 8 2c2.69 0 4.923 2 5.166 4.579C14.758 6.804 16 8.137 16 9.773 16 11.569 14.502 13 12.687 13H3.781C1.708 13 0 11.366 0 9.318c0-1.763 1.266-3.223 2.942-3.593.143-.863.698-1.723 1.464-2.383zm.653.757c-.757.653-1.153 1.44-1.153 2.056v.448l-.445.049C2.064 6.805 1 7.952 1 9.318 1 10.785 2.23 12 3.781 12h8.906C13.98 12 15 10.988 15 9.773c0-1.216-1.02-2.228-2.313-2.228h-.5v-.5C12.188 4.825 10.328 3 8 3a4.53 4.53 0 0 0-2.941 1.1z"/>
-                    </svg>
+                    {% include "icons/bi-cloud-arrow-up.html" with size=32 %}
                     <span class="text-center">Drag & drop ou clic pour ajouter un document</span>
                     <div>
                         <span data-upload-target="originalname"></span>
@@ -179,11 +128,7 @@
             </div>
 
             <button type="submit" class="btn btn-success d-flex align-items-center gap-1">
-                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-plus"
-                     viewBox="0 0 16 16">
-                    <path
-                        d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z"/>
-                </svg>
+                {% include "icons/bi-plus.html" with size=20 %}
                 Ajouter ce document à {{ course.slug|upper }}
             </button>
         </div>
@@ -198,23 +143,15 @@
 
         {% if bulk_form.url.errors %}
             <div class="alert alert-danger alert-dismissible fade show" role="alert">
-                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-exclamation-triangle-fill flex-shrink-0 me-2" viewBox="0 0 16 16">
-                    <path d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"/>
-                </svg>
+                {% include "icons/bi-exclamation-triangle-fill.html" with class="flex-shrink-0 me-2" %}
                 {{ bulk_form.url.errors.0 }}
                 <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
             </div>
         {% endif %}
 
         <div class="mb-3">
             <label for="url" class="form-label d-flex align-items-center gap-2">
-                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor"
-                     class="bi bi-file-earmark-zip" viewBox="0 0 16 16">
-                    <path
-                        d="M5 7.5a1 1 0 0 1 1-1h1a1 1 0 0 1 1 1v.938l.4 1.599a1 1 0 0 1-.416 1.074l-.93.62a1 1 0 0 1-1.11 0l-.929-.62a1 1 0 0 1-.415-1.074L5 8.438V7.5zm2 0H6v.938a1 1 0 0 1-.03.243l-.4 1.598.93.62.929-.62-.4-1.598A1 1 0 0 1 7 8.438V7.5z"/>
-                    <path
-                        d="M14 4.5V14a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2h5.5L14 4.5zm-3 0A1.5 1.5 0 0 1 9.5 3V1h-2v1h-1v1h1v1h-1v1h1v1H6V5H5V4h1V3H5V2h1V1H4a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V4.5h-2z"/>
-                </svg>
+                {% include "icons/bi-file-earmark-zip.html" with size=20 %}
                 <div>
                     Tu as beaucoup de documents à ajouter à la fois ? Par exemple un gros .zip sur WeTransfer ou une Dropbox ?<br/>
                     Rentre ici l'adresse à laquelle Dochub peut trouver tes fichiers et tout sera ajouté automatiquement !