@gouvfr/dsfr 1.5.0 → 1.5.1

package/example/utility/icons/icons-user/index.html

@@ -99,6 +99,8 @@
         <div class="fr-container fr-mt-2v fr-mb-8w">
             <a class="fr-link fr-icon-arrow-left-line fr-link--icon-left" href="../">Retour</a>
             <h1>Icônes User (icons-user)</h1>
+            <p>Les icônes fonctionnelles sont des symboles visuels qui accompagnent l’utilisateur dans ses actions et qui aident à sa compréhension de l’interface.</p>
+            <a href="https://gouvfr.atlassian.net/wiki/spaces/DB/pages/222331396/Ic+nes+-+Icons#User" target="_blank">Documentation</a>
         </div>
         <div class="fr-mb-12w">
             <div class="fr-container">
@@ -130,36 +132,6 @@
                                 </h3>
                                 <div class="fr-collapse" id="snippet-1780">
                                     <pre class=" language-html"><code>&lt;span class="fr-icon-account-circle-line" aria-hidden="true"&gt;&lt;/span&gt;
-</code></pre>
-                                </div>
-                            </section>
-                        </div>
-                        <h4>account-fill [remix]</h4>
-                        <div class="fr-mb-6v">
-                            <span class="fr-icon-account-fill " aria-hidden="true"></span>
-                        </div>
-                        <div class="fr-mb-12v">
-                            <section class="fr-accordion">
-                                <h3 class="fr-accordion__title">
-                                    <button class="fr-accordion__btn" aria-expanded="false" aria-controls="snippet-1781">Extrait de code</button>
-                                </h3>
-                                <div class="fr-collapse" id="snippet-1781">
-                                    <pre class=" language-html"><code>&lt;span class="fr-icon-account-fill" aria-hidden="true"&gt;&lt;/span&gt;
-</code></pre>
-                                </div>
-                            </section>
-                        </div>
-                        <h4>account-line [remix]</h4>
-                        <div class="fr-mb-6v">
-                            <span class="fr-icon-account-line " aria-hidden="true"></span>
-                        </div>
-                        <div class="fr-mb-12v">
-                            <section class="fr-accordion">
-                                <h3 class="fr-accordion__title">
-                                    <button class="fr-accordion__btn" aria-expanded="false" aria-controls="snippet-1782">Extrait de code</button>
-                                </h3>
-                                <div class="fr-collapse" id="snippet-1782">
-                                    <pre class=" language-html"><code>&lt;span class="fr-icon-account-line" aria-hidden="true"&gt;&lt;/span&gt;
 </code></pre>
                                 </div>
                             </section>
@@ -171,9 +143,9 @@
                         <div class="fr-mb-12v">
                             <section class="fr-accordion">
                                 <h3 class="fr-accordion__title">
-                                    <button class="fr-accordion__btn" aria-expanded="false" aria-controls="snippet-1783">Extrait de code</button>
+                                    <button class="fr-accordion__btn" aria-expanded="false" aria-controls="snippet-1781">Extrait de code</button>
                                 </h3>
-                                <div class="fr-collapse" id="snippet-1783">
+                                <div class="fr-collapse" id="snippet-1781">
                                     <pre class=" language-html"><code>&lt;span class="fr-icon-account-pin-circle-fill" aria-hidden="true"&gt;&lt;/span&gt;
 </code></pre>
                                 </div>
@@ -186,9 +158,9 @@
                         <div class="fr-mb-12v">
                             <section class="fr-accordion">
                                 <h3 class="fr-accordion__title">
-                                    <button class="fr-accordion__btn" aria-expanded="false" aria-controls="snippet-1784">Extrait de code</button>
+                                    <button class="fr-accordion__btn" aria-expanded="false" aria-controls="snippet-1782">Extrait de code</button>
                                 </h3>
-                                <div class="fr-collapse" id="snippet-1784">
+                                <div class="fr-collapse" id="snippet-1782">
                                     <pre class=" language-html"><code>&lt;span class="fr-icon-account-pin-circle-line" aria-hidden="true"&gt;&lt;/span&gt;
 </code></pre>
                                 </div>
@@ -201,9 +173,9 @@
                         <div class="fr-mb-12v">
                             <section class="fr-accordion">
                                 <h3 class="fr-accordion__title">
-                                    <button class="fr-accordion__btn" aria-expanded="false" aria-controls="snippet-1785">Extrait de code</button>
+                                    <button class="fr-accordion__btn" aria-expanded="false" aria-controls="snippet-1783">Extrait de code</button>
                                 </h3>
