Información de fondo:
Estoy usando react y Ant Design .
Para mantener el código limpio, completo los elementos del menú de una matriz const, así:
const menuItems = [ { label: "Home", path: "/home" }, { label: "Accounts", path: "/accounts" }, { label: "Organizations", path: "/organizations" }, ];Cada elemento de la matriz es un objeto que contiene una etiqueta y una ruta de redireccionamiento. Mapeo sobre los elementos al renderizar. Muy basico.
Problema:
Me gustaría incluir un componente de icono antd en la matriz menuItems para que el icono se pueda representar junto a la etiqueta. Pero no puedo encontrar una manera de hacer referencia a los íconos por una cadena de nombre
Mi problema es como este problema, pero es un diseño de hormigas. Representación de íconos de Material-UI de una matriz
¿Alguna sugerencia sobre cómo hacer esto? Gracias
puede modificar sus elementos de menú a algo como esto:
const menuItems = [ { label: "Home", path: "/home", icon: <span class="custom-icon" /> }, { label: "Accounts", path: "/accounts", icon: <span class="custom-icon" /> }, { label: "Organizations", path: "/organizations", icon: <span class="custom-icon" /> } ]; y en lugar de usar span con la clase de custom-icon , puede usar cualquier ícono que desee y luego representarlo en consecuencia