Brickslab.Tools

@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"

size="md"

size="lg"

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

size="sm"

size="md"

size="lg"

Comparaison square vs circle — size: md

shape="square"

shape="circle"

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

imgSrc + shape="square"

imgSrc + shape="circle"

variant="both"

Rendu par défaut — toutes les tailles

size="sm"

BricksLab

size="md"

BricksLab

size="lg"

BricksLab

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

imgSrc · shape="square"

BricksLab

imgSrc · shape="circle"

BricksLab

Image custom + texte custom — size: md

imgSrc + text="MonProduit"

MonProduit

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

défaut icône + défaut texte

BricksLab

imgSrc + défaut texte

BricksLab

défaut icône + text custom

MonProduit

imgSrc + text custom

MonProduit

Props

Prop	Type	Défaut	Requis	Description
`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.
`text`	`string`	`—`	—	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".
`imgSrc`	`string`	`—`	—	URL de l'image custom pour l'icône. Si absent, rendu par défaut "B". S'applique en variant "icon" et "both".
`imgAlt`	`string`	`"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" />