-                                <div class="fr-collapse" id="snippet-1785">
+                                <div class="fr-collapse" id="snippet-1783">
                                     <pre class=" language-html"><code>&lt;span class="fr-icon-admin-fill" aria-hidden="true"&gt;&lt;/span&gt;
 </code></pre>
                                 </div>
@@ -216,9 +188,9 @@
                         <div class="fr-mb-12v">
                             <section class="fr-accordion">
                                 <h3 class="fr-accordion__title">
-                                    <button class="fr-accordion__btn" aria-expanded="false" aria-controls="snippet-1786">Extrait de code</button>
+                                    <button class="fr-accordion__btn" aria-expanded="false" aria-controls="snippet-1784">Extrait de code</button>
                                 </h3>
-                                <div class="fr-collapse" id="snippet-1786">
+                                <div class="fr-collapse" id="snippet-1784">
                                     <pre class=" language-html"><code>&lt;span class="fr-icon-admin-line" aria-hidden="true"&gt;&lt;/span&gt;
 </code></pre>
                                 </div>
@@ -231,9 +203,9 @@
                         <div class="fr-mb-12v">
                             <section class="fr-accordion">
                                 <h3 class="fr-accordion__title">
-                                    <button class="fr-accordion__btn" aria-expanded="false" aria-controls="snippet-1787">Extrait de code</button>
+                                    <button class="fr-accordion__btn" aria-expanded="false" aria-controls="snippet-1785">Extrait de code</button>
                                 </h3>
-                                <div class="fr-collapse" id="snippet-1787">
+                                <div class="fr-collapse" id="snippet-1785">
                                     <pre class=" language-html"><code>&lt;span class="fr-icon-group-fill" aria-hidden="true"&gt;&lt;/span&gt;
 </code></pre>
                                 </div>
@@ -246,9 +218,9 @@
                         <div class="fr-mb-12v">
                             <section class="fr-accordion">
                                 <h3 class="fr-accordion__title">
-                                    <button class="fr-accordion__btn" aria-expanded="false" aria-controls="snippet-1788">Extrait de code</button>
+                                    <button class="fr-accordion__btn" aria-expanded="false" aria-controls="snippet-1786">Extrait de code</button>
                                 </h3>
-                                <div class="fr-collapse" id="snippet-1788">
+                                <div class="fr-collapse" id="snippet-1786">
                                     <pre class=" language-html"><code>&lt;span class="fr-icon-group-line" aria-hidden="true"&gt;&lt;/span&gt;
 </code></pre>
                                 </div>
@@ -261,9 +233,9 @@
                         <div class="fr-mb-12v">
                             <section class="fr-accordion">
                                 <h3 class="fr-accordion__title">
-                                    <button class="fr-accordion__btn" aria-expanded="false" aria-controls="snippet-1789">Extrait de code</button>
+                                    <button class="fr-accordion__btn" aria-expanded="false" aria-controls="snippet-1787">Extrait de code</button>
                                 </h3>
-                                <div class="fr-collapse" id="snippet-1789">
+                                <div class="fr-collapse" id="snippet-1787">
                                     <pre class=" language-html"><code>&lt;span class="fr-icon-parent-fill" aria-hidden="true"&gt;&lt;/span&gt;
 </code></pre>
                                 </div>
@@ -276,9 +248,9 @@
                         <div class="fr-mb-12v">
                             <section class="fr-accordion">
                                 <h3 class="fr-accordion__title">
-                                    <button class="fr-accordion__btn" aria-expanded="false" aria-controls="snippet-1790">Extrait de code</button>
+                                    <button class="fr-accordion__btn" aria-expanded="false" aria-controls="snippet-1788">Extrait de code</button>
                                 </h3>
-                                <div class="fr-collapse" id="snippet-1790">
+                                <div class="fr-collapse" id="snippet-1788">
                                     <pre class=" language-html"><code>&lt;span class="fr-icon-parent-line" aria-hidden="true"&gt;&lt;/span&gt;
 </code></pre>
                                 </div>
@@ -291,9 +263,9 @@
                         <div class="fr-mb-12v">
                             <section class="fr-accordion">
                                 <h3 class="fr-accordion__title">
-                                    <button class="fr-accordion__btn" aria-expanded="false" aria-controls="snippet-1791">Extrait de code</button>
+                                    <button class="fr-accordion__btn" aria-expanded="false" aria-controls="snippet-1789">Extrait de code</button>
                                 </h3>
