Light Mode

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Sign up
Appearance settings

geonhwiii/react-native-svg-preview

Repository files navigation

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 keonteineo
  • Circle - weonhyeong
  • Rect - sagaghyeong
  • Path - gyeongro
  • Ellipse - taweon
  • Line - jigseon
  • Polygon - dagaghyeong
  • Polyline - polrirain
  • Text - tegseuteu
  • G - geurub
  • gita React Native SVG keomponeonteudeul

sayongbeob

mini peuribyu (saeroun gineung!)

  1. React Native peurojegteueseo .tsx paileul yeobnida
  2. Explorer paeneol hadane "SVG Preview" bagseuga jadongeuro natanabnida
  3. SVG keomponeonteuga issneun paileul pyeonjibhamyeon silsiganeuro eobdeiteudoebnida

jeonce miribogi

  1. pail tamsaeggieseo paileul ukeulrighageona pyeonjibgieseo ukeulrighabnida
  2. "Preview SVG" menyureul seontaeghabnida
  3. 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

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 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!)

  1. Open a .tsx file in your React Native project
  2. The "SVG Preview" box will automatically appear at the bottom of Explorer panel
  3. Edit files with SVG components and see real-time updates

Full Preview

  1. Right-click on a file in the file explorer or in the editor
  2. Select "Preview SVG" from the menu
  3. 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

About

react native svg preview extension

Resources

Readme

License

MIT license

Stars

Watchers

Forks

Packages

Contributors