Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

181
Visualizações
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 à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda