React Native SVG Preview
hangugeo | English
hangugeo
React Native TSX paileseo SVG keomponeonteureul miribogihal su issneun VSCode hwagjang peurogeuraemibnida.
juyo gineung
- mini SVG peuribyu: Explorer paeneol hadane jageun SVG miribogi bagseu
- silsigan eobdeiteu: kodeu pyeonjib si jadongeuro miribogi eobdeiteu
- jeonce miribogi: sae taebeseo sangsehan SVG miribogi
- dagugeo jiweon: hangugeo/yeongeo jadong jiweon
- tema yeondong: VSCode tema saegsanggwa wanbyeog yeondong
jiweonhaneun SVG keomponeonteu
Svg- gibon SVG keonteineoCircle- weonhyeongRect- sagaghyeongPath- gyeongroEllipse- taweonLine- jigseonPolygon- dagaghyeongPolyline- polrirainText- tegseuteuG- geurub- gita React Native SVG keomponeonteudeul
sayongbeob
mini peuribyu (saeroun gineung!)
- React Native peurojegteueseo
.tsxpaileul yeobnida - Explorer paeneol hadane "SVG Preview" bagseuga jadongeuro natanabnida
- SVG keomponeonteuga issneun paileul pyeonjibhamyeon silsiganeuro eobdeiteudoebnida
jeonce miribogi
- pail tamsaeggieseo paileul ukeulrighageona pyeonjibgieseo ukeulrighabnida
- "Preview SVG" menyureul seontaeghabnida
- sae paeneoleseo SVG keomponeonteudeulyi sangse miribogireul hwaginhabnida
seolci mic gaebal
# yijonseong seolci
npm install
# TypeScript keompail
npm run compile
# Watch modeuro keompail
npm run watch
# paekijing
npm run package
npm install
# TypeScript keompail
npm run compile
# Watch modeuro keompail
npm run watch
# paekijing
npm run package
yogusahang
- VSCode 1.74.0 isang
- React Native SVG raibeureorireul sayonghaneun peurojegteu
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 containerCircle- CircleRect- RectanglePath- PathEllipse- EllipseLine- LinePolygon- PolygonPolyline- PolylineText- TextG- Group- Other React Native SVG components
Usage
Mini Preview (New Feature!)
- Open a
.tsxfile 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
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