104 lines
2.6 KiB
Markdown
104 lines
2.6 KiB
Markdown
# 📁 Logos Directory
|
|
|
|
Ce dossier contient les fichiers de logo pour l'application Thé Tip Top.
|
|
|
|
## 📝 Instructions pour ajouter votre logo
|
|
|
|
### Étape 1 : Préparer votre logo
|
|
|
|
Placez vos fichiers de logo dans ce dossier. Formats recommandés :
|
|
|
|
1. **logo.svg** - Format vectoriel (recommandé)
|
|
- Taille : Scalable
|
|
- Avantages : Qualité parfaite à toutes les tailles, fichier léger
|
|
|
|
2. **logo.png** - Format PNG avec fond transparent
|
|
- Taille recommandée : 500x500px minimum
|
|
- Avantages : Compatible partout, fond transparent
|
|
|
|
3. **logo-white.svg** ou **logo-white.png** - Version blanche pour le footer
|
|
- Pour affichage sur fond sombre
|
|
|
|
### Étape 2 : Nommer vos fichiers
|
|
|
|
```
|
|
public/logos/
|
|
├── logo.svg # Logo principal (couleur)
|
|
├── logo.png # Alternative PNG
|
|
├── logo-white.svg # Logo blanc pour footer
|
|
├── logo-icon.svg # Icône seule (favicon)
|
|
└── README.md # Ce fichier
|
|
```
|
|
|
|
### Étape 3 : Le code est déjà configuré !
|
|
|
|
Les fichiers Header.tsx et Footer.tsx sont déjà configurés pour utiliser automatiquement votre logo.
|
|
|
|
Le système utilise :
|
|
- `logo.svg` si disponible (priorité)
|
|
- `logo.png` en alternative
|
|
- 🍵 Emoji par défaut si aucun logo
|
|
|
|
### Formats de fichier acceptés
|
|
|
|
- ✅ SVG (recommandé) - Scalable, léger
|
|
- ✅ PNG - Avec transparence
|
|
- ✅ WEBP - Format moderne
|
|
- ⚠️ JPG - Moins recommandé (pas de transparence)
|
|
|
|
### Dimensions recommandées
|
|
|
|
**Logo principal (Header):**
|
|
- Largeur : 150-200px
|
|
- Hauteur : 40-60px
|
|
- Format : Horizontal ou carré
|
|
|
|
**Logo footer:**
|
|
- Largeur : 120-150px
|
|
- Hauteur : 40-50px
|
|
|
|
**Favicon/Icon:**
|
|
- 512x512px (carré)
|
|
- Format : SVG ou PNG
|
|
|
|
## 🎨 Exemple de création rapide
|
|
|
|
Si vous n'avez pas encore de logo, vous pouvez :
|
|
|
|
1. **Créer un SVG simple** avec un éditeur comme :
|
|
- Figma (gratuit)
|
|
- Canva (gratuit)
|
|
- Inkscape (gratuit, open-source)
|
|
|
|
2. **Utiliser un générateur** en ligne :
|
|
- Canva Logo Maker
|
|
- Looka
|
|
- Hatchful by Shopify
|
|
|
|
3. **Commander un logo** sur :
|
|
- Fiverr
|
|
- 99designs
|
|
- Upwork
|
|
|
|
## 🔧 Comment vérifier si ça fonctionne
|
|
|
|
1. Placez votre logo dans ce dossier
|
|
2. Rafraîchissez la page (F5)
|
|
3. Le logo devrait apparaître dans le Header et Footer
|
|
|
|
Si vous voyez toujours 🍵, vérifiez :
|
|
- Le nom du fichier (logo.svg ou logo.png)
|
|
- Le chemin (/public/logos/logo.svg)
|
|
- La console du navigateur pour les erreurs
|
|
|
|
## 💡 Astuce
|
|
|
|
Pour un meilleur rendu, utilisez un logo SVG optimisé :
|
|
```bash
|
|
# Installer SVGO pour optimiser votre SVG
|
|
npm install -g svgo
|
|
|
|
# Optimiser votre logo
|
|
svgo logo.svg -o logo-optimized.svg
|
|
```
|