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

Author: laruiss

src/components/DsfrTag/DsfrTag.spec.ts

@@ -31,7 +31,7 @@ describe('DsfrTag', () => {
     const firstTagEl = getByText(label)
 
     // Then
-    expect(firstTagEl.parentNode).toHaveClass('fr-tag')
+    expect(firstTagEl).toHaveClass('fr-tag')
   })
 
   it('should render small simple tag', () => {
@@ -56,8 +56,8 @@ describe('DsfrTag', () => {
     const firstTagEl = getByText(label)
 
     // Then
-    expect(firstTagEl.parentNode).toHaveClass('fr-tag')
-    expect(firstTagEl.parentNode).toHaveClass('fr-tag--sm')
+    expect(firstTagEl).toHaveClass('fr-tag')
+    expect(firstTagEl).toHaveClass('fr-tag--sm')
   })
 })
 
@@ -92,7 +92,7 @@ describe('DsfrTags', () => {
     const secondTagEl = getByText(label2)
 
     // Then
-    expect(firstTagEl.parentNode).toHaveClass('fr-tag')
-    expect(secondTagEl.parentNode).toHaveClass('fr-tag')
+    expect(firstTagEl).toHaveClass('fr-tag')
+    expect(secondTagEl).toHaveClass('fr-tag')
   })
 })

src/components/DsfrTag/DsfrTag.vue

@@ -2,10 +2,6 @@
 import { computed } 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
-// import '@gouvfr/dsfr/dist/component/tag/tag.module.js'
-
 import type { DsfrTagProps } from './DsfrTags.types'
 
 export type { DsfrTagProps }
@@ -28,6 +24,10 @@ const is = computed(() => {
 const linkProps = computed(() => {
   return { [isExternalLink.value ? 'href' : 'to']: props.link }
 })
+
+const dsfrIcon = computed(() => typeof props.icon === 'string' && props.icon.startsWith('fr-icon-'))
+const defaultScale = 0.9
+const iconProps = computed(() => typeof props.icon === 'string' ? { name: props.icon, scale: defaultScale } : { scale: defaultScale, ...props.icon })
 </script>
 
 <template>
@@ -37,16 +37,18 @@ const linkProps = computed(() => {
     :disabled="disabled"
     :class="{
       'fr-tag--sm': small,
+      [icon]: dsfrIcon,
     }"
     v-bind="linkProps"
   >
     <VIcon
       v-if="icon"
-      :name="icon"
       :label="iconOnly ? label : undefined"
-      :scale="0.9"
+      v-bind="iconProps"
     />
-    <span v-if="!iconOnly">{{ label }}</span>
+    <template v-if="!iconOnly">
+      {{ label }}
+    </template>
     <slot />
   </component>
 </template>