feat(DsfrButton): ✨ permet d’ajouter des propriétés à l’icône

- permet notamment de changer la couleur ou d’animer l’icône (cf la documentation de oh-vue-icon)

Author: laruiss

src/components/DsfrButton/DsfrButton.stories.ts

@@ -1,10 +1,10 @@
 import { OhVueIcon as VIcon, addIcons } from 'oh-vue-icons'
 
-import { RiCheckboxCircleLine, RiSearchLine } from 'oh-vue-icons/icons/ri/index.js'
+import { RiCheckboxCircleLine, RiLoader4Line, RiSearchLine } from 'oh-vue-icons/icons/ri/index.js'
 
 import DsfrButton from './DsfrButton.vue'
 
-addIcons(RiCheckboxCircleLine, RiSearchLine)
+addIcons(RiCheckboxCircleLine, RiSearchLine, RiLoader4Line)
 
 /**
  * [Voir quand l’utiliser sur la documentation du DSFR](https://www.systeme-de-design.gouv.fr/elements-d-interface/composants/bouton)
@@ -114,6 +114,35 @@ BoutonPrimaireAvecIcone.args = {
   size: undefined,
 }
 
+export const BoutonPrimaireAvecIconeAnimee = (args) => ({
+  components: { DsfrButton },
+  data () {
+    return {
+      ...args,
+    }
+  },
+  template: `
+    <DsfrButton
+      :label="label"
+      :disabled="disabled"
+      :icon="icon"
+      :size="size"
+      :no-outline="noOutline"
+      :icon-right="iconRight"
+      @click="onClick"
+    />
+  `,
+
+})
+BoutonPrimaireAvecIconeAnimee.args = {
+  label: 'Label bouton',
+  disabled: false,
+  icon: { name: 'ri-loader-4-line', animation: 'spin' },
+  iconRight: true,
+  noOutline: false,
+  size: undefined,
+}
+
 export const BoutonSecondaire = (args) => ({
   components: { DsfrButton },
   data () {

src/components/DsfrButton/DsfrButton.vue

@@ -1,6 +1,7 @@
 <script lang="ts" setup>
 import { type Ref, computed, ref } from 'vue'
 import { OhVueIcon as VIcon } from 'oh-vue-icons'
+import { type CustomizeIconType } from 'oh-vue-icons'
 
 // import '@gouvfr/dsfr/dist/component/button/button.module.js'
 
@@ -13,7 +14,7 @@ export type DsfrButtonProps = {
   iconOnly?: boolean
   noOutline?: boolean
   size?: 'sm' | 'small' | 'lg' | 'large' | 'md' | 'medium' | '' | undefined
-  icon?: string
+  icon?: string | CustomizeIconType
   onClick?: ($event: MouseEvent) => void
 }
 
@@ -33,6 +34,8 @@ const focus = () => {
   btn.value?.focus()
 }
 defineExpose({ focus })
+
+const iconProps = computed(() => typeof props.icon === 'string' ? { name: props.icon } : props.icon)
 </script>
 
 <template>
@@ -57,7 +60,7 @@ defineExpose({ focus })
   >
     <VIcon
       v-if="icon"
-      :name="icon"
+      v-bind="iconProps"
     />
     <span v-if="!iconOnly">
       {{ label }}