spb/job-ka

1// -----------------------------------------------------------------------------2// Groupe KA — iconographie partagée (portée depuis Immo-Ka)3// Auteur : Simon-Pierre Boucher — contact@spboucher.ai4// components/Icons.tsx : iconographie MAISON — traits 1,7 px sur grille 24,5//   dessinée pour les plateformes Groupe KA (zéro emoji, zéro pack générique). Chaque icône est6//   un tracé « stroke » net qui hérite de la couleur du texte (currentColor).7// -----------------------------------------------------------------------------8import { ReactNode } from "react";910const P: Record<string, ReactNode> = {11  // --- navigation -----------------------------------------------------------12  home: (<>13    <path d="M3.5 10.6 12 3.4l8.5 7.2" />14    <path d="M5.6 9.4V20h12.8V9.4" />15    <path d="M10 20v-5.6h4V20" />16  </>),17  map: (<>18    <path d="M3.2 6.4 9 4.2l6 2.2 5.8-2.2v13.4L15 19.8l-6-2.2-5.8 2.2z" />19    <path d="M9 4.2v13.4M15 6.4v13.4" />20  </>),21  chart: (<>22    <path d="M4 20h16" />23    <path d="M7.2 20v-5.6M12 20V8.8M16.8 20V12" />24  </>),25  building: (<>26    <path d="M5 20V5.6A1.6 1.6 0 0 1 6.6 4h6.2a1.6 1.6 0 0 1 1.6 1.6V20" />27    <path d="M14.4 9.4h3.4A1.6 1.6 0 0 1 19.4 11v9" />28    <path d="M3.2 20h17.6" />29    <path d="M8 8h2.4M8 11.6h2.4M8 15.2h2.4M16.4 13h.9M16.4 16.2h.9" />30  </>),3132  // --- specs propriété --------------------------------------------------------33  bed: (<>34    <path d="M3.4 6.8V18.6" />35    <path d="M3.4 15.4h17.2v3.2" />36    <path d="M3.4 12.2h6.2v3.2" />37    <circle cx="6.5" cy="9.9" r="1.35" />38    <path d="M11.4 12.2h5.8a3.4 3.4 0 0 1 3.4 3.2" />39  </>),40  bath: (<>41    <path d="M3.6 12.4h16.8v1.4a5.2 5.2 0 0 1-5.2 5.2H8.8a5.2 5.2 0 0 1-5.2-5.2z" />42    <path d="M5.8 12.4V5.9a2.1 2.1 0 0 1 4-1" />43    <path d="m7 19.4-1 2.1M17 19.4l1 2.1" />44  </>),45  drop: (<>46    <path d="M12 3.6s6 6.4 6 10.6a6 6 0 1 1-12 0C6 10 12 3.6 12 3.6z" />47    <path d="M9.4 14.2a2.7 2.7 0 0 0 2 2.6" />48  </>),49  area: (<>50    <path d="M4.4 19.6 19.6 4.4" />51    <path d="M4.4 14v5.6H10" />52    <path d="M19.6 10V4.4H14" />53  </>),54  land: (<>55    <path d="M4.4 9.6v9.8M9.5 9.6v9.8M14.5 9.6v9.8M19.6 9.6v9.8" />56    <path d="M3 12.6h18M3 16.4h18" />57    <path d="M4.4 9.6 12 5.2l7.6 4.4" />58  </>),59  calendar: (<>60    <rect x="4" y="5.6" width="16" height="14.8" rx="2" />61    <path d="M4 10.2h16M8.2 3.4v4M15.8 3.4v4" />62  </>),63  tag: (<>64    <path d="m12.9 3.6 7.5 7.5a1.8 1.8 0 0 1 0 2.5l-6.8 6.8a1.8 1.8 0 0 1-2.5 0L3.6 12.9V3.6z" />65    <circle cx="8" cy="8" r="1.5" />66  </>),67  camera: (<>68    <rect x="3.4" y="7" width="17.2" height="13" rx="2" />69    <path d="M8.6 7 10 4.4h4L15.4 7" />70    <circle cx="12" cy="13.2" r="3.4" />71  </>),7273  // --- actions / états ----------------------------------------------------------74  search: (<>75    <circle cx="10.6" cy="10.6" r="6.2" />76    <path d="m15.3 15.3 5.3 5.3" />77  </>),78  arrow: (<>79    <path d="M4 12h15.2" />80    <path d="m13.8 6.4 5.4 5.6-5.4 5.6" />81  </>),82  check: (<path d="m5 12.8 4.3 4.4L19 7.4" />),83  alert: (<>84    <path d="M12 4.2 2.9 19.4h18.2z" />85    <path d="M12 10.2v4.4" />86    <path d="M12 17.4v.05" />87  </>),88  phone: (<path d="M5.2 4h3.6L10.4 8.4 8.3 10.1a12.5 12.5 0 0 0 5.6 5.6l1.7-2.1 4.4 1.6v3.6a1.8 1.8 0 0 1-1.9 1.8A16.4 16.4 0 0 1 3.4 5.9 1.8 1.8 0 0 1 5.2 4z" />),89  trendup: (<>90    <path d="m3.6 17.4 6-6.4 4 3.6 6.8-7.8" />91    <path d="M15.6 6.8h4.8v4.8" />92  </>),93  trenddown: (<>94    <path d="m3.6 6.8 6 6.4 4-3.6 6.8 7.8" />95    <path d="M15.6 17.4h4.8v-4.8" />96  </>),97  external: (<>98    <path d="M14.4 4h5.6v5.6" />99    <path d="M20 4 11.4 12.6" />100    <path d="M18.6 13.6V18a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V7.4a2 2 0 0 1 2-2h4.4" />101  </>),102  pin: (<>103    <path d="M12 21.2S5.4 15.7 5.4 10.8a6.6 6.6 0 0 1 13.2 0c0 4.9-6.6 10.4-6.6 10.4z" />104    <circle cx="12" cy="10.6" r="2.3" />105  </>),106  download: (<>107    <path d="M12 3.6v11.2" />108    <path d="m7.2 10.4 4.8 4.8 4.8-4.8" />109    <path d="M4.4 19.2h15.2" />110  </>),111112  // --- quartier ---------------------------------------------------------------------113  leaf: (<>114    <path d="M5 19.2C5 9.6 12 5 20 4.2c0 9-4.2 15-13.2 15z" />115    <path d="M5 19.2C7 14 11 10 15 8" />116  </>),117  thermo: (<>118    <path d="M10.4 4.2a1.9 1.9 0 0 1 3.8 0v8.8a4.2 4.2 0 1 1-3.8 0z" />119    <path d="M12.3 8.4v7" />120  </>),121  sun: (<>122    <circle cx="12" cy="12" r="4.2" />123    <path d="M12 3.2v2M12 18.8v2M3.2 12h2M18.8 12h2M5.8 5.8l1.4 1.4M16.8 16.8l1.4 1.4M18.2 5.8l-1.4 1.4M7.2 16.8l-1.4 1.4" />124  </>),125  shield: (<>126    <path d="M12 3.4 5.2 5.9v5.9c0 4.6 3 7.6 6.8 8.8 3.8-1.2 6.8-4.2 6.8-8.8V5.9z" />127    <path d="m9.2 12 2 2 3.8-4" />128  </>),129  cart: (<>130    <circle cx="9.6" cy="19.6" r="1.35" />131    <circle cx="17" cy="19.6" r="1.35" />132    <path d="M3.4 4.4h2.2l2.5 10.8h9.6l2.7-7.8H7" />133  </>),134  bus: (<>135    <rect x="4.6" y="3.8" width="14.8" height="13.4" rx="2.4" />136    <path d="M4.6 10.4h14.8" />137    <path d="M7.6 20.2v-3M16.4 20.2v-3" />138    <path d="M8.3 14h.05M15.7 14h.05" />139  </>),140  tree: (<>141    <path d="M12 3.4 6.8 11.4h2.8L5.4 17.8h13.2l-4.2-6.4h2.8z" />142    <path d="M12 17.8v3.4" />143  </>),144  school: (<>145    <path d="m12 4.2 9.8 4.4L12 13 2.2 8.6z" />146    <path d="M6.6 10.8v5c0 1.6 2.4 3 5.4 3s5.4-1.4 5.4-3v-5" />147    <path d="M21.8 8.6v5.4" />148  </>),149  health: (<>150    <circle cx="12" cy="12" r="8.4" />151    <path d="M12 8.4v7.2M8.4 12h7.2" />152  </>),153  pill: (<>154    <rect x="3.2" y="8.6" width="17.6" height="6.8" rx="3.4" transform="rotate(-33 12 12)" />155    <path d="M12 8.6v6.8" transform="rotate(-33 12 12)" />156  </>),157  people: (<>158    <circle cx="9" cy="8" r="3.2" />159    <path d="M3.6 20a5.4 5.4 0 0 1 10.8 0" />160    <path d="M15.4 5.4a3.2 3.2 0 0 1 0 5.9M17 14.8a5.4 5.4 0 0 1 3.4 5.2" />161  </>),162163  // --- fiche propriété (refonte premium 2026-09-07) — même trait 1,7, grille 24 ---164  chevdown: <path d="m6 9 6 6 6-6" />,165  chevleft: <path d="m14.5 5-7 7 7 7" />,166  chevright: <path d="m9.5 5 7 7-7 7" />,167  close: <path d="M18 6 6 18M6 6l12 12" />,168  expand: <path d="M15 3.5h5.5V9M9 20.5H3.5V15M20.5 3.5l-7 7M3.5 20.5l7-7" />,169  share: (<>170    <circle cx="18" cy="5" r="2.5" /><circle cx="6" cy="12" r="2.5" /><circle cx="18" cy="19" r="2.5" />171    <path d="M8.2 10.8 15.8 6.3M8.2 13.2l7.6 4.5" />172  </>),173  sparkles: (<>174    <path d="M12 3l1.9 5.6 5.6 1.9-5.6 1.9L12 18l-1.9-5.6-5.6-1.9 5.6-1.9L12 3z" />175    <path d="M19 16l.8 2.2 2.2.8-2.2.8L19 22l-.8-2.2-2.2-.8 2.2-.8L19 16z" />176  </>),177  scale: <path d="M12 3v18M5 21h14M12 6l7 2-3 7h-4M12 6 5 8l3 7h4" />,178  wallet: (<>179    <path d="M3 7a2 2 0 0 1 2-2h13v4" />180    <rect x="3" y="7" width="18" height="12" rx="2" />181    <path d="M16 13h.01" />182  </>),183  droplets: <path d="M12 3s-6 6.5-6 10.5a6 6 0 0 0 12 0C18 9.5 12 3 12 3z" />,184  wind: (<>185    <path d="M3 8h10a3 3 0 1 0-3-3" />186    <path d="M3 12h15a3 3 0 1 1-3 3" />187    <path d="M3 16h7" />188  </>),189  fuel: (<>190    <path d="M4 21V5a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v16" />191    <path d="M3 21h12M6 8h6" />192    <path d="M14 10h2a2 2 0 0 1 2 2v5a1.5 1.5 0 0 0 3 0V9l-2.5-2.5" />193  </>),194  train: (<>195    <rect x="4" y="3" width="16" height="14" rx="3" />196    <path d="M4 11h16M8 21l2-4M16 21l-2-4M9 7h6" />197    <path d="M8.5 14h.01M15.5 14h.01" />198  </>),199  folder: <path d="M3 6h6l2 2.5h10V19H3z" />,200  doc: (<>201    <path d="M6 3h8l4 4v14H6z" />202    <path d="M14 3v4h4" />203    <path d="M9 12h6M9 15.5h6" />204  </>),205  layers: (<>206    <path d="m12 3 9 5-9 5-9-5 9-5z" /><path d="m3 13 9 5 9-5M3 17.5l9 5 9-5" />207  </>),208  info: (<>209    <circle cx="12" cy="12" r="9" /><path d="M12 11v5M12 8h.01" />210  </>),211  ruler: (<>212    <path d="M3.5 16 16 3.5l4.5 4.5L8 20.5 3.5 16z" />213    <path d="M7.5 16l1.5 1.5M10.5 13l1.5 1.5M13.5 10l1.5 1.5M16.5 7 18 8.5" />214  </>),215  key: (<>216    <circle cx="8" cy="15" r="4.5" />217    <path d="m11.2 11.8 8.3-8.3M15.5 7.5l3 3M18 5l2 2" />218  </>),219  bank: (<>220    <path d="m3 9.5 9-5.5 9 5.5H3z" />221    <path d="M5 9.5v8M9.7 9.5v8M14.3 9.5v8M19 9.5v8M3.5 20.5h17" />222  </>),223  percent: (<>224    <path d="M19 5 5 19" /><circle cx="7" cy="7" r="2.5" /><circle cx="17" cy="17" r="2.5" />225  </>),226  car: (<>227    <path d="M4 16v-4.5l2-5A1.6 1.6 0 0 1 7.5 5.5h9a1.6 1.6 0 0 1 1.5 1l2 5V16" />228    <path d="M3 16h18M6.2 16v2.6M17.8 16v2.6M4.5 11.5h15" />229    <path d="M7.5 13.8h.01M16.5 13.8h.01" />230  </>),231  hammer: (<>232    <path d="m14.5 3.5 6 6-2.5 2.5-6-6z" />233    <path d="M13 8 4.5 16.5a1.8 1.8 0 0 0 2.5 2.5L15.5 10.5" />234  </>),235  store: (<>236    <path d="M3 9 5 4h14l2 5M3 9h18v3a2.5 2.5 0 0 1-5 0 2.5 2.5 0 0 1-5 0 2.5 2.5 0 0 1-5 0 2.5 2.5 0 0 1-3 2.4V9z" />237    <path d="M5 14v6h14v-6M10 20v-4h4v4" />238  </>),239  coffee: <path d="M4 9h12v6a4 4 0 0 1-4 4H8a4 4 0 0 1-4-4V9zM16 10h2a2.5 2.5 0 0 1 0 5h-2M7 3v3M11 3v3" />,240  book: (<>241    <path d="M4 5a2 2 0 0 1 2-2h13v16H6a2 2 0 0 0-2 2V5z" />242    <path d="M4 19a2 2 0 0 0 2 2h13" />243  </>),244  dumbbell: <path d="M6.7 6.7v10.6M17.3 6.7v10.6M3.5 9.2v5.6M20.5 9.2v5.6M6.7 12h10.6" />,245  baby: (<>246    <circle cx="12" cy="9" r="5" />247    <path d="M7 20a5 5 0 0 1 10 0M10 8.5h.01M14 8.5h.01M10.5 11.5c.8.7 2.2.7 3 0" />248  </>),249  history: (<>250    <path d="M3.5 12a8.5 8.5 0 1 0 2.5-6" />251    <path d="M3.5 4v4h4M12 7.5V12l3 2" />252  </>),253};254255export type IconName = keyof typeof P;256257export function Ico({ name, size = 18, className = "", stroke = 1.7 }:258  { name: IconName | string; size?: number; className?: string; stroke?: number }) {259  const paths = P[name as IconName];260  if (!paths) return null;261  return (262    <svg263      className={`ico ${className}`}264      width={size} height={size} viewBox="0 0 24 24"265      fill="none" stroke="currentColor" strokeWidth={stroke}266      strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"267    >268      {paths}269    </svg>270  );271}272273/** Cœur (favoris) — plein quand actif ; même grille que le reste. */274export function IcoHeart({ size = 18, filled = false, className = "" }:275  { size?: number; filled?: boolean; className?: string }) {276  return (277    <svg className={`ico ${className}`} width={size} height={size} viewBox="0 0 24 24"278         fill={filled ? "currentColor" : "none"} stroke="currentColor" strokeWidth={1.7}279         strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">280      <path d="M12 20.5C7 16.5 3.5 13 3.5 9.3 3.5 6.8 5.5 5 7.8 5c1.7 0 3.2 1 4.2 2.6C13 6 14.5 5 16.2 5c2.3 0 4.3 1.8 4.3 4.3 0 3.7-3.5 7.2-8.5 11.2z" />281    </svg>282  );283}284285/** Version « chaîne HTML » pour les popups MapLibre (hors React). */286export function icoHTML(name: IconName, size = 30): string {287  const d: Record<string, string> = {288    home: '<path d="M3.5 10.6 12 3.4l8.5 7.2"/><path d="M5.6 9.4V20h12.8V9.4"/><path d="M10 20v-5.6h4V20"/>',289  };290  return `<svg width="${size}" height="${size}" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round">${d[name] ?? d.home}</svg>`;291}292