@solarbeam/brand

Composants React pour les assets de marque Solar Beam (Logo et Picto).

Installation

# npm
npm install @solarbeam/brand

# yarn
yarn add @solarbeam/brand

# pnpm
pnpm add @solarbeam/brand

# bun
bun add @solarbeam/brand

Ou directement depuis GitHub :

npm install github:Solar-Beam-Studio/brand

Utilisation

import { SolarBeamLogo, SolarBeamPicto, MadeBySolarBeam } from "@solarbeam/brand";

function App() {
  return (
    <div>
      {/* Logo complet */}
      <SolarBeamLogo height={50} />

      {/* Pictogramme / Icône */}
      <SolarBeamPicto size={24} />

      {/* Badge "Made by" pour les footers */}
      <MadeBySolarBeam />
    </div>
  );
}

Composants

<SolarBeamLogo />

Le logo complet Solar Beam avec le texte.

| Prop | Type | Défaut | Description | | ----------- | -------- | ------ | ------------------------------------ | | height | number | 50 | Hauteur du logo (largeur auto) | | className | string | - | Classes CSS | | ...props | - | - | Toutes les props SVG sont supportées |

<SolarBeamPicto />

Le pictogramme/icône Solar Beam.

| Prop | Type | Défaut | Description | | ----------- | -------- | ------ | ------------------------------------ | | size | number | 24 | Taille (largeur et hauteur) | | width | number | - | Largeur (override size) | | height | number | - | Hauteur (override size) | | className | string | - | Classes CSS | | ...props | - | - | Toutes les props SVG sont supportées |

<MadeBySolarBeam />

Badge "Made by Solar Beam" pour les footers de sites clients.

| Prop | Type | Défaut | Description | | ----------- | ---------------------- | --------------------------- | -------------------------------------- | | size | "sm" \| "md" \| "lg" | "md" | Taille du badge | | href | string | "https://solarbeam.studio"| Lien de destination | | className | string | - | Classes CSS | | ...props | - | - | Toutes les props <a> sont supportées |

Personnalisation de la couleur

Les composants utilisent currentColor, ce qui permet de changer la couleur via CSS :

// Via style inline
<SolarBeamLogo style={{ color: "#ff6b00" }} />

// Via Tailwind CSS
<SolarBeamPicto className="text-orange-500" />

// Via CSS classique
<SolarBeamLogo className="logo" />
// .logo { color: #ff6b00; }

Exemples

// Logo dans une navbar
<nav>
  <SolarBeamLogo height={32} className="text-white" />
</nav>

// Picto comme favicon ou icône
<SolarBeamPicto size={16} />

// Logo responsive
<SolarBeamLogo
  height={40}
  className="hidden md:block"
/>
<SolarBeamPicto
  size={32}
  className="md:hidden"
/>

// Badge dans un footer
<footer>
  <MadeBySolarBeam size="sm" className="text-gray-500" />
</footer>

Peer Dependencies

• react >= 18
• react-dom >= 18

License

MIT