https://chiledeportes.cl/js/icons.js?v=1a0d595d

1/**
2 * Iconografía propia de ChileDeportes.
3 *
4 * Reemplaza los emoji que rotulaban los módulos. El emoji lo dibuja el sistema
5 * operativo: el mismo rótulo se veía distinto en Windows, en Android y en un
6 * iPhone, y ninguna de las tres versiones era la nuestra.
7 *
8 * Reglas del set:
9 *  - Trazo monolineal de 1.75 sobre lienzo de 24, sin relleno.
10 *  - `currentColor` siempre: el icono hereda el color de la disciplina que
11 *    rotula, así una sola variable manda sobre texto e icono.
12 *  - Alineado con `vertical-align`, no con márgenes, para no empujar el alto
13 *    de la fila que lo contiene.
14 *
15 * No es el set de ChileNoticias: aquí mandan las disciplinas, y los iconos de
16 * aquel sitio (farmacias, metro, sismos) no pintan nada en un portal deportivo.
17 */
18
19const TRAZOS = {
20  // Deporte
21  balon: '<circle cx="12" cy="12" r="9"/><path d="m12 7.2 4.3 3.1-1.6 5h-5.4l-1.6-5L12 7.2Z"/><path d="M12 3v4.2M3.4 10.3l4.3 3M20.6 10.3l-4.3 3M6.9 20l2.4-4.7M17.1 20l-2.4-4.7"/>',
22  trofeo: '<path d="M8 3.5h8v5a4 4 0 0 1-8 0v-5Z"/><path d="M8 5H5.5v1.5A3 3 0 0 0 8 9.4M16 5h2.5v1.5A3 3 0 0 1 16 9.4"/><path d="M12 12.5v3.5M8.5 20.5h7l-1-4.5h-5l-1 4.5Z"/>',
23  raqueta: '<ellipse cx="13.5" cy="8.5" rx="5.5" ry="6.5" transform="rotate(35 13.5 8.5)"/><path d="m9 14-5 6M6.2 16.4l2.6 2.2"/>',
24  cancha: '<rect x="2.5" y="5" width="19" height="14" rx="1.5"/><path d="M12 5v14"/><circle cx="12" cy="12" r="2.6"/><path d="M2.5 9h3v6h-3M21.5 9h-3v6h3"/>',
25  globo: '<circle cx="12" cy="12" r="9"/><path d="M3.2 9.5h17.6M3.2 14.5h17.6"/><path d="M12 3a14 14 0 0 1 0 18A14 14 0 0 1 12 3Z"/>',
26  estadio: '<path d="M3 8.5c0-1.9 4-3.5 9-3.5s9 1.6 9 3.5-4 3.5-9 3.5-9-1.6-9-3.5Z"/><path d="M3 8.5v7c0 1.9 4 3.5 9 3.5s9-1.6 9-3.5v-7"/>',
27  television: '<rect x="2.5" y="7" width="19" height="13" rx="2"/><path d="m8 3 4 4 4-4"/>',
28
29  // Interfaz
30  calendario: '<rect x="3" y="5" width="18" height="16" rx="2"/><path d="M3 10h18M8 3v4M16 3v4"/>',
31  reloj: '<circle cx="12" cy="12" r="9"/><path d="M12 7v5.2l3.4 2"/>',
32  rayo: '<path d="M13 2 4.5 13.5H11L10 22l8.5-11.5H12L13 2Z"/>',
33  buscar: '<circle cx="11" cy="11" r="7"/><path d="m20 20-3.6-3.6"/>',
34  lugar: '<path d="M12 21s7-5.5 7-11a7 7 0 1 0-14 0c0 5.5 7 11 7 11Z"/><circle cx="12" cy="10" r="2.5"/>',
35  sobre: '<rect x="2.5" y="5" width="19" height="14" rx="2"/><path d="m3 7 9 6 9-6"/>',
36  sol: '<circle cx="12" cy="12" r="4.2"/><path d="M12 2v2.4M12 19.6V22M2 12h2.4M19.6 12H22M4.9 4.9l1.7 1.7M17.4 17.4l1.7 1.7M19.1 4.9l-1.7 1.7M6.6 17.4l-1.7 1.7"/>',
37  luna: '<path d="M20 14.5A8.5 8.5 0 0 1 9.5 4a8.5 8.5 0 1 0 10.5 10.5Z"/>',
38  altavoz: '<path d="M3.5 9.5v5h4l6 4.5v-14l-6 4.5h-4Z"/><path d="M17 8.5a5 5 0 0 1 0 7"/>',
39  reproducir: '<path d="M7 4.7v14.6L19.5 12 7 4.7Z"/>',
40  pausa: '<rect x="6.5" y="4.5" width="4" height="15" rx="1"/><rect x="13.5" y="4.5" width="4" height="15" rx="1"/>',
41  detener: '<rect x="5.5" y="5.5" width="13" height="13" rx="2"/>',
42  refrescar: '<path d="M20.5 12a8.5 8.5 0 1 1-2.6-6.1"/><path d="M20.8 4.2v5h-5"/>',
43  calculadora: '<rect x="4.5" y="2.5" width="15" height="19" rx="2"/><path d="M8 6.5h8M8 11h.01M12 11h.01M16 11h.01M8 14.5h.01M12 14.5h.01M16 14.5h.01M8 18h.01M12 18h4"/>',
44  grafico: '<path d="M3.5 20.5h17"/><rect x="5" y="11" width="3.6" height="7"/><rect x="10.2" y="6.5" width="3.6" height="11.5"/><rect x="15.4" y="9" width="3.6" height="9"/>',
45  idea: '<path d="M9.2 17.5a6.5 6.5 0 1 1 5.6 0v1.7a1.5 1.5 0 0 1-1.5 1.5h-2.6a1.5 1.5 0 0 1-1.5-1.5v-1.7Z"/><path d="M9.6 17.5h4.8"/>',
46  documento: '<path d="M6 2.5h7.5L19 8v13.5H6V2.5Z"/><path d="M13.5 2.5V8H19M9 12.5h7M9 16h5"/>',
47  copiar: '<rect x="8.5" y="8.5" width="12" height="12" rx="2"/><path d="M15.5 5.5v-1a1 1 0 0 0-1-1h-9a1 1 0 0 0-1 1v9a1 1 0 0 0 1 1h1"/>',
48  pluma: '<path d="M16.5 3.5 20.5 7.5 8 20H4v-4L16.5 3.5Z"/><path d="m14.2 5.8 4 4"/>',
49  compartir: '<circle cx="6" cy="12" r="2.6"/><circle cx="18" cy="5.5" r="2.6"/><circle cx="18" cy="18.5" r="2.6"/><path d="m8.3 10.8 7.4-4M8.3 13.2l7.4 4"/>',
50  enlace: '<path d="M8 16 16 8"/><path d="M9.5 8H16v6.5"/>',
51  cerrar: '<path d="M5.5 5.5 18.5 18.5M18.5 5.5 5.5 18.5"/>',
52  menu: '<path d="M4 7h16M4 12h16M4 17h10"/>',
53  punto: '<circle cx="12" cy="12" r="6" fill="currentColor" stroke="none"/>',
54  arriba: '<path d="M12 19V6M6 11.5 12 5.5l6 6"/>',
55
56  // Redes
57  facebook: '<path d="M14.5 21v-8h2.8l.5-3.4h-3.3V7.4c0-1 .3-1.7 1.7-1.7h1.7V2.6A22 22 0 0 0 15.4 2.5c-2.6 0-4.4 1.6-4.4 4.5v2.6H8.2V13H11v8Z"/>',
58  chat: '<path d="M21 11.5a8 8 0 0 1-8.5 8 9 9 0 0 1-3.6-.7L3.5 21l1.6-4.5A8 8 0 0 1 12.5 3.5a8 8 0 0 1 8.5 8Z"/>',
59  avion: '<path d="M21.5 3.5 2.8 11.2l6 2.4m12.7-10.1L14.5 21l-2.4-6.6m9.4-10.9-9.4 11"/>',
60  antena: '<circle cx="5.5" cy="18.5" r="2"/><path d="M3.5 12.5a8 8 0 0 1 8 8M3.5 6.5a14 14 0 0 1 14 14"/>'
61};
62
63/** Alias para no acordarse de la palabra exacta en cada llamada. */
64const ALIAS = {
65  fecha: 'calendario', lectura: 'reloj', tiempo: 'reloj', resumen: 'rayo',
66  tabla: 'grafico', posiciones: 'grafico', goleadores: 'trofeo',
67  tenis: 'raqueta', futbol: 'balon', internacional: 'globo',
68  exterior: 'globo', canal: 'television', simulador: 'calculadora',
69  reiniciar: 'refrescar', externo: 'enlace', rss: 'antena',
70  whatsapp: 'chat', telegram: 'avion', boletin: 'sobre', estado: 'punto'
71};
72
73/**
74 * Devuelve el SVG del icono listo para interpolar en una plantilla.
75 * Un nombre desconocido devuelve cadena vacía: preferimos un rótulo sin icono
76 * antes que un cuadrado roto en la portada.
77 */
78export function icono(nombre, { tam = 16, clase = '' } = {}) {
79  const clave = ALIAS[nombre] || nombre;
80  const trazo = TRAZOS[clave];
81  if (!trazo) return '';
82  return `<svg class="ico${clase ? ` ${clase}` : ''}" width="${tam}" height="${tam}

82" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false">${trazo}</svg>`;
83}
84
85/** Los nombres disponibles, para que el QA pueda cazar un icono inventado. */
86export const NOMBRES_ICONO = Object.freeze([...Object.keys(TRAZOS), ...Object.keys(ALIAS)]);
87
88/** Cada disciplina tiene su icono; el archivo y la portada usan el genérico. */
89export function iconoDisciplina(categoria, opciones) {
90  const mapa = {
91    'Fútbol Chileno': 'cancha',
92    'Primera B': 'cancha',
93    'La Roja': 'balon',
94    'Champions League': 'trofeo',
95    'Tenis': 'raqueta',
96    'Polideportivo': 'trofeo',
97    'Internacional': 'globo'
98  };
99  return icono(mapa[categoria] || 'balon', opciones);
100}