react-native-svg

(★ 8,000)

SVG library for React Native, React Native Web, and plain React web projects.

파일 탐색기

최종 버전 다운로드 (.zip)

- - bug_report.yaml
  - config.yml
- - android-build-test.yml
  - check-archs-consistency.yml
  - close-when-stale.yml
  - e2e-android.yml
  - e2e-ios.yml
  - ios-build-test.yml
  - js-build-test.yml
  - macos-build-test.yml
  - needs-more-info.yml
  - needs-repro.yml
  - publish.yml
  - windows-build-test.yml
- FUNDING.yml
- ISSUE_TEMPLATE.md
- PULL_REQUEST_TEMPLATE.md
- pre-commit
- - css.test.tsx.snap
- - GeneralSvgRenderingTest.spec.tsx
- css.test.tsx
- touchable.test.tsx
- build.gradle
- gradlew
- gradlew.bat
- proguard-rules.pro
- spotless.gradle
- - RNSVGBrush.h
  - RNSVGBrush.mm
  - RNSVGBrushType.h
  - RNSVGContextBrush.h
  - RNSVGContextBrush.mm
  - RNSVGPainter.h
  - RNSVGPainter.mm
  - RNSVGPainterBrush.h
  - RNSVGPainterBrush.mm
  - RNSVGSolidColorBrush.h
  - RNSVGSolidColorBrush.mm
- - RNSVGClipPath.h
  - RNSVGClipPath.mm
  - RNSVGDefs.h
  - RNSVGDefs.mm
  - RNSVGForeignObject.h
  - RNSVGForeignObject.mm
  - RNSVGGroup.h
  - RNSVGGroup.mm
  - RNSVGImage.h
  - RNSVGImage.mm
  - RNSVGLinearGradient.h
  - RNSVGLinearGradient.mm
  - RNSVGMarker.h
  - RNSVGMarker.mm
  - RNSVGMask.h
  - RNSVGMask.mm
  - RNSVGPath.h
  - RNSVGPath.mm
  - RNSVGPattern.h
  - RNSVGPattern.mm
  - RNSVGRadialGradient.h
  - RNSVGRadialGradient.mm
  - RNSVGSvgView.h
  - RNSVGSvgView.mm
  - RNSVGSymbol.h
  - RNSVGSymbol.mm
  - RNSVGUse.h
  - RNSVGUse.mm
- - RNSVGBlendMode.h
  - RNSVGColorMatrixType.h
  - RNSVGCompositeOperator.h
  - RNSVGEdgeMode.h
  - RNSVGFeBlend.h
  - RNSVGFeBlend.mm
  - RNSVGFeColorMatrix.h
  - RNSVGFeColorMatrix.mm
  - RNSVGFeComposite.h
  - RNSVGFeComposite.mm
  - RNSVGFeFlood.h
  - RNSVGFeFlood.mm
  - RNSVGFeGaussianBlur.h
  - RNSVGFeGaussianBlur.mm
  - RNSVGFeMerge.h
  - RNSVGFeMerge.mm
  - RNSVGFeOffset.h
  - RNSVGFeOffset.mm
  - RNSVGFilter.h
  - RNSVGFilter.mm
  - RNSVGFilterPrimitive.h
  - RNSVGFilterPrimitive.mm
  - RNSVGFilterRegion.h
  - RNSVGFilterRegion.mm
- - project.pbxproj
- - RNSVGCircle.h
  - RNSVGCircle.mm
  - RNSVGEllipse.h
  - RNSVGEllipse.mm
  - RNSVGLine.h
  - RNSVGLine.mm
  - RNSVGRect.h
  - RNSVGRect.mm
- - RNSVGFontData.h
  - RNSVGFontData.mm
  - RNSVGGlyphContext.h
  - RNSVGGlyphContext.mm
  - RNSVGPropHelper.h
  - RNSVGPropHelper.mm
  - RNSVGText.h
  - RNSVGText.mm
  - RNSVGTextPath.h
  - RNSVGTextPath.mm
  - RNSVGTextProperties.h
  - RNSVGTextProperties.mm
  - RNSVGTopAlignedLabel.h
  - RNSVGTopAlignedLabel.ios.mm
  - RNSVGTopAlignedLabel.macos.mm
  - RNSVGTSpan.h
  - RNSVGTSpan.mm
