fix!: 🐛 Corrige problème VIcon dans Nuxt

Il faut désormais indiquer toutes les icônes à utiliser lors de l’enregistement
du plugin. Cf. documentation

Author: laruiss

src/components/DsfrButton/DsfrButton.vue

@@ -1,11 +1,16 @@
 <script>
 import { defineComponent } from 'vue'
+import { OhVueIcon as VIcon } from 'oh-vue-icons'
 
 // import '@gouvfr/dsfr/dist/component/button/button.module.js'
 
 export default defineComponent({
   name: 'DsfrButton',
 
+  components: {
+    VIcon,
+  },
+
   props: {
     disabled: Boolean,
     label: {

src/components/DsfrFooter/DsfrFooter.vue

@@ -1,5 +1,6 @@
 <script>
 import { defineComponent } from 'vue'
+import { OhVueIcon as VIcon } from 'oh-vue-icons'
 
 import DsfrLogo from '../DsfrLogo/DsfrLogo.vue'
 import DsfrFooterPartners from '../DsfrFooter/DsfrFooterPartners.vue'
@@ -10,6 +11,7 @@ export default defineComponent({
   components: {
     DsfrFooterPartners,
     DsfrLogo,
+    VIcon,
   },
 
   props: {

src/components/DsfrHeader/DsfrHeader.stories.js

@@ -50,7 +50,7 @@ export default {
 - \`href\`: URL à passer à \`href\` de la balise \`<a>\` (\`'https://systeme-de-design.gouv.fr\` par ex.) **pour un lien externe uniquement**.
 - \`icon\` Nom de l’icône [Remix Icon](https://remixicon.com/) (ou toute autre icône de [oh-vue-icons](https://oh-vue-icons.netlify.app/)) à afficher (\`'ri-phone-line'\` par ex.)
 - \`iconRight\` Permet de mettre l’icône à droite (si la valeur est \`true\` ou <em>truthy</em> et que \`icon\` est renseigné )
-- \`iconAttrs\` Ensemble des props/attributs à donner à \`<VIcon>\` (Cf. [Doc](https://oh-vue-icons.netlify.app/docs#props)). Ex. : \`{ scale: 0.9, animation: }\`
+- \`iconAttrs\` Ensemble des props/attributs à donner à \`<OhVueIcon>\` (Cf. [Doc](https://oh-vue-icons.netlify.app/docs#props)). Ex. : \`{ scale: 0.9, animation: }\`
 - \`button\`: \`true\` pour avoir une balise \`button\`, \`false\` pour laisser en balise \`a\`
 - accepte aussi tout ce qui peut être mis sur un composant, par exemple \`class\`
 `,

src/components/DsfrHeader/DsfrHeader.vue

@@ -1,5 +1,6 @@
 <script>
 import { defineComponent } from 'vue'
+import { OhVueIcon as VIcon } from 'oh-vue-icons'
 
 // Pose problème dans les tests, et risque fort de poser problème dans Nuxt
 // import '@gouvfr/dsfr/dist/component/header/header.module.js'
@@ -15,6 +16,7 @@ export default defineComponent({
     DsfrLogo,
     DsfrHeaderMenuLinks,
     DsfrSearchBar,
+    VIcon,
   },
 
   props: {
@@ -26,6 +28,10 @@ export default defineComponent({
       type: String,
       default: undefined,
     },
+    searchLabel: {
+      type: String,
+      default: 'Recherche',
+    },
     homeTo: {
       type: String,
       default: '/',
@@ -175,6 +181,7 @@ export default defineComponent({
               class="fr-header__search  fr-modal"
             >
               <DsfrSearchBar
+                :label="searchLabel"
                 :model-value="modelValue"
                 :placeholder="placeholder"
                 style="justify-content: flex-end"

src/components/DsfrHeader/DsfrHeaderMenuLink.vue

@@ -1,9 +1,14 @@
 <script>
 import { defineComponent } from 'vue'
+import { OhVueIcon as VIcon } from 'oh-vue-icons'
 
 export default defineComponent({
   name: 'DsfrHeaderMenuLink',
 
+  components: {
+    VIcon,
+  },
+
   props: {
     /* @deprecated Utiliser `to` ou `href` à la place */
     path: {

src/components/DsfrTable/DsfrTableHeader.stories.js

@@ -21,7 +21,7 @@ export default {
     },
     icon: {
       control: 'object',
-      description: 'Objet contenant les props à passer à VIcon (OhVueIcon) pour afficher une icône dans l’en-tête',
+      description: 'Objet contenant les props à passer à OhVueIcon pour afficher une icône dans l’en-tête',
     },
     onClickHeader: {
       action: 'Clic sur en-tête',

src/components/DsfrTable/DsfrTableHeader.vue

@@ -1,9 +1,14 @@
 <script>
 import { defineComponent } from 'vue'
+import { OhVueIcon as VIcon } from 'oh-vue-icons'
 
 export default defineComponent({
   name: 'DsfrTableHeader',
 
+  components: {
+    VIcon,
+  },
+
   props: {
     header: {
       type: String,

src/components/DsfrTabs/DsfrTabItem.vue

@@ -58,7 +58,7 @@ export default defineComponent({
         v-if="icon"
         style="margin-left: -0.25rem; margin-right: 0.5rem; font-size: 0.95rem;"
       >
-        <v-icon
+        <VIcon
           :name="icon"
         />
       </span>

src/components/DsfrTag/DsfrTag.vue

@@ -1,5 +1,6 @@
 <script>
 import { defineComponent } from 'vue'
+import { OhVueIcon as VIcon } from 'oh-vue-icons'
 
 // TODO: Pourquoi icône 'check' quand on utilise ce js et qu’on clique sur le premier ?
 // D’autre part, pour les étiquettes sélectionnables posent problème : le JS n’est pas
@@ -8,6 +9,10 @@ import { defineComponent } from 'vue'
 export default defineComponent({
   name: 'DsfrTag',
 
+  components: {
+    VIcon,
+  },
+
   props: {
     label: {
       type: String,

src/components/DsfrTag/DsfrTags.stories.js

@@ -6,11 +6,15 @@ import { addIcons } from 'oh-vue-icons'
 import {
   RiArrowLeftFill,
   RiArrowRightFill,
+  RiArrowLeftLine,
+  RiArrowRightLine,
 } from 'oh-vue-icons/icons/ri/index.js'
 
 addIcons(
   RiArrowLeftFill,
   RiArrowRightFill,
+  RiArrowLeftLine,
+  RiArrowRightLine,
 )
 
 export default {