SVG STUDIO & REACT ICON CONVERTER

Optimalkan kode SVG mentah, bersihkan tag dan metadata berlebih, lakukan pratinjau live di berbagai ukuran, dan konversikan secara instan ke komponen React JSX/TSX siap pasang.

Quick Presets:

Raw SVG Input

Original: 226 B-3% Saved

React Component Name

Language Format

Interactive Canvas

Canvas Size64px

Color OverrideCustom

import React from 'react';

export default function TerminalIcon({
  size = 24,
  color = 'currentColor',
  className = '',
  ...props
}) {
  return (
    <svg
      width={size}
      height={size}
      viewBox="0 0 24 24"
      fill="none"
      stroke={color}
      className={className}
      xmlns="http://www.w3.org/2000/svg"
      {...props}
    >
      <polyline points="4 17 10 11 4 5">
      </polyline>
      <line x1="12" y1="19" x2="20" y2="19">
      </line>
    </svg>
  );
}

Zero-Dependency React

Menghasilkan komponen JSX / TSX murni tanpa memerlukan library icon pihak ketiga. Siap digunakan di Next.js App Router maupun Vite.

Automatic Attribute Mapping

Secara otomatis menerjemahkan puluhan atribut kebab-case seperti stroke-width dan fill-rule ke standar camelCase React untuk mencegah warning konsol.

Stripped & Minified

Membersihkan metadata Illustrator, komentar XML, namespace sketch, dan whitespace yang tidak berguna untuk menghemat bandwidth website.