VueDsfr

Apparence

Utiliser des icônes dans un projet avec VueDsfr ​

Utiliser les icônes officielles ​

Pour utiliser les icônes officielles avec les classes CSS du DSFR, il n’y a pas d’actions en plus à faire, puisque c’est le CSS officiel du DSFR qui est utilisé.

Ci-dessous un exemple :

vue
<template>
  <div class="fr-p-2w">
    <p>
      Une icône dans un &lt;span> ici : <span class="fr-icon-checkbox-circle-line" />
    </p>
    <button class="fr-btn fr-icon-checkbox-circle-line fr-btn--icon-left">
      Une icône dans un bouton ici
    </button>
  </div>
</template>

Utiliser les icônes dans les composants de VueDsfr ​

Plusieurs composants (DsfrButton, DsfrBadge, DsfrCallout...) ont la prop icon qui permet d’ajouter une icône.

Attention, cette icône n’est pas forcément une icône officielle du DSFR. En effet, VueDsfr utilise désormais (depuis la v6) la bibliothèque @iconify/vue. Cette prop icon est donc :

  • soit une string qui doit être un nom de classe valide pour une icône du DSFR (qui commence par 'fr-icon-') ;
  • soit une string qui doit être un nom d’icône valide pour iconify;
  • soit la prop complète attendue par le composant VIcon de la bibliothèque dont voici le type :
    ts
    export type VIconProps = {
  name?: string
  scale?: string | number
  verticalAlign?: string
  animation?: 'spin' | 'wrench' | 'pulse' | 'spin-pulse' | 'flash' | 'float' | 'ring'
  speed?: 'fast' | 'slow'
  flip?: 'horizontal' | 'vertical' | 'both'
  label?: string
  title?: string
  color?: string
  fill?: string
  inverse?: boolean
  ssr?: boolean
  display?: 'block' | 'inline-block' | 'inline'
}

Démo ​

vue
<script lang="ts" setup>
import DsfrButton from '../../src/components/DsfrButton/DsfrButton.vue'
</script>

<template>
  <div class="fr-p-2w  flex gap-4  flex-wrap">
    <DsfrButton icon="fr-icon-close-line">
      Texte avec icône Dsfr (commence par <code>'fr-'</code>)
    </DsfrButton>

    <DsfrButton icon="ri-close-line">
      Texte avec icône @iconify/vue
    </DsfrButton>

    <DsfrButton
      :icon="{ name: 'ri-close-line', color: 'green', animation: 'flash' }"
      secondary
    >
      Texte avec icône
      <code>@iconify/vue</code>
      <span style="color: green"> verte </span>
      avec animation 'flash'
    </DsfrButton>
  </div>
</template>

<style scoped>
.flex {
  display: flex;
}
.gap-4 {
  gap: 1rem;
}
</style>

WARNING

Il faut normalement utiliser le nom en kebab-case et avec le nom de la collection en prefix séparé par un caractère : comme par exemple ri:close-line

exemple :

vue
<template>
  Nom d’icône correct : <VIcon name="ri:close-line" />
</template>

Cependant, si le préfix est lui-même sans tiret -, alors l’écriture tout en kebab-case est acceptée :

vue
<template>
  Nom d’icône accepté : <VIcon name="ri-close-line" />
</template>

Ainsi, si vous utilisiez jusqu’ici que des collections remix icon (ri) et bootstrap icons (bi) vous ne devriez rien avoir à changer.

Les collections disponibles

Vous pouvez utiliser toutes les icônes disponibles ici : icon-sets.iconify.design

typescript
// src/components/MonComposant.vue
<script lang="ts" setup>
import { ref } from 'vue'

import { VIcon } from '@gouvminint/vue-dsfr'
</script>

<template>
  <div>
    <VIcon
      name="ri-checkbox-circle-line"
      scale="2"
      animation="float"
      label="icon label"
      title="icon title"
    />
    C’est validé !
  </div>
</template>

Pour Nuxt 3 ​

Veillez simplement à utiliser la prop ssr à true.

Plus de détails dans la documentation officielle de @iconify/vue.