Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

react-native-svg-transformer

Package Overview
Dependencies
Maintainers
1
Versions
19
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-native-svg-transformer

SVG transformer for react-native

  • 0.14.0
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
430K
decreased by-0.82%
Maintainers
1
Weekly downloads
 
Created

What is react-native-svg-transformer?

The react-native-svg-transformer package is a transformer for React Native that allows you to import and use SVG files as React components. This package simplifies the process of working with SVGs in a React Native project by transforming SVG files into components that can be easily styled and manipulated.

What are react-native-svg-transformer's main functionalities?

Importing SVG files

This feature allows you to import SVG files directly into your React Native components. The SVG file is transformed into a React component that can be used like any other component.

import Logo from './logo.svg';

const App = () => (
  <View>
    <Logo width={120} height={40} />
  </View>
);

Styling SVG components

You can style the imported SVG components using standard React Native styles. This example demonstrates how to change the fill color of an SVG component.

import Logo from './logo.svg';

const App = () => (
  <View>
    <Logo width={120} height={40} style={{ fill: 'blue' }} />
  </View>
);

Using SVG components with props

SVG components can accept props, allowing you to dynamically change their attributes. This example shows how to set the fill color of an SVG component using a prop.

import Logo from './logo.svg';

const App = () => (
  <View>
    <Logo width={120} height={40} fill='red' />
  </View>
);

Other packages similar to react-native-svg-transformer

FAQs

Package last updated on 15 Nov 2019

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc