Logo - DsfrLogo

🌟 Introduction

Le composant DsfrLogo est utilisé pour afficher le logo institutionnel du Gouvernement français, en respectant les spécifications du Design System de l'État Français (DSFR). Ce composant permet d'afficher un texte simple ou multi-lignes représentant le logo, avec des options pour ajuster la taille.

La story sur Logo sur le storybook de VueDsfr

📐 Structure

Le composant affiche un élément <p> avec la classe CSS fr-logo, et des classes supplémentaires pour les variations de taille. Le texte du logo peut être personnalisé pour répondre à vos besoins.

🛠️ Props

Nom	Type	Défaut	Description
small	boolean	false	Affiche le logo en petite taille (fr-logo--sm).
large	boolean	false	Affiche le logo en grande taille (fr-logo--lg).
logoText	`string	string[]`	'Gouvernement'

📡Événements

Aucun événement spécifique n'est émis par ce composant.

🧩 Slots

Aucun slot disponible pour ce composant.

📝 Exemples

Exemple de base

<DsfrLogo />

Résultat : Affiche le texte "Gouvernement" avec le style par défaut.

Exemple avec un texte personnalisé

<DsfrLogo logoText="République Française" />

Résultat : Affiche le texte "République Française".

Exemple avec un texte sur plusieurs lignes

<DsfrLogo :logoText="['Ministère de', 'l\'Éducation Nationale']" />

Exemple complet

Démo

Code de la démo

<script lang="ts" setup>
import DsfrLogo from '../DsfrLogo.vue'

const logoText = ['République', 'Française']
const small = false
const large = false
</script>

<template>
  <DsfrLogo
    :small="small"
    :large="large"
    :logo-text="logoText"
  />
</template>

⚙️ Code source du composant

DsfrLogo.vue

<script lang="ts" setup>
import type { DsfrLogoProps } from './DsfrLogo.types'

import { computed } from 'vue'

export type { DsfrLogoProps }

const props = withDefaults(defineProps<DsfrLogoProps>(), {
  logoText: () => 'Gouvernement',
})

const text = computed(() => Array.isArray(props.logoText) ? props.logoText.join('<br>') : props.logoText)
</script>

<template>
  <p
    class="fr-logo"
    :class="{
      'fr-logo--sm': small && !large,
      'fr-logo--lg': large && !small,
    }"
    v-html="text"
  />
</template>

DsfrLogo.types.ts

export type DsfrLogoProps = {
  small?: boolean
  large?: boolean
  logoText?: string | string[]
}