React Native SVG Preview
한국어 | English
한국어
React Native TSX 파일에서 SVG 컴포넌트를 미리보기할 수 있는 VSCode 확장 프로그램입니다.
✨ 주요 기능
- 🎨 미니 SVG 프리뷰: Explorer 패널 하단에 작은 SVG 미리보기 박스
- 🔄 실시간 업데이트: 코드 편집 시 자동으로 미리보기 업데이트
- 📱 전체 미리보기: 새 탭에서 상세한 SVG 미리보기
- 🌍 다국어 지원: 한국어/영어 자동 지원
- 🎭 테마 연동: VSCode 테마 색상과 완벽 연동
🎯 지원하는 SVG 컴포넌트
Svg - 기본 SVG 컨테이너
Circle - 원형
Rect - 사각형
Path - 경로
Ellipse - 타원
Line - 직선
Polygon - 다각형
Polyline - 폴리라인
Text - 텍스트
G - 그룹
- 기타 React Native SVG 컴포넌트들
📋 사용법
미니 프리뷰 (새로운 기능!)
- React Native 프로젝트에서
.tsx 파일을 엽니다
- Explorer 패널 하단에 "SVG Preview" 박스가 자동으로 나타납니다
- SVG 컴포넌트가 있는 파일을 편집하면 실시간으로 업데이트됩니다
전체 미리보기
- 파일 탐색기에서 파일을 우클릭하거나 편집기에서 우클릭합니다
- "Preview SVG" 메뉴를 선택합니다
- 새 패널에서 SVG 컴포넌트들의 상세 미리보기를 확인합니다
🚀 설치 및 개발
# 의존성 설치
npm install
# TypeScript 컴파일
npm run compile
# Watch 모드로 컴파일
npm run watch
# 패키징
npm run package
📋 요구사항
- VSCode 1.74.0 이상
- React Native SVG 라이브러리를 사용하는 프로젝트
English
A VSCode extension for previewing SVG components in React Native TSX files.
✨ Key Features
- 🎨 Mini SVG Preview: Small SVG preview box at the bottom of Explorer panel
- 🔄 Real-time Updates: Automatic preview updates when editing code
- 📱 Full Preview: Detailed SVG preview in new tab
- 🌍 Multi-language: Automatic Korean/English support
- 🎭 Theme Integration: Perfect integration with VSCode theme colors
🎯 Supported SVG Components
Svg - Basic SVG container
Circle - Circle
Rect - Rectangle
Path - Path
Ellipse - Ellipse
Line - Line
Polygon - Polygon
Polyline - Polyline
Text - Text
G - Group
- Other React Native SVG components
📋 Usage
Mini Preview (New Feature!)
- Open a
.tsx file in your React Native project
- The "SVG Preview" box will automatically appear at the bottom of Explorer panel
- Edit files with SVG components and see real-time updates
Full Preview
- Right-click on a file in the file explorer or in the editor
- Select "Preview SVG" from the menu
- View detailed preview of SVG components in a new panel
🚀 Installation & Development
# Install dependencies
npm install
# Compile TypeScript
npm run compile
# Compile in watch mode
npm run watch
# Package extension
npm run package
📋 Requirements
- VSCode 1.74.0 or higher
- Project using React Native SVG library
📄 License
MIT
| |