-                                <div class="fr-collapse" id="snippet-1791">
+                                <div class="fr-collapse" id="snippet-1789">
                                     <pre class=" language-html"><code>&lt;span class="fr-icon-team-fill" aria-hidden="true"&gt;&lt;/span&gt;
 </code></pre>
                                 </div>
@@ -306,9 +278,9 @@
                         <div class="fr-mb-12v">
                             <section class="fr-accordion">
                                 <h3 class="fr-accordion__title">
-                                    <button class="fr-accordion__btn" aria-expanded="false" aria-controls="snippet-1792">Extrait de code</button>
+                                    <button class="fr-accordion__btn" aria-expanded="false" aria-controls="snippet-1790">Extrait de code</button>
                                 </h3>
-                                <div class="fr-collapse" id="snippet-1792">
+                                <div class="fr-collapse" id="snippet-1790">
                                     <pre class=" language-html"><code>&lt;span class="fr-icon-team-line" aria-hidden="true"&gt;&lt;/span&gt;
 </code></pre>
                                 </div>
@@ -321,9 +293,9 @@
                         <div class="fr-mb-12v">
                             <section class="fr-accordion">
                                 <h3 class="fr-accordion__title">
-                                    <button class="fr-accordion__btn" aria-expanded="false" aria-controls="snippet-1793">Extrait de code</button>
+                                    <button class="fr-accordion__btn" aria-expanded="false" aria-controls="snippet-1791">Extrait de code</button>
                                 </h3>
-                                <div class="fr-collapse" id="snippet-1793">
+                                <div class="fr-collapse" id="snippet-1791">
                                     <pre class=" language-html"><code>&lt;span class="fr-icon-user-add-fill" aria-hidden="true"&gt;&lt;/span&gt;
 </code></pre>
                                 </div>
@@ -336,9 +308,9 @@
                         <div class="fr-mb-12v">
                             <section class="fr-accordion">
                                 <h3 class="fr-accordion__title">
-                                    <button class="fr-accordion__btn" aria-expanded="false" aria-controls="snippet-1794">Extrait de code</button>
+                                    <button class="fr-accordion__btn" aria-expanded="false" aria-controls="snippet-1792">Extrait de code</button>
                                 </h3>
-                                <div class="fr-collapse" id="snippet-1794">
+                                <div class="fr-collapse" id="snippet-1792">
                                     <pre class=" language-html"><code>&lt;span class="fr-icon-user-add-line" aria-hidden="true"&gt;&lt;/span&gt;
 </code></pre>
                                 </div>
@@ -351,9 +323,9 @@
                         <div class="fr-mb-12v">
                             <section class="fr-accordion">
                                 <h3 class="fr-accordion__title">
-                                    <button class="fr-accordion__btn" aria-expanded="false" aria-controls="snippet-1795">Extrait de code</button>
+                                    <button class="fr-accordion__btn" aria-expanded="false" aria-controls="snippet-1793">Extrait de code</button>
                                 </h3>
-                                <div class="fr-collapse" id="snippet-1795">
+                                <div class="fr-collapse" id="snippet-1793">
                                     <pre class=" language-html"><code>&lt;span class="fr-icon-user-fill" aria-hidden="true"&gt;&lt;/span&gt;
 </code></pre>
                                 </div>
@@ -366,9 +338,9 @@
                         <div class="fr-mb-12v">
                             <section class="fr-accordion">
                                 <h3 class="fr-accordion__title">
-                                    <button class="fr-accordion__btn" aria-expanded="false" aria-controls="snippet-1796">Extrait de code</button>
+                                    <button class="fr-accordion__btn" aria-expanded="false" aria-controls="snippet-1794">Extrait de code</button>
                                 </h3>
-                                <div class="fr-collapse" id="snippet-1796">
+                                <div class="fr-collapse" id="snippet-1794">
                                     <pre class=" language-html"><code>&lt;span class="fr-icon-user-heart-fill" aria-hidden="true"&gt;&lt;/span&gt;
 </code></pre>
                                 </div>
@@ -381,9 +353,9 @@
                         <div class="fr-mb-12v">
                             <section class="fr-accordion">
                                 <h3 class="fr-accordion__title">
-                                    <button class="fr-accordion__btn" aria-expanded="false" aria-controls="snippet-1797">Extrait de code</button>
+                                    <button class="fr-accordion__btn" aria-expanded="false" aria-controls="snippet-1795">Extrait de code</button>
                                 </h3>
