Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

172
Vistas
How do you render SVGs using Chakra UI's Select components?

I'm trying to render different SVGs in each option component of Chakra UI's Select component but can't seem to display any images inside of the option component.

Both of the following implementations display [object Object] in the option.

import SVG from './file.svg'

// Also tried both of the following:
// import SVG from './file.tsx'
// import {ReactComponent as SVG} from './file.svg';

return (
    <Select>
      <option>
        <SVG />
      </option>
    </Select>
);
import SVG from './file.svg'

return (
    <Select>
      <option>
        <img src={SVG} alt=''/>
      </option>
    </Select>
);

The only way I was able to display SVG at all in Chakra's Select component was through the icon prop, but that would replace the dropdown icon which I do not want to do.

Let me know if there's any way I can break down or minimize the problem further.

Is there any way to customize my Select component to render SVGs with Chakra UI?

about 4 years ago · Juan Pablo Isaza
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda