VibeKit
Design

SVG 변환

SVG를 미리 보고 최적화하거나 PNG와 React 컴포넌트로 변환합니다.

Vibe Ready
01

SVG Code

위험한 script와 event 속성은 제거됩니다.

02

안전한 미리보기

코드를 DOM에 직접 실행하지 않아요.

SVG 미리보기
React Componenttsx
import type { SVGProps } from "react";

export function Icon(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg"><rect x="12" y="12" width="96" height="96" rx="24" fill="#111827"/><path d="M38 61l14 14 31-34" fill="none" stroke="#ff5c35" strokeWidth="10" strokeLinecap="round"/></svg>
  );
}
APPLY WITH AI

이 결과를 내 프로젝트에 적용하기

입력 내용은 전송되지 않아요
사용 도구
프레임워크
적용 프롬프트
현재 프로젝트 구조를 먼저 분석해줘.

## 목표
SVG Tool에서 만든 결과를 현재 프로젝트에 적용해줘.

## 환경
- AI 도구: Codex
- 프레임워크: Auto

## 요구사항
- 기존 디자인과 기능은 변경하지 말 것
- 기존 설정과 충돌 여부를 먼저 확인할 것
- 생성 결과의 파일 경로와 참조 경로가 일치하는지 확인할 것
- 현재 프레임워크의 권장 방식을 따를 것

## 제약사항
- 불필요한 리팩터링 금지
- 새로운 dependency 최소화
- 민감한 값을 코드나 저장소에 포함하지 말 것

## 검증
- TypeScript 오류 확인
- build 실행
- 적용 결과와 변경 파일을 설명할 것
QUICK GUIDE

사용 전 알아두세요

SVG 코드가 실행되나요?

script, event handler, 위험한 URL 속성을 제거한 뒤 이미지로만 미리 보여줍니다.

React 변환 결과는 바로 쓸 수 있나요?

기본 JSX 속성을 변환해 주며, 프로젝트의 아이콘 규칙과 접근성 속성은 적용 전에 확인하는 것이 좋습니다.