-                                <div class="fr-collapse" id="snippet-1797">
+                                <div class="fr-collapse" id="snippet-1795">
                                     <pre class=" language-html"><code>&lt;span class="fr-icon-user-heart-line" aria-hidden="true"&gt;&lt;/span&gt;
 </code></pre>
                                 </div>
@@ -396,9 +368,9 @@
                         <div class="fr-mb-12v">
                             <section class="fr-accordion">
                                 <h3 class="fr-accordion__title">
-                                    <button class="fr-accordion__btn" aria-expanded="false" aria-controls="snippet-1798">Extrait de code</button>
+                                    <button class="fr-accordion__btn" aria-expanded="false" aria-controls="snippet-1796">Extrait de code</button>
                                 </h3>
-                                <div class="fr-collapse" id="snippet-1798">
+                                <div class="fr-collapse" id="snippet-1796">
                                     <pre class=" language-html"><code>&lt;span class="fr-icon-user-line" aria-hidden="true"&gt;&lt;/span&gt;
 </code></pre>
                                 </div>
@@ -411,9 +383,9 @@
                         <div class="fr-mb-12v">
                             <section class="fr-accordion">
                                 <h3 class="fr-accordion__title">
-                                    <button class="fr-accordion__btn" aria-expanded="false" aria-controls="snippet-1799">Extrait de code</button>
+                                    <button class="fr-accordion__btn" aria-expanded="false" aria-controls="snippet-1797">Extrait de code</button>
                                 </h3>
-                                <div class="fr-collapse" id="snippet-1799">
+                                <div class="fr-collapse" id="snippet-1797">
                                     <pre class=" language-html"><code>&lt;span class="fr-icon-user-search-fill" aria-hidden="true"&gt;&lt;/span&gt;
 </code></pre>
                                 </div>
@@ -426,9 +398,9 @@
                         <div class="fr-mb-12v">
                             <section class="fr-accordion">
                                 <h3 class="fr-accordion__title">
-                                    <button class="fr-accordion__btn" aria-expanded="false" aria-controls="snippet-1800">Extrait de code</button>
+                                    <button class="fr-accordion__btn" aria-expanded="false" aria-controls="snippet-1798">Extrait de code</button>
                                 </h3>
-                                <div class="fr-collapse" id="snippet-1800">
+                                <div class="fr-collapse" id="snippet-1798">
                                     <pre class=" language-html"><code>&lt;span class="fr-icon-user-search-line" aria-hidden="true"&gt;&lt;/span&gt;
 </code></pre>
                                 </div>
@@ -441,9 +413,9 @@
                         <div class="fr-mb-12v">
                             <section class="fr-accordion">
                                 <h3 class="fr-accordion__title">
-                                    <button class="fr-accordion__btn" aria-expanded="false" aria-controls="snippet-1801">Extrait de code</button>
+                                    <button class="fr-accordion__btn" aria-expanded="false" aria-controls="snippet-1799">Extrait de code</button>
                                 </h3>
-                                <div class="fr-collapse" id="snippet-1801">
+                                <div class="fr-collapse" id="snippet-1799">
                                     <pre class=" language-html"><code>&lt;span class="fr-icon-user-setting-fill" aria-hidden="true"&gt;&lt;/span&gt;
 </code></pre>
                                 </div>
@@ -456,9 +428,9 @@
                         <div class="fr-mb-12v">
                             <section class="fr-accordion">
                                 <h3 class="fr-accordion__title">
-                                    <button class="fr-accordion__btn" aria-expanded="false" aria-controls="snippet-1802">Extrait de code</button>
+                                    <button class="fr-accordion__btn" aria-expanded="false" aria-controls="snippet-1800">Extrait de code</button>
                                 </h3>
-                                <div class="fr-collapse" id="snippet-1802">
+                                <div class="fr-collapse" id="snippet-1800">
                                     <pre class=" language-html"><code>&lt;span class="fr-icon-user-setting-line" aria-hidden="true"&gt;&lt;/span&gt;
 </code></pre>
                                 </div>
@@ -471,9 +443,9 @@
                         <div class="fr-mb-12v">
                             <section class="fr-accordion">
                                 <h3 class="fr-accordion__title">
-                                    <button class="fr-accordion__btn" aria-expanded="false" aria-controls="snippet-1803">Extrait de code</button>
+                                    <button class="fr-accordion__btn" aria-expanded="false" aria-controls="snippet-1801">Extrait de code</button>
                                 </h3>