- - RCTConvert+RNSVG.h
  - RCTConvert+RNSVG.mm
  - RNSVGBezierElement.h
  - RNSVGBezierElement.mm
  - RNSVGCGFCRule.h
  - RNSVGConvert.h
  - RNSVGConvert.mm
  - RNSVGFabricConversions.h
  - RNSVGLength.h
  - RNSVGLength.mm
  - RNSVGMarkerPosition.h
  - RNSVGMarkerPosition.mm
  - RNSVGMaskType.h
  - RNSVGPathMeasure.h
  - RNSVGPathMeasure.mm
  - RNSVGPathParser.h
  - RNSVGPathParser.mm
  - RNSVGRenderUtils.h
  - RNSVGRenderUtils.mm
  - RNSVGUnits.h
  - RNSVGVBMOS.h
  - RNSVGVectorEffect.h
  - RNSVGViewBox.h
  - RNSVGViewBox.mm
- - RNSVGCircleManager.h
  - RNSVGCircleManager.mm
  - RNSVGClipPathManager.h
  - RNSVGClipPathManager.mm
  - RNSVGDefsManager.h
  - RNSVGDefsManager.mm
  - RNSVGEllipseManager.h
  - RNSVGEllipseManager.mm
  - RNSVGFeBlendManager.h
  - RNSVGFeBlendManager.mm
  - RNSVGFeColorMatrixManager.h
  - RNSVGFeColorMatrixManager.mm
  - RNSVGFeCompositeManager.h
  - RNSVGFeCompositeManager.mm
  - RNSVGFeFloodManager.h
  - RNSVGFeFloodManager.mm
  - RNSVGFeGaussianBlurManager.h
  - RNSVGFeGaussianBlurManager.mm
  - RNSVGFeMergeManager.h
  - RNSVGFeMergeManager.mm
  - RNSVGFeOffsetManager.h
  - RNSVGFeOffsetManager.mm
  - RNSVGFilterManager.h
  - RNSVGFilterManager.mm
  - RNSVGFilterPrimitiveManager.h
  - RNSVGFilterPrimitiveManager.mm
  - RNSVGForeignObjectManager.h
  - RNSVGForeignObjectManager.mm
  - RNSVGGroupManager.h
  - RNSVGGroupManager.mm
  - RNSVGImageManager.h
  - RNSVGImageManager.mm
  - RNSVGLinearGradientManager.h
  - RNSVGLinearGradientManager.mm
  - RNSVGLineManager.h
  - RNSVGLineManager.mm
  - RNSVGMarkerManager.h
  - RNSVGMarkerManager.mm
  - RNSVGMaskManager.h
  - RNSVGMaskManager.mm
  - RNSVGNodeManager.h
  - RNSVGNodeManager.mm
  - RNSVGPathManager.h
  - RNSVGPathManager.mm
  - RNSVGPatternManager.h
  - RNSVGPatternManager.mm
  - RNSVGRadialGradientManager.h
  - RNSVGRadialGradientManager.mm
  - RNSVGRectManager.h
  - RNSVGRectManager.mm
  - RNSVGRenderableManager.h
  - RNSVGRenderableManager.mm
  - RNSVGSvgViewManager.h
  - RNSVGSvgViewManager.mm
  - RNSVGSymbolManager.h
  - RNSVGSymbolManager.mm
  - RNSVGTextManager.h
  - RNSVGTextManager.mm
  - RNSVGTextPathManager.h
  - RNSVGTextPathManager.mm
  - RNSVGTSpanManager.h
  - RNSVGTSpanManager.mm
  - RNSVGUseManager.h
  - RNSVGUseManager.mm
- .npmignore
- RNSVGContainer.h
- RNSVGNode.h
- RNSVGNode.mm
- RNSVGRenderable.h
- RNSVGRenderable.mm
- RNSVGRenderableModule.h
- RNSVGRenderableModule.mm
- RNSVGSvgViewModule.h
- RNSVGSvgViewModule.mm
- RNSVGUIKit.h
- RNSVGUIKit.macos.mm
- - .eslintrc.js
  - .prettierrc.js
  - index.tsx
  - noNavigationApp.tsx
  - tsconfig.json
- - .gitignore
  - .watchmanconfig
  - app.json
  - babel.config.js
  - common
  - Gemfile
  - Gemfile.lock
  - index.js
  - jest.config.js
  - metro.config.js
  - package.json
  - yarn.lock
