Définition de nos conventions sur les images utilisés

[Bluzzi]

Icon

Un icon, c'est uniquement une petite image qui permet d'illustrer une action sur un bouton par exemple.

Pour les icons, il faudrait qu'on utilise uniquement des SVG et qu'on créé notre propre collection (en les prenant d'une collection existante), directement dans #/lib/components/icons/index.ts.

Chaque icon devrait utilisé un même type pour leur props qui permettrait de customiser leur couleurs à partir de notre palette Tailwind. Il faudrait aussi pouvoir changer la taille et d'autres props.

Voici quelques collection d'icons qu'on pourrait utiliser :

• https://lucide.dev/icons
• https://www.svgrepo.com

Logo

Un logo, c'est un logo d'une entreprise, d'une technologie utilisé ou encore notre propre logo. Il devrait être mis dans le dossier ~/public/logos/.

Image

Pour toutes les autres images quelconque. Stocker dans le dossier ~/public/images.

[Bluzzi]

Donc typiquement il faudrait au passage refactor ce genre de config :

import type { Speciality } from "./speciality.type";

export const specialities: Speciality[] = [
  {
    title: "Svelte",
    description: "Nous avons des spécialistes qui adorent travailler avec cette technologie du futur !",
    icon: "svelte.png"
  },
  {
    title: "React",
    description: "Nous avons des professionnels du domaine qui sauront vous aider dans n'importe quel contexte !",
    icon: "react.png"
  },
  {
    title: "Supabase",
    description: "Ce n'est pas qu'une base de données mais une plateforme qui révolutionne ce que nous connaissons !",
    icon: "supabase.png"
  }
];

En remplaçant donc "icon" par "logo".