-                                <div class="fr-collapse" id="snippet-1803">
+                                <div class="fr-collapse" id="snippet-1801">
                                     <pre class=" language-html"><code>&lt;span class="fr-icon-user-star-fill" aria-hidden="true"&gt;&lt;/span&gt;
 </code></pre>
                                 </div>
@@ -486,9 +458,9 @@
                         <div class="fr-mb-12v">
                             <section class="fr-accordion">
                                 <h3 class="fr-accordion__title">
-                                    <button class="fr-accordion__btn" aria-expanded="false" aria-controls="snippet-1804">Extrait de code</button>
+                                    <button class="fr-accordion__btn" aria-expanded="false" aria-controls="snippet-1802">Extrait de code</button>
                                 </h3>
-                                <div class="fr-collapse" id="snippet-1804">
+                                <div class="fr-collapse" id="snippet-1802">
                                     <pre class=" language-html"><code>&lt;span class="fr-icon-user-star-line" aria-hidden="true"&gt;&lt;/span&gt;
 </code></pre>
                                 </div>

package/example/utility/icons/icons-weather/index.html

@@ -99,6 +99,8 @@
         <div class="fr-container fr-mt-2v fr-mb-8w">
             <a class="fr-link fr-icon-arrow-left-line fr-link--icon-left" href="../">Retour</a>
             <h1>Icônes Weather (icons-weather)</h1>
+            <p>Les icônes fonctionnelles sont des symboles visuels qui accompagnent l’utilisateur dans ses actions et qui aident à sa compréhension de l’interface.</p>
+            <a href="https://gouvfr.atlassian.net/wiki/spaces/DB/pages/222331396/Ic+nes+-+Icons#Weather" target="_blank">Documentation</a>
         </div>
         <div class="fr-mb-12w">
             <div class="fr-container">
@@ -111,9 +113,9 @@
                         <div class="fr-mb-12v">
                             <section class="fr-accordion">
                                 <h3 class="fr-accordion__title">
-                                    <button class="fr-accordion__btn" aria-expanded="false" aria-controls="snippet-1805">Extrait de code</button>
+                                    <button class="fr-accordion__btn" aria-expanded="false" aria-controls="snippet-1803">Extrait de code</button>
                                 </h3>
-                                <div class="fr-collapse" id="snippet-1805">
+                                <div class="fr-collapse" id="snippet-1803">
                                     <pre class=" language-html"><code>&lt;span class="fr-icon-cloudy-2-fill" aria-hidden="true"&gt;&lt;/span&gt;
 </code></pre>
                                 </div>
@@ -126,9 +128,9 @@
                         <div class="fr-mb-12v">
                             <section class="fr-accordion">
                                 <h3 class="fr-accordion__title">
-                                    <button class="fr-accordion__btn" aria-expanded="false" aria-controls="snippet-1806">Extrait de code</button>
+                                    <button class="fr-accordion__btn" aria-expanded="false" aria-controls="snippet-1804">Extrait de code</button>
                                 </h3>
-                                <div class="fr-collapse" id="snippet-1806">
+                                <div class="fr-collapse" id="snippet-1804">
                                     <pre class=" language-html"><code>&lt;span class="fr-icon-cloudy-2-line" aria-hidden="true"&gt;&lt;/span&gt;
 </code></pre>
                                 </div>
@@ -141,9 +143,9 @@
                         <div class="fr-mb-12v">
                             <section class="fr-accordion">
                                 <h3 class="fr-accordion__title">
-                                    <button class="fr-accordion__btn" aria-expanded="false" aria-controls="snippet-1807">Extrait de code</button>
+                                    <button class="fr-accordion__btn" aria-expanded="false" aria-controls="snippet-1805">Extrait de code</button>
                                 </h3>
-                                <div class="fr-collapse" id="snippet-1807">
+                                <div class="fr-collapse" id="snippet-1805">
                                     <pre class=" language-html"><code>&lt;span class="fr-icon-flashlight-fill" aria-hidden="true"&gt;&lt;/span&gt;
 </code></pre>
                                 </div>
@@ -156,9 +158,9 @@
                         <div class="fr-mb-12v">
                             <section class="fr-accordion">
                                 <h3 class="fr-accordion__title">
-                                    <button class="fr-accordion__btn" aria-expanded="false" aria-controls="snippet-1808">Extrait de code</button>
+                                    <button class="fr-accordion__btn" aria-expanded="false" aria-controls="snippet-1806">Extrait de code</button>
                                 </h3>
