feat: ✨ permet d’utiliser les icônes DSFR

Désormais tous les composants qui ont une prop `icon` peuvent recevoir en valeur
le nom d’une classe correspondant à une icône DSFR.

Author: laruiss

src/components/DsfrButton/DsfrButton.vue

@@ -25,7 +25,10 @@ defineExpose({ focus })
 
 const dsfrIcon = computed(() => typeof props.icon === 'string' && props.icon.startsWith('fr-icon-'))
 const defaultScale = computed(() => props.iconOnly ? 1.25 : 0.8325)
-const iconProps = computed(() => typeof props.icon === 'string' ? { name: props.icon, scale: defaultScale.value } : { scale: defaultScale.value, ...props.icon })
+const iconProps = computed(() => typeof props.icon === 'string'
+  ? { scale: defaultScale.value, name: props.icon }
+  : { scale: defaultScale.value, ...props.icon },
+)
 </script>
 
 <template>

src/components/DsfrButton/DsfrButtonGroup.vue

@@ -83,6 +83,7 @@ onMounted(async () => {
         @click="onClick"
       />
     </li>
+    <!-- @slot Slot par défaut pour le contenu de la liste de boutons. Sera dans `<ul class="fr-btns-group">` -->
     <slot />
   </ul>
 </template>

src/components/DsfrCallout/DsfrCallout.types.ts

@@ -1,9 +1,10 @@
+import type { OhVueIcon as VIcon } from 'oh-vue-icons'
 import type { DsfrButtonProps } from '../DsfrButton/DsfrButton.types'
 
 export type DsfrCalloutProps = {
   title: string
   content: string
   titleTag?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'
   button?: DsfrButtonProps
-  icon?: string
+  icon?: string | InstanceType<typeof VIcon>['$props']
 }

src/components/DsfrCallout/DsfrCallout.vue

@@ -1,20 +1,32 @@
 <script lang="ts" setup>
+import { computed } from 'vue'
+
 import DsfrButton from '../DsfrButton/DsfrButton.vue'
 
 import type { DsfrCalloutProps } from './DsfrCallout.types'
 
 export type { DsfrCalloutProps }
 
-withDefaults(defineProps<DsfrCalloutProps>(), {
+const props = withDefaults(defineProps<DsfrCalloutProps>(), {
   // @ts-ignore this is really undefined
   button: () => undefined,
   titleTag: 'h3',
   icon: undefined,
 })
+
+const dsfrIcon = computed(() => typeof props.icon === 'string' && props.icon.startsWith('fr-icon-'))
+const iconProps = computed(() => dsfrIcon.value ? undefined : typeof props.icon === 'string' ? { name: props.icon } : { ...(props.icon ?? {}) })
 </script>
 
 <template>
-  <div class="fr-callout">
+  <div
+    class="fr-callout"
+    :class="{ [String(icon)]: dsfrIcon }"
+  >
+    <VIcon
+      v-if="iconProps"
+      v-bind="iconProps"
+    />
     <component
       :is="titleTag"
       class="fr-callout__title"

src/components/DsfrFieldset/DsfrFieldset.vue

@@ -37,8 +37,8 @@ withDefaults(defineProps<DsfrFieldsetProps>(), {
         <slot name="hint" />
       </span>
     </div>
-    <!-- @slot Slot par défaut pour le contenu du fieldset (sera dans `<fieldset>`, après `</legend>`) -->
     <div class="fr-fieldset__element">
+      <!-- @slot Slot par défaut pour le contenu du fieldset (sera dans `<div class="fr-fieldset__element">`) -->
       <slot />
     </div>
   </fieldset>

src/components/DsfrHeader/DsfrHeader.vue

@@ -250,6 +250,7 @@ defineEmits<{
             :hidemodal="hideModal"
           />
         </div>
+        <!-- @slot Slot par défaut pour le contenu du fieldset (sera dans `<div class="fr-header__body-row">`) -->
         <slot />
       </div>
     </div>

src/components/DsfrHeader/DsfrHeaderMenuLink.vue

@@ -47,30 +47,40 @@ const actualTo = computed(() => {
 const linkData = computed(() => {
   return actualTo.value ? { to: actualTo.value } : { href: actualHref.value }
 })
+const dsfrIcon = computed(() => typeof props.icon === 'string' && props.icon.startsWith('fr-icon-'))
+const defaultScale = 1
+const iconProps = computed(() => typeof props.icon === 'string'
+  ? { name: props.icon, scale: defaultScale, ...(props.iconAttrs ?? {}) }
+  : { scale: defaultScale, ...(props.icon ?? {}), ...(props.iconAttrs ?? {}) },
+)
 </script>
 
 <template>
   <component
     :is="is"
     class="fr-btn"
+    :class="{
+      'fr-btn--icon-right': dsfrIcon && iconRight,
+      'fr-btn--icon-left': dsfrIcon && !iconRight,
+      [String(icon)]: dsfrIcon,
+    }"
     v-bind="linkData"
     :target="target"
     @click.stop="onClick"
   >
     <template
-      v-if="(icon || iconAttrs?.name) && !iconRight"
+      v-if="!dsfrIcon && (icon || iconAttrs?.name) && !iconRight"
     >
       <VIcon
-        :name="icon"
         class="fr-mr-1w"
-        v-bind="iconAttrs"
+        v-bind="iconProps"
       />
     </template>
 
     {{ label }}
 
     <template
-      v-if="(icon || iconAttrs?.name) && iconRight"
+      v-if="!dsfrIcon && (icon || iconAttrs?.name) && iconRight"
     >
       <VIcon
         :name="icon"

src/components/DsfrInput/DsfrInputGroup.vue

@@ -36,6 +36,7 @@ const messageClass = computed(() => props.errorMessage ? 'fr-error-text' : 'fr-v
     }"
   >
     <slot name="before-input" />
+    <!-- @slot Slot par défaut pour le contenu du groupe de champ -->
     <slot />
     <DsfrInput
       v-if="!$slots.default"

src/components/DsfrModal/DsfrModal.vue

@@ -67,6 +67,15 @@ async function close () {
   props.origin?.focus()
   emit('close')
 }
+
+const dsfrIcon = computed(() => typeof props.icon === 'string' && props.icon.startsWith('fr-icon-'))
+const defaultScale = 2
+const iconProps = computed(() => dsfrIcon.value
+  ? undefined
+  : typeof props.icon === 'string'
+    ? { name: props.icon, scale: defaultScale }
+    : { scale: defaultScale, ...(props.icon ?? {}) },
+)
 </script>
 
 <template>
@@ -113,11 +122,14 @@ async function close () {
                   class="fr-modal__title"
                 >
                   <span
-                    v-if="icon"
+                    v-if="dsfrIcon || iconProps"
+                    :class="{
+                      [String(icon)]: dsfrIcon,
+                    }"
                   >
                     <VIcon
-                      :name="icon"
-                      scale="2"
+                      v-if="iconProps"
+                      v-bind="iconProps"
                     />
                   </span>
                   {{ title }}

src/components/DsfrNavigation/DsfrNavigationMenuLink.vue

@@ -19,6 +19,14 @@ const props = withDefaults(defineProps<DsfrNavigationMenuLinkProps>(), {
 defineEmits<{(event: 'toggle-id', id: string): void}>()
 
 const isExternal = computed(() => typeof props.to === 'string' && props.to.startsWith('http'))
+const dsfrIcon = computed(() => props.icon && typeof props.icon === 'string' && props.icon.startsWith('fr-icon-'))
+const defaultScale = 2
+const iconProps = computed(() => (dsfrIcon.value || !props.icon)
+  ? undefined
+  : (typeof props.icon === 'string')
+      ? { scale: defaultScale, name: props.icon }
+      : { scale: defaultScale, ...(props.icon || {}) },
+)
 </script>
 
 <template>
@@ -36,11 +44,14 @@ const isExternal = computed(() => typeof props.to === 'string' && props.to.start
     class="fr-nav__link"
     data-testid="nav-router-link"
     :to="to"
+    :class="{
+      [String(icon)]: dsfrIcon,
+    }"
     @click="$emit('toggle-id', id)"
   >
     <VIcon
-      v-if="icon"
-      :name="icon"
+      v-if="iconProps"
+      v-bind="iconProps"
     />
     {{ text }}
   </RouterLink>