Merge pull request #782 from abulte/fix/tag-no-icon-warn

fix(DsfrTag): corrige le tag sans icone et ajoute une démo

demo-app/App.vue

@@ -198,6 +198,10 @@ const navItems: DsfrNavigationProps['navItems'] = [
  },
  ],
  },
+ {
+ to: { name: 'Tags' },
+ text: 'Tags',
+ },
 ]
 
 const beforeMandatoryLinks = [{ label: 'Before', to: '/before' }]

demo-app/router.js

@@ -4,6 +4,7 @@ import AboutUs from './views/AboutUs.vue'
 import AppHome from './views/AppHome.vue'
 import AppAlerts from './views/AppAlerts.vue'
 import AppTabs from './views/AppTabs.vue'
+import AppTags from './views/AppTags.vue'
 import SchemeSettings from './views/SchemeSettings.vue'
 import LanguageSelector from './views/LanguageSelector.vue'
 import AppForm from './views/AppForm.vue'
@@ -27,6 +28,7 @@ export const routes = [
  { path: '/alerts', name: 'Alertes', component: AppAlerts },
  { path: '/bandeaux', name: 'Bandeaux', component: AppAlerts },
  { path: '/callout', name: 'MiseEnAvant', component: CalloutTest },
+ { path: '/tags', name: 'Tags', component: AppTags },
 ]
 
 export default createRouter({

demo-app/views/AppTags.vue

@@ -0,0 +1,27 @@
+<script lang="ts" setup>
+import DsfrTag from '../../src/components/DsfrTag/DsfrTag.vue'
+import DsfrTags from '../../src/components/DsfrTag/DsfrTags.vue'
+
+const tags = [
+ {
+ icon: undefined,
+ label: 'Elément 1 de la liste de tags'
+ },
+ {
+ icon: 'ri-notification-3-line',
+ label: 'Elément 2 de la liste de tags'
+ }
+]
+</script>
+
+<template>
+ <div>
+ <DsfrTag label="Bonjour VueDsfr !" />
+ </div>
+ <div class="fr-mt-2w">
+ <DsfrTag label="Vue Power" icon="ri-notification-3-line" />
+ </div>
+ <div class="fr-mt-2w">
+ <DsfrTags :tags="tags" />
+ </div>
+</template>

src/components/DsfrTag/DsfrTag.vue

@@ -40,7 +40,7 @@ const iconProps = computed(() => dsfrIcon.value ? undefined : typeof props.icon
  v-bind="linkProps"
  >
  <VIcon
- v-if="iconProps"
+ v-if="props.icon"
  :label="iconOnly ? label : undefined"
  v-bind="iconProps"
  />