- - .gitignore
  - .prettierrc.js
  - .watchmanconfig
  - app.json
  - babel.config.js
  - Gemfile
  - Gemfile.lock
  - index.js
  - jest.config.js
  - metro.config.js
  - package.json
  - yarn.lock
- - .gitignore
  - .prettierrc.js
  - .ruby-version
  - .watchmanconfig
  - app.json
  - babel.config.js
  - index.js
  - jest.config.js
  - jest.config.windows.js
  - metro.config.js
  - package.json
  - yarn.lock
- - .gitignore
  - .watchmanconfig
  - app.json
  - babel.config.js
  - common
  - Gemfile
  - Gemfile.lock
  - index.js
  - jest.config.js
  - metro.config.js
  - package.json
  - yarn.lock
- - .gitignore
  - app.json
  - babel.config.js
  - index.js
  - metro.config.js
  - package.json
  - tsconfig.json
  - yarn.lock
- package.json
- - 1.svg
  - 2.svg
  - 3.svg
  - 4.svg
- - .gitignore
- - .gitignore
- env.ts
- failedCases.json
- generateReferences.ts
- globals.d.ts
- helpers.ts
- matchTestCases.ts
- readFailedCases.ts
- setupJest.ts
- teardownJest.ts
- types.ts
- package.json
- circle.png
- clip-path.png
- ellipse.png
- feColorMatrix.png
- filterImage.png
- g.png
- image.png
- line.png
- lineargradient.png
- linkBinary.png
- path.png
- pencil.png
- polygon.png
- polyline.png
- radialgradient.png
- rect.png
- svg.png
- symbol.png
- text-path.png
- text.png
- touchevents.gif
- tspan.png
- use.png
- codegen-check-consistency.js
- codegen-sync-archs.js
- codegen-utils.js
- format-java.js
- metal.js
- rnsvg_utils.rb
- - css.tsx
  - index.tsx
  - LocalSvg.tsx
- - Circle.tsx
  - ClipPath.tsx
  - Defs.tsx
  - Ellipse.tsx
  - ForeignObject.tsx
  - G.tsx
  - Image.tsx
  - Line.tsx
  - LinearGradient.tsx
  - Marker.tsx
  - Mask.tsx
  - Path.tsx
  - Pattern.tsx
  - Polygon.tsx
  - Polyline.tsx
  - RadialGradient.tsx
  - Rect.tsx
  - Shape.tsx
  - Stop.tsx
  - Svg.tsx
  - Symbol.tsx
  - Text.tsx
  - TextPath.tsx
  - TSpan.tsx
  - Use.tsx
- - AndroidSvgViewNativeComponent.ts
  - CircleNativeComponent.ts
  - ClipPathNativeComponent.ts
  - codegenUtils.ts
  - DefsNativeComponent.ts
  - EllipseNativeComponent.ts
  - FeBlendNativeComponent.ts
  - FeColorMatrixNativeComponent.ts
  - FeCompositeNativeComponent.ts
  - FeFloodNativeComponent.ts
  - FeGaussianBlurNativeComponent.ts
  - FeMergeNativeComponent.ts
  - FeOffsetNativeComponent.ts
  - FilterNativeComponent.ts
  - ForeignObjectNativeComponent.ts
  - GroupNativeComponent.ts
  - ImageNativeComponent.ts
  - index.ts
  - IOSSvgViewNativeComponent.ts
  - LinearGradientNativeComponent.ts
  - LineNativeComponent.ts
  - MarkerNativeComponent.ts
  - MaskNativeComponent.ts
  - NativeSvgRenderableModule.ts
  - NativeSvgSoundModule.ts
  - NativeSvgViewModule.ts
  - PathNativeComponent.ts
  - PatternNativeComponent.ts
  - RadialGradientNativeComponent.ts
  - RectNativeComponent.ts
  - SymbolNativeComponent.ts
  - TextNativeComponent.ts
  - TextPathNativeComponent.ts
  - TSpanNativeComponent.ts
  - UseNativeComponent.ts
  - utils.ts
- - FilterImage.tsx
  - index.tsx
  - types.ts
- - maskType.ts
  - Matrix2D.ts
  - resolve.ts
  - resolveAssetUri.ts
  - SvgTouchableMixin.ts
  - units.ts
  - util.ts
- - fetchData.ts
- - types.ts
  - WebShape.ts
