Merge pull request #1044 from ShallowRed/develop

fix: 🐛 Permet l'utilisation d'une configuration d'icône dans le composant DsfrTag

Author: laruiss

src/components/DsfrTag/DsfrTag.md

@@ -26,18 +26,18 @@ Il se compose des éléments suivants :
 
 ## 🛠️ Props
 
-| Nom       | Type      | Défaut    | Obligatoire | Description                                              |
-|-----------|-----------|-----------|-------------|----------------------------------------------------------|
-| `label`     | `string`  | `undefined` |             | Le texte affiché sur l'étiquette.                        |
-| `link`      | `string`  | `undefined` |             | URL pour un lien externe. Détermine aussi le type de balise (a ou RouterLink). |
-| `tagName`   | `string`  | `'p'`       |             | Nom de la balise utilisée pour l'étiquette (devrait être `'p'` ou `'button'`).              |
-| `icon`      | `string`  | `undefined` |             | Nom de l'icône ([`@iconify/vue`](https://iconify.design/docs/icon-components/vue/)) à afficher sur l'étiquette. |
-| `disabled`  | `boolean` | `undefined`     |             | Désactive l'étiquette si elle est un bouton.             |
-| `small`     | `boolean` | `undefined`     |             | Réduit la taille de l'étiquette.                         |
-| `iconOnly`  | `boolean` | `undefined`     |             | Affiche uniquement l'icône, sans texte.                  |
-| `selectable` | `boolean`                  | `false`     | Rend le tag sélectionnable. |
-| `selected`  | `boolean` (si selectable) | `false`     | Indique si le tag est sélectionné. |
-| `value`     | `T` (si selectable)       | `undefined` | Valeur associée au tag (utile dans une liste de tags sélectionnables). |
+| Nom          | Type                      | Défaut      | Obligatoire | Description                                              |
+|--------------|---------------------------|-------------|-------------|----------------------------------------------------------|
+| `label`      | `string`                  | `undefined` |             | Le texte affiché sur l'étiquette.                        |
+| `link`       | `string`                  | `undefined` |             | URL pour un lien externe. Détermine aussi le type de balise (a ou RouterLink). |
+| `tagName`    | `string`                  | `'p'`       |             | Nom de la balise utilisée pour l'étiquette (devrait être `'p'` ou `'button'`).              |
+| `icon`       | `string \| InstanceType<typeof VIcon>['$props']`        | `undefined` |             | Icône à afficher dans le tag Peut être un nom ou une configuration d'icône. |
+| `disabled`   | `boolean`                 | `undefined` |             | Désactive l'étiquette si elle est un bouton.             |
+| `small`      | `boolean`                 | `undefined` |             | Réduit la taille de l'étiquette.                         |
+| `iconOnly`   | `boolean`                 | `undefined` |             | Affiche uniquement l'icône, sans texte.                  |
+| `selectable` | `boolean`                 | `false`     |             | Rend le tag sélectionnable. |
+| `selected`   | `boolean` (si selectable) | `false`     |             | Indique si le tag est sélectionné. |
+| `value`      | `T` (si selectable)       | `undefined` |             | Valeur associée au tag (utile dans une liste de tags sélectionnables). |
 
 ## 📡 Évenements
 

src/components/DsfrTag/DsfrTag.vue

@@ -28,8 +28,11 @@ const linkProps = computed(() => {
 })
 
 const dsfrIcon = computed(() => typeof props.icon === 'string' && props.icon.startsWith('fr-icon-'))
-const defaultScale = props.small ? 0.65 : 0.9
-const iconProps = computed(() => dsfrIcon.value ? undefined : typeof props.icon === 'string' ? { name: props.icon, scale: defaultScale } : { scale: defaultScale, ...(props.icon ?? {}) })
+const defaultScale = computed(() => props.small ? 0.65 : 0.9)
+const iconProps = computed(() => typeof props.icon === 'string'
+  ? { scale: defaultScale.value, name: props.icon }
+  : { scale: defaultScale.value, ...props.icon },
+)
 </script>
 
 <template>

src/components/DsfrTag/DsfrTags.types.ts

@@ -1,8 +1,10 @@
+import type VIcon from '../VIcon/VIcon.vue'
+
 export type DsfrTagProps<T = string> = {
   label?: string
   link?: string
   tagName?: string
-  icon?: string
+  icon?: string | InstanceType<typeof VIcon>['$props']
   disabled?: boolean
   small?: boolean
   iconOnly?: boolean