Brickslab.Libv2.1.5

@brickslab./ui-web

Logo de marque disponible en trois variantes (full / icon / both), trois tailles et deux shapes. Chaque variante accepte un rendu par défaut ou un contenu custom via text / imgSrc.

variant="full"

Rendu par défaut — toutes les tailles

size="sm"
BricksLab
size="md"
BricksLab
size="lg"
BricksLab

Texte custom — size: md

text="MonProduit"MonProduit
text absent (défaut)
BricksLab

variant="icon"

Icône par défaut — shape: square — toutes les tailles

size="sm"
B
size="md"
B
size="lg"
B

Icône par défaut — shape: circle — toutes les tailles

size="sm"
B
size="md"
B
size="lg"
B

Comparaison square vs circle — size: md

shape="square"
B
shape="circle"
B

Icône custom (imgSrc) — comparaison square vs circle — size: md

imgSrc + shape="square"BricksLab
imgSrc + shape="circle"BricksLab

variant="both"

Rendu par défaut — toutes les tailles

size="sm"
B
BricksLab
size="md"
B
BricksLab
size="lg"
B
BricksLab

Image custom + texte par défaut — size: md

imgSrc · shape="square"
BricksLab
BricksLab
imgSrc · shape="circle"
BricksLab
BricksLab

Image custom + texte custom — size: md

imgSrc + text="MonProduit"
BricksLabMonProduit

Matrice complète — variant="both" · size: md

défaut icône + défaut texte
B
BricksLab
imgSrc + défaut texte
BricksLab
BricksLab
défaut icône + text custom
B
MonProduit
imgSrc + text custom
BricksLabMonProduit

Props

PropTypeDéfautRequisDescription
size"sm" | "md" | "lg""md"—Contrôle les dimensions globales du composant.
variant"full" | "icon" | "both""full"—"full" affiche uniquement le texte. "icon" affiche uniquement l'icône. "both" combine icône + texte côte à côte.
textstring——Texte custom affiché en variant "full" ou "both". Si absent, rendu par défaut "BricksLab".
shape"square" | "circle""square"—Forme du conteneur icône (DefaultIcon et CustomIcon). S'applique en variant "icon" et "both".
imgSrcstring——URL de l'image custom pour l'icône. Si absent, rendu par défaut "B". S'applique en variant "icon" et "both".
imgAltstring"Logo"—Texte alternatif de l'image. Requis si imgSrc est fourni (accessibilité).
Override rapide

Tous les paramètres listés dans cette table sont overrideables via les props. Utilisez ce squelette comme point de départ.

<MyComponent
  size="md"
  variant="full"
  text={—}
  shape="square"
  imgSrc={—}
  imgAlt="Logo"
/>
sizevarianttextshapeimgSrcimgAlt

Utilisation — variant full

tsx
// Rendu texte par défaut
<LogoMark variant="full" size="sm" />
<LogoMark variant="full" size="md" />
<LogoMark variant="full" size="lg" />

// Texte custom
<LogoMark variant="full" size="md" text="MonProduit" />

Utilisation — variant icon

tsx
// Icône par défaut — shape square
<LogoMark variant="icon" size="sm" shape="square" />
<LogoMark variant="icon" size="md" shape="square" />
<LogoMark variant="icon" size="lg" shape="square" />

// Icône par défaut — shape circle
<LogoMark variant="icon" size="md" shape="circle" />

// Icône custom (image)
<LogoMark variant="icon" size="md" imgSrc="/assets/logo-icon.svg" imgAlt="BricksLab" shape="square" />
<LogoMark variant="icon" size="md" imgSrc="/assets/logo-icon.svg" imgAlt="BricksLab" shape="circle" />

Utilisation — variant both

tsx
// Défaut icône + défaut texte
<LogoMark variant="both" size="md" />

// Image custom + texte par défaut
<LogoMark variant="both" size="md" imgSrc="/assets/logo-icon.svg" imgAlt="BricksLab" />

// Image custom + texte custom
<LogoMark variant="both" size="md" imgSrc="/assets/logo-icon.svg" imgAlt="BricksLab" text="MonProduit" />

// Shape circle
<LogoMark variant="both" size="md" imgSrc="/assets/logo-icon.svg" imgAlt="BricksLab" shape="circle" />