Comment charger des icônes aléatoires à chaque chargement de React

Question

Existe-t-il un moyen dans React de charger aléatoirement une nouvelle icône à chaque rechargement de la page ? Je souhaite avoir une liste d’icônes et en sélectionner une au hasard à chaque chargement de la page.

Dans manifest.json, l'icône se charge comme ceci :

"icons": [
    {
      "src": "favicon.ico",
      "sizes": "64x64 32x32 24x24 16x16",
      "type": "image/x-icon"
    },
    {
      "src": "logo192.png",
      "type": "image/png",
      "sizes": "192x192"
    },
    {
      "src": "logo512.png",
      "type": "image/png",
      "sizes": "512x512"
    }
  ],

Existe-t-il un moyen raisonnable de sélectionner au hasard une icône parmi un ensemble d'icônes ?

Answer 1

Vous pouvez créer un tableau d'icônes et utiliser la fonction Math.random() de JavaScript pour sélectionner aléatoirement une icône dans le tableau. Référence ici :

import React, { useEffect } from 'react';

const icons = [
  'favicon1.ico',
  'favicon2.ico',
  'favicon3.ico',
  // add more icons here
];

function App() {
  useEffect(() => {
    const randomIcon = icons[Math.floor(Math.random() * icons.length)];
    const link = document.querySelector("link[rel~='icon']");
    link.href = randomIcon;
  }, []);

  return (
    <div>
      {/* your app content */}
    </div>
  );
}

export default App;

Dans l'exemple ci-dessus, le hook useEffect consiste à exécuter du code lorsque le composant est installé. Nous utilisons Math.random() pour sélectionner une icône aléatoire dans le tableau d'icônes et mettre à jour l'icône en modifiant l'attribut href de l'étiquette.