- deprecated.tsx
- elements.ts
- elements.web.ts
- index.ts
- ReactNativeSVG.ts
- ReactNativeSVG.web.ts
- xml.tsx
- xmlTags.ts
- - BrushView.cpp
  - BrushView.h
  - CircleView.cpp
  - CircleView.h
  - CircleViewManager.cpp
  - CircleViewManager.h
  - ClipPathView.cpp
  - ClipPathView.h
  - ClipPathViewManager.cpp
  - ClipPathViewManager.h
  - D2DBrush.cpp
  - D2DBrush.h
  - D2DDevice.cpp
  - D2DDevice.h
  - D2DDeviceContext.cpp
  - D2DDeviceContext.h
  - D2DGeometry.cpp
  - D2DGeometry.h
  - D2DHelpers.h
  - DefsView.cpp
  - DefsView.h
  - DefsViewManager.cpp
  - DefsViewManager.h
  - DirectXDeviceManager.cpp
  - DirectXDeviceManager.h
  - EllipseView.cpp
  - EllipseView.h
  - EllipseViewManager.cpp
  - EllipseViewManager.h
  - GroupView.cpp
  - GroupView.h
  - GroupViewManager.cpp
  - GroupViewManager.h
  - ImageView.cpp
  - ImageView.h
  - ImageViewManager.cpp
  - ImageViewManager.h
  - LinearGradientView.cpp
  - LinearGradientView.h
  - LinearGradientViewManager.cpp
  - LinearGradientViewManager.h
  - LineView.cpp
  - LineView.h
  - LineViewManager.cpp
  - LineViewManager.h
  - MarkerView.cpp
  - MarkerView.h
  - MarkerViewManager.cpp
  - MarkerViewManager.h
  - MaskView.cpp
  - MaskView.h
  - MaskViewManager.cpp
  - MaskViewManager.h
  - packages.lock.json
  - Paper.idl
  - PathView.cpp
  - PathView.h
  - PathViewManager.cpp
  - PathViewManager.h
  - PatternView.cpp
  - PatternView.h
  - PatternViewManager.cpp
  - PatternViewManager.h
  - pch.cpp
  - pch.h
  - PropertySheet.props
  - RadialGradientView.cpp
  - RadialGradientView.h
  - RadialGradientViewManager.cpp
  - RadialGradientViewManager.h
  - ReactPackageProvider.cpp
  - ReactPackageProvider.h
  - ReactPackageProvider.idl
  - RectView.cpp
  - RectView.h
  - RectViewManager.cpp
  - RectViewManager.h
  - RenderableView.cpp
  - RenderableView.h
  - RenderableViewManager.cpp
  - RenderableViewManager.h
  - resource.h
  - RNSVG.def
  - RNSVG.rc
  - RNSVG.vcxproj
  - RNSVG.vcxproj.filters
  - RNSVGModule.h
  - SVGLength.cpp
  - SVGLength.h
  - SvgView.cpp
  - SvgView.h
  - SvgViewManager.cpp
  - SvgViewManager.h
  - SymbolView.cpp
  - SymbolView.h
  - SymbolViewManager.cpp
  - SymbolViewManager.h
  - targetver.h
  - TextView.cpp
  - TextView.h
  - TextViewManager.cpp
  - TextViewManager.h
  - TSpanView.cpp
  - TSpanView.h
  - TSpanViewManager.cpp
  - TSpanViewManager.h
  - Types.idl
  - UnsupportedSvgViewManager.cpp
  - UnsupportedSvgViewManager.h
  - UseView.cpp
  - UseView.h
  - UseViewManager.cpp
  - UseViewManager.h
  - Utils.h
  - versionoverrides.rc
  - ViewManagers.idl
  - Views.idl
- .clang-format
- .gitignore
- ExperimentalFeatures.props
- NuGet.Config
- RNSVG.sln
.clang-format
.eslintignore
.eslintrc.js
.git-blame-ignore-revs
.gitattributes
.gitignore
.npmignore
.prettierrc.js
babel.config.js
CODE_OF_CONDUCT.md
CONTRIBUTING.md
jest.config.ts
LICENSE
package.json
react-native.config.js
README.md
rnrepo.config.json
RNSVG.podspec
tsconfig.build.json
tsconfig.json
USAGE.md
yarn.lock

# 설치 가이드

1. 코드 내려받기

git clone https://github.com/software-mansion/react-native-svg

깃허브에서 프로젝트 코드 전체를 내 컴퓨터로 내려받습니다.

