SVG para React Component

Converta código SVG em um componente React com props para cor e tamanho.

Nome do Componente

SVG

Componente React

import React from "react";

function IconComponent({ size = 24, color = "currentColor", ...props }) {
  return (
    <svg width={size} height={size} fill="none" stroke={color} {...props} viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" strokeWidth="2"><circle cx="12" cy="12" r="10"/><path d="M12 8v4M12 16h.01"/></svg>
  );
}

export default IconComponent;

O que é esta ferramenta?

Converta código SVG em um componente React com props para cor e tamanho.

Como funciona?

O conversor adapta atributos SVG (stroke-width → strokeWidth) e gera um componente que aceita size, color e demais props. O SVG é copiado dentro do JSX com as props aplicadas.

Dicas de uso

O nome do componente deve começar com letra maiúscula (PascalCase).
Use size para controlar dimensões e color para a cor do ícone.

SVG para React Component

O que é esta ferramenta?

Como funciona?

Dicas de uso

Perguntas Frequentes