-                                <div class="fr-collapse" id="snippet-1808">
+                                <div class="fr-collapse" id="snippet-1806">
                                     <pre class=" language-html"><code>&lt;span class="fr-icon-flashlight-line" aria-hidden="true"&gt;&lt;/span&gt;
 </code></pre>
                                 </div>
@@ -171,9 +173,9 @@
                         <div class="fr-mb-12v">
                             <section class="fr-accordion">
                                 <h3 class="fr-accordion__title">
-                                    <button class="fr-accordion__btn" aria-expanded="false" aria-controls="snippet-1809">Extrait de code</button>
+                                    <button class="fr-accordion__btn" aria-expanded="false" aria-controls="snippet-1807">Extrait de code</button>
                                 </h3>
-                                <div class="fr-collapse" id="snippet-1809">
+                                <div class="fr-collapse" id="snippet-1807">
                                     <pre class=" language-html"><code>&lt;span class="fr-icon-moon-fill" aria-hidden="true"&gt;&lt;/span&gt;
 </code></pre>
                                 </div>
@@ -186,9 +188,9 @@
                         <div class="fr-mb-12v">
                             <section class="fr-accordion">
                                 <h3 class="fr-accordion__title">
-                                    <button class="fr-accordion__btn" aria-expanded="false" aria-controls="snippet-1810">Extrait de code</button>
+                                    <button class="fr-accordion__btn" aria-expanded="false" aria-controls="snippet-1808">Extrait de code</button>
                                 </h3>
-                                <div class="fr-collapse" id="snippet-1810">
+                                <div class="fr-collapse" id="snippet-1808">
                                     <pre class=" language-html"><code>&lt;span class="fr-icon-moon-line" aria-hidden="true"&gt;&lt;/span&gt;
 </code></pre>
                                 </div>
@@ -201,9 +203,9 @@
                         <div class="fr-mb-12v">
                             <section class="fr-accordion">
                                 <h3 class="fr-accordion__title">
-                                    <button class="fr-accordion__btn" aria-expanded="false" aria-controls="snippet-1811">Extrait de code</button>
+                                    <button class="fr-accordion__btn" aria-expanded="false" aria-controls="snippet-1809">Extrait de code</button>
                                 </h3>
-                                <div class="fr-collapse" id="snippet-1811">
+                                <div class="fr-collapse" id="snippet-1809">
                                     <pre class=" language-html"><code>&lt;span class="fr-icon-sun-fill" aria-hidden="true"&gt;&lt;/span&gt;
 </code></pre>
                                 </div>
@@ -216,9 +218,9 @@
                         <div class="fr-mb-12v">
                             <section class="fr-accordion">
                                 <h3 class="fr-accordion__title">
-                                    <button class="fr-accordion__btn" aria-expanded="false" aria-controls="snippet-1812">Extrait de code</button>
+                                    <button class="fr-accordion__btn" aria-expanded="false" aria-controls="snippet-1810">Extrait de code</button>
                                 </h3>
-                                <div class="fr-collapse" id="snippet-1812">
+                                <div class="fr-collapse" id="snippet-1810">
                                     <pre class=" language-html"><code>&lt;span class="fr-icon-sun-line" aria-hidden="true"&gt;&lt;/span&gt;
 </code></pre>
                                 </div>

package/example/utility/icons/index.html

@@ -99,6 +99,8 @@
         <div class="fr-container fr-mt-2v fr-mb-8w">
             <a class="fr-link fr-icon-arrow-left-line fr-link--icon-left" href="../">Retour</a>
             <h1>Utilitaires d&#39;icônes (icons)</h1>
+            <p>Les icônes fonctionnelles sont des symboles visuels qui accompagnent l’utilisateur dans ses actions et qui aident à sa compréhension de l’interface.</p>
+            <a href="https://gouvfr.atlassian.net/wiki/spaces/DB/pages/222331396/Ic+nes+-+Icons" target="_blank">Documentation</a>
         </div>
         <div class="fr-container">
             <ul class="fr-col-12">

package/example/utility/index.html

@@ -99,6 +99,19 @@
         <div class="fr-container fr-mt-2v fr-mb-8w">
             <a class="fr-link fr-icon-arrow-left-line fr-link--icon-left" href="../">Retour</a>
             <h1>Utilitaire (utility)</h1>
+            <p>Le package utility apporte des utilitaires optionnels et complémentaires aux fondamentaux.
+                <br />
+                <br />### Icônes
+                <br />
+                <br />Les icônes fonctionnelles sont des symboles visuels qui accompagnent l’utilisateur dans ses actions et qui aident à sa compréhension de l’interface.
+                <br />
+            </p>
+            <h5>Documentation</h5>
+            <ul>
+                <li>
+                    <a href="https://gouvfr.atlassian.net/wiki/spaces/DB/pages/222331396/Ic+nes+-+Icons" target="_blank">Icônes</a>
+                </li>
+            </ul>
         </div>
         <div class="fr-container">
             <ul class="fr-col-12">

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gouvfr/dsfr",
-  "version": "1.5.0",
+  "version": "1.5.1",
   "description": "Système de Design de l'Etat - DSFR",
   "repository": "git@github.com:GouvernementFR/dsfr.git",
   "author": "Service d'Information du Gouvernement <jean-charles.hourdeaux@pm.gouv.fr>",

package/src/component/download/script/download/assess-file.js

@@ -33,7 +33,7 @@ class AssessFile extends api.core.Instance {
 
   update () {
     // TODO V2: implémenter async
-    if (this.legacy) this.length = -1;
+    if (this.isLegacy) this.length = -1;
 
     if (!this.length) {
       this.getFileLength();
@@ -52,10 +52,7 @@ class AssessFile extends api.core.Instance {
       }
 
       if (this.hreflang) {
-        const displayNameLang = new Intl.DisplayNames([this.lang], { type: 'language' });
-        const langName = displayNameLang.of(this.hreflang);
-        const capitalizeLangName = langName.charAt(0).toUpperCase() + langName.slice(1);
-        details.push(capitalizeLangName);
+        details.push(this.getLangDisplayName(this.hreflang));
       }
 
       this.detail.innerHTML = details.join(' - ');
@@ -73,6 +70,13 @@ class AssessFile extends api.core.Instance {
     return url.match(regexExtension)[0].replace('.', '');
   }
 
+  getLangDisplayName (locale) {
+    if (this.isLegacy) return locale;
+    const displayNames = new Intl.DisplayNames([this.lang], { type: 'language' });
+    const name = displayNames.of(locale);
+    return name.charAt(0).toUpperCase() + name.slice(1);
+  }
+
   bytesToSize (bytes) {
     if (bytes === -1) return null;
 

package/src/component/download/script/download/download-selector.js

@@ -1,6 +1,5 @@
 import api from '../../api.js';
 
-console.log(api.internals.ns.attr.selector('assess-file'));
 export const DownloadSelector = {
   DOWNLOAD_ASSESS_FILE: `${api.internals.ns.attr.selector('assess-file')}`,
   DOWNLOAD_DETAIL: `${api.internals.ns.selector('download__detail')}`

package/src/utility/.folder.yml

@@ -1,5 +1,12 @@
 id: utility
 title: Utilitaire
-description:
+description: |
+  Le package utility apporte des utilitaires optionnels et complémentaires aux fondamentaux.
+
+  ### Icônes
+
+  Les icônes fonctionnelles sont des symboles visuels qui accompagnent l’utilisateur dans ses actions et qui aident à sa compréhension de l’interface.
 doc:
+  - title: Icônes
+    url: https://gouvfr.atlassian.net/wiki/spaces/DB/pages/222331396/Ic+nes+-+Icons
 detached: true

package/src/utility/icons/.folder.yml

@@ -1,4 +1,4 @@
 id: icons
 title: Utilitaires d'icônes
-description:
-doc:
+description: Les icônes fonctionnelles sont des symboles visuels qui accompagnent l’utilisateur dans ses actions et qui aident à sa compréhension de l’interface.
+doc: https://gouvfr.atlassian.net/wiki/spaces/DB/pages/222331396/Ic+nes+-+Icons

package/src/utility/icons/deprecated/style/_setting.scss

@@ -0,0 +1 @@
+$deprecated-icons: error-fill error-line success-fill success-line info-fill info-line warning-fill warning-line flashlight-fill flashlight-line bold highlight menu-fill menu-2-fill arrow-up-line arrow-up-fill arrow-right-line arrow-down-line arrow-left-line arrow-up-s-line arrow-right-s-line arrow-down-s-line arrow-left-s-line arrow-left-s-first-line  arrow-left-s-line-double arrow-right-s-last-line  arrow-right-s-line-double arrow-right-up-line arrow-go-back-fill arrow-go-back-line user-fill user-line lock-fill lock-line logout-box-r-fill logout-box-r-line home-4-fill home-4-line question-fill question-line information-fill information-line error-warning-fill error-warning-line close-line check-line add-circle-fill add-circle-line subtract-line add-line search-fill search-line eye-fill eye-line eye-off-fill eye-off-line zoom-in-fill zoom-in-line zoom-out-fill zoom-out-line printer-fill printer-line upload-2-fill upload-2-line file-download-fill file-download-line download-line external-link-line edit-fill edit-line links-fill link-unlink save-fill save-line calendar-fill calendar-line file-fill file-line mail-fill mail-line phone-fill phone-line refresh-fill refresh-line equalizer-fill equalizer-line filter-fill filter-line attachment-fill attachment-line theme-fill italic list-ordered list-unordered font-size volume-up-fill volume-up-line volume-mute-fill volume-mute-line volume-down-fill volume-down-line pause-circle-fill pause-circle-line file-pdf-fill file-pdf-line chat-quote-fill chat-quote-line rss-fill rss-line image-fill image-line line-chart-fill line-chart-line map-pin-2-fill map-pin-2-line road-map-fill road-map-line timer-fill timer-line dailymotion-fill dailymotion-line facebook-circle-fill facebook-circle-line github-fill github-line instagram-fill instagram-line linkedin-box-fill linkedin-box-line npmjs-fill npmjs-line remixicon-fill remixicon-line slack-fill slack-line snapchat-fill snapchat-line telegram-fill telegram-line twitter-fill twitter-line twitch-fill twitch-line vimeo-fill vimeo-line youtube-fill youtube-line;

package/src/utility/icons/icons-buildings/.package.yml

@@ -1,7 +1,7 @@
 id: icons-buildings
 title: Icônes Buildings
-description:
-doc:
+description: Les icônes fonctionnelles sont des symboles visuels qui accompagnent l’utilisateur dans ses actions et qui aident à sa compréhension de l’interface.
+doc: https://gouvfr.atlassian.net/wiki/spaces/DB/pages/222331396/Ic+nes+-+Icons#Building
 wrapper: col-8
 style:
   - core

package/src/utility/icons/icons-buildings/deprecated/style/_legacy.scss

@@ -0,0 +1,8 @@
+////
+/// Icon Buildings Legacy
+/// @group icon-buildings
+////
+
+@include legacy(ie11) {
+  @include generate-deprecated-icons-legacy($deprecated-icons, filter-icons('buildings'));
+}

package/src/utility/icons/icons-buildings/deprecated/style/_module.scss

@@ -0,0 +1,6 @@
+////
+/// Icon Buildings Module
+/// @group icon-buildings
+////
+
+@include generate-deprecated-icons($deprecated-icons, filter-icons('buildings'));

package/src/utility/icons/icons-buildings/deprecated/style/_setting.scss

@@ -0,0 +1 @@
+@import '../../../deprecated/style/setting';

package/src/utility/icons/icons-buildings/legacy.scss

@@ -7,3 +7,7 @@
 @import '../../../media-query-order';
 @import 'index';
 @import 'style/legacy';
+
+// deprecated
+@import 'deprecated/style/setting';
+@import 'deprecated/style/legacy';

package/src/utility/icons/icons-buildings/main.scss

@@ -11,3 +11,7 @@
 @import '../../../media-query-order';
 @import 'index';
 @import 'style/module';
+
+// deprecated
+@import 'deprecated/style/setting';
+@import 'deprecated/style/module';

package/src/utility/icons/icons-business/.package.yml

@@ -1,7 +1,7 @@
 id: icons-business
 title: Icônes Business
-description:
-doc:
+description: Les icônes fonctionnelles sont des symboles visuels qui accompagnent l’utilisateur dans ses actions et qui aident à sa compréhension de l’interface.
+doc: https://gouvfr.atlassian.net/wiki/spaces/DB/pages/222331396/Ic+nes+-+Icons#Business
 wrapper: col-8
 style:
   - core

package/src/utility/icons/icons-business/deprecated/style/_legacy.scss

@@ -0,0 +1,8 @@
+////
+/// Icon Business Legacy
+/// @group icon-business
+////
+
+@include legacy(ie11) {
+  @include generate-deprecated-icons-legacy($deprecated-icons, filter-icons('business'));
+}

package/src/utility/icons/icons-business/deprecated/style/_module.scss

@@ -0,0 +1,6 @@
+////
+/// Icon Business Module
+/// @group icon-business
+////
+
+@include generate-deprecated-icons($deprecated-icons, filter-icons('business'));