cd react-native-svg

방금 내려받은 프로젝트 폴더 안으로 이동합니다.

2. CMake

보통 추천

사전 준비물

Git GitHub에서 프로젝트 코드를 내려받으려면 필요합니다.
CMake 빌드 설정을 생성하는 도구입니다.
C/C++ 컴파일러 Windows는 Visual Studio(Community 무료), macOS는 Xcode Command Line Tools, Linux는 gcc/g++ 패키지가 필요합니다.

⚠️ 이 프로젝트는 규모가 큰 저장소라, 이 방법이 실제 핵심 제품이 아니라 내부 하위 패키지를 가리키는 것일 수 있습니다. README 전체를 함께 확인해보세요.

cd android/src/main/jni

이 프로젝트의 관련 파일이 하위 폴더 안에 있어서, 먼저 그 폴더로 이동합니다.

mkdir build && cd build

빌드 결과물을 담을 폴더를 만들고 그 안으로 이동합니다.

cmake ..

소스코드를 분석해 빌드 설정 파일을 생성합니다 (build 폴더 안에서 실행해야 함).

make

생성된 빌드 설정을 바탕으로 실제 컴파일을 진행해 실행 파일을 만듭니다.

✅ build 폴더 안에 실행 파일이 생성됐는지 확인하고, 직접 실행해보세요 (예: ./build/앱이름).

3. .NET

보통

사전 준비물

Git GitHub에서 프로젝트 코드를 내려받으려면 필요합니다.
.NET SDK dotnet 명령어를 쓰기 위한 SDK입니다.

cd apps/fabric-windows-example/windows

이 프로젝트의 관련 파일이 하위 폴더 안에 있어서, 먼저 그 폴더로 이동합니다.

dotnet restore

프로젝트에 필요한 패키지를 내려받습니다.

dotnet run

프로젝트를 빌드하고 바로 실행합니다.

✅ dotnet run 실행 후 터미널에 나타나는 안내 메시지나 주소를 확인하세요.

4. Gradle (Java/Kotlin)

보통

사전 준비물

Git GitHub에서 프로젝트 코드를 내려받으려면 필요합니다.
JDK (Java) Java/Kotlin 프로젝트를 빌드/실행하려면 필요합니다.
Gradle 레포에 포함된 gradlew(Gradle Wrapper)를 쓰면 Gradle을 따로 설치할 필요가 없습니다.

cd android

이 프로젝트의 관련 파일이 하위 폴더 안에 있어서, 먼저 그 폴더로 이동합니다.

./gradlew build

Gradle로 빌드를 진행합니다.

✅ BUILD SUCCESSFUL 메시지가 뜨면 성공입니다. build/ 폴더에 결과물이 생성됩니다.

5. Node.js

쉬움

사전 준비물

Git GitHub에서 프로젝트 코드를 내려받으려면 필요합니다.
Node.js npm 명령어를 쓰려면 Node.js가 설치되어 있어야 합니다. LTS(장기지원) 버전을 추천합니다.

npm install react-native-svg

package.json에 명시된 라이브러리들을 내려받아 설치합니다.

yarn add react-native-svg

이 명령어를 터미널에 그대로 입력해 실행하세요.

✅ 명령어 실행 후 터미널에 나타나는 주소(보통 http://localhost:3000 형태)를 브라우저에서 열어보세요.

이 레포의 README에 적힌 실제 명령어를 그대로 가져왔습니다.

6. Ruby

쉬움

사전 준비물

Git GitHub에서 프로젝트 코드를 내려받으려면 필요합니다.
Ruby bundle 명령어를 쓰려면 Ruby가 필요합니다.

cd apps/fabric-example

이 프로젝트의 관련 파일이 하위 폴더 안에 있어서, 먼저 그 폴더로 이동합니다.

bundle install

Gemfile에 명시된 루비 라이브러리를 설치합니다.

✅ bundle install이 에러 없이 끝나면 README에 안내된 실행 명령어(예: rails server)로 마저 실행해보세요.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

react-native-svg

파일 탐색기

# 설치 가이드

2. CMake

3. .NET

4. Gradle (Java/Kotlin)

5. Node.js

6. Ruby

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

react-native-svg

파일 탐색기

# 설치 가이드

2. CMake

3. .NET

4. Gradle (Java/Kotlin)

5. Node.js

6. Ruby

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

Download README