Gathering detailed insights and metrics for svg-to-react-native-tsx-cli
Gathering detailed insights and metrics for svg-to-react-native-tsx-cli
A command line utility that takes a svg image file and outputs a fully formatted stateless functional React Native!! component file that can be used to render your image.
Installations
npm install svg-to-react-native-tsx-cliDeveloper Guide
BETA
Typescript
No
Module System
CommonJS
Releases
Unable to fetch releases
Languages
1
JavaScript
JavaScript (100%)
Developer
chrisbull
Download Statistics
Total Downloads
0
Last Day
0
Last Week
0
Last Month
0
Last Year
0
GitHub Statistics
MIT License
39 Stars
60 Commits
15 Forks
1 Branches
1 Contributors
Updated on Dec 29, 2023
Maintainers
1
Package Meta Information
Latest Version
0.0.7
Package Id
svg-to-react-native-tsx-cli@0.0.7
Unpacked Size
102.87 kB
Size
16.97 kB
File Count
24
Total Downloads
Cumulative downloads
Total Downloads
NaN
Last Day
0%
NaN
Compared to previous day
Last Week
0%
NaN
Compared to previous week
Last Month
0%
NaN
Compared to previous month
Last Year
0%
NaN
Compared to previous year
Weekly Downloads
Monthly Downloads
Yearly Downloads
Dependencies
4
svg-to-react-native-tsx-cli
Based on svg-to-react-native-cli.
A command line utility that takes a svg image file and outputs a fully formatted stateless functional React Native component in typescript, with height and width for props. With flags to toggle formatting and remove style attributes.
To Use
npm install -g svg-to-react-native-tsx-cli
One File
svg-to-react-native src/svg/images/logo Logo --output src/svg/components/
NOTE: image file must be in current working directory. Do not add the extension. If file is image.svg, then just enter image as the first argument. ComponentName will be the name of the sfc and filename with .js appended.
Multi File
svg-to-react-native-tsx --dir src/svg/images/ --output src/svg/components/
or for all files in directory (will name all components in CamelCase based on image name. If image is image.svg then new component will be Image and file will be Image.tsx):
Optional Flags:
-d, --dir <path> - the dirctory from project folder to your svg images (src/svg/images) (optional)
-o, --output <path> - the output path. Do not include the filename.
--help - Prints out this readme.
--index - Creates a index.tsx with export of all converted svgs. Use with --dir
--example - Prints an example of the i/o of this util.
Example
Takes this:
1<?xml version="1.0" encoding="utf-8"?> 2<!-- Generator: Adobe Illustrator 15.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> 3<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> 4<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" 5 width="128px" height="128px" viewBox="0 0 128 128" enable-background="new 0 0 128 128" xml:space="preserve"> 6<g> 7 <circle fill="#E16B5A" cx="64" cy="64" r="64"/> 8 <path fill="#D16354" d="M119.23,96.322c-0..."/> 9 <path fill="#242424" d="M64,104c-9.775,0-..."/> 10 <path fill="#B3B3B3" d="M64,95.5c-12.861,..."/> 11 <g> 12 <path fill="#1A1A1A" d="M86.43,39.278C8..."/> 13 <path fill="#1A1A1A" d="M99,49c0-6.564-..."/> 14 <path fill="#1A1A1A" d="M35.073,39.171c..."/> 15 </g> 16 <path fill="#242424" d="M69,71.5c-1.382,..."/> 17 <path fill="#F5F5F5" d="M76.5,59c-2.756,..."/> 18 <path fill="#242424" d="M76.5,56.5c-1.37..."/> 19 <path fill="#F5F5F5" d="M51.5,59c-2.759,..."/> 20 <path fill="#242424" d="M51.498,56.5C500..."/> 21 <path fill="#242424" d="M74,81.5H54c-1.3..."/> 22</g> 23</svg>
And creates a new file with this:
1 2 3import React from 'react'; 4import { 5 Svg, 6 Circle, 7 Ellipse, 8 G, 9 LinearGradient, 10 RadialGradient, 11 Line, 12 Path, 13 Polygon, 14 Polyline, 15 Rect, 16 Symbol, 17 Text, 18 Use, 19 Defs, 20 Stop 21} from 'react-native-svg'; 22 23interface Props { 24 width: number; 25 height: number; 26} 27 28export default function Test({width, height}: Props) { 29 return ( 30 <Svg height={height || 64} id="Layer_1" width={width || 64} version="1.1" viewBox="0 0 128 128" x="0px" y="0px" xmlSpace="preserve"> 31 <G> 32 <Circle x="64" y="64" fill="#E16B5A" r="64"/> 33 <Path d="M119.23,96.322c-0.063-0.168-0.127-0.334-0.198-0.492c-0.079-0.208-0.158-0.414-0.247-0.609
		c-0.079-0.21-0.159-0.418-0.248-0.613c-0.079-0.209-0.159-0.418-0.248-0.614c-0.08-0.21-0.16-0.419-0.25-0.617
		c-0.079-0.208-0.158-0.414-0.247-0.61c-0.079-0.209-0.159-0.416-0.248-0.613c-0.079-0.209-0.159-0.416-0.248-0.613
		c-0.08-0.21-0.159-0.419-0.25-0.617c-0.079-0.208-0.157-0.414-0.247-0.609c-0.078-0.209-0.158-0.418-0.248-0.613
		c-0.08-0.211-0.16-0.42-0.25-0.618c-0.078-0.208-0.158-0.414-0.246-0.61c-0.08-0.21-0.16-0.419-0.25-0.617
		c-0.08-0.207-0.158-0.412-0.248-0.608c-0.078-0.209-0.158-0.417-0.248-0.614c-0.078-0.209-0.158-0.417-0.248-0.613
		c-0.078-0.211-0.16-0.42-0.25-0.617c-0.078-0.209-0.158-0.414-0.246-0.609c-0.08-0.209-0.16-0.417-0.248-0.614
		c-0.08-0.209-0.158-0.417-0.248-0.614c-0.08-0.209-0.159-0.418-0.25-0.615c-0.08-0.208-0.157-0.414-0.248-0.61
		c-0.077-0.209-0.157-0.417-0.248-0.614c-0.078-0.211-0.159-0.42-0.25-0.617c-0.077-0.209-0.156-0.414-0.245-0.609
		c-0.08-0.21-0.16-0.419-0.25-0.617c-0.079-0.208-0.158-0.414-0.247-0.609c-0.079-0.209-0.159-0.418-0.248-0.613
		c-0.079-0.209-0.159-0.417-0.248-0.614c-0.08-0.21-0.16-0.419-0.25-0.617c-0.079-0.208-0.158-0.413-0.247-0.61
		c-0.079-0.209-0.159-0.416-0.248-0.612c-0.079-0.209-0.157-0.417-0.248-0.614c-0.08-0.21-0.159-0.419-0.25-0.617
		c-0.079-0.207-0.157-0.414-0.247-0.609c-0.078-0.209-0.158-0.418-0.246-0.613c-0.08-0.209-0.16-0.417-0.248-0.614
		c-0.08-0.211-0.162-0.42-0.25-0.618c-0.08-0.209-0.16-0.416-0.248-0.612c-0.08-0.208-0.158-0.414-0.248-0.609
		c-0.078-0.209-0.158-0.417-0.248-0.614c-0.078-0.209-0.158-0.416-0.248-0.613c-0.078-0.211-0.16-0.42-0.25-0.617
		c-0.078-0.207-0.158-0.413-0.246-0.609c-0.08-0.209-0.159-0.417-0.248-0.613c-0.079-0.209-0.159-0.418-0.248-0.614
		c-0.079-0.21-0.16-0.419-0.25-0.616c-0.079-0.208-0.158-0.414-0.247-0.609c-0.079-0.209-0.159-0.418-0.248-0.615
		c-0.079-0.209-0.159-0.416-0.248-0.613c-0.079-0.209-0.159-0.417-0.248-0.613c-0.08-0.212-0.162-0.422-0.252-0.622
		c-0.078-0.206-0.157-0.411-0.245-0.605c-0.079-0.209-0.159-0.417-0.248-0.614c-0.079-0.209-0.159-0.416-0.248-0.613
		c-0.08-0.21-0.16-0.419-0.25-0.617c-0.079-0.208-0.158-0.414-0.247-0.61c-0.079-0.209-0.159-0.417-0.248-0.613
		c-0.079-0.209-0.159-0.417-0.247-0.614c-0.08-0.21-0.16-0.419-0.25-0.617c-0.08-0.208-0.158-0.414-0.248-0.61
		c-0.078-0.209-0.158-0.417-0.248-0.613c-0.078-0.209-0.158-0.417-0.248-0.614c-0.078-0.209-0.158-0.417-0.248-0.614
		c-0.08-0.212-0.162-0.422-0.252-0.622c-0.078-0.206-0.156-0.411-0.244-0.604c-0.08-0.209-0.158-0.417-0.248-0.614
		c-0.08-0.209-0.158-0.417-0.248-0.614c-0.078-0.21-0.159-0.419-0.25-0.617c-0.078-0.208-0.157-0.414-0.248-0.609
		c-0.077-0.209-0.157-0.417-0.246-0.614c-0.079-0.209-0.159-0.417-0.248-0.614c-0.079-0.21-0.16-0.419-0.25-0.617
		c-0.079-0.208-0.158-0.413-0.247-0.609c-0.079-0.209-0.159-0.417-0.248-0.614c-0.079-0.209-0.159-0.417-0.248-0.614
		c-0.079-0.21-0.16-0.419-0.25-0.616c-0.079-0.209-0.158-0.414-0.247-0.61c-0.08-0.211-0.161-0.42-0.25-0.618
		c-0.079-0.208-0.156-0.414-0.247-0.61c-0.078-0.209-0.157-0.417-0.248-0.613c-0.08-0.21-0.159-0.419-0.25-0.617
		c-0.077-0.208-0.157-0.414-0.245-0.61c-0.08-0.209-0.16-0.417-0.248-0.613c-1.305-3.459-4.01-5.256-6.695-5.256
		c-0.311,0-0.598,0.021-0.873,0.056c-0.43,0.045-0.836,0.11-1.198,0.224c-0.043-0.076-0.089-0.146-0.132-0.221
		C81.225,25.163,68.098,24,64,24c-0.19,0-0.406,0.004-0.634,0.01c-0.03,0.001-0.058,0.002-0.088,0.003
		c-0.238,0.007-0.493,0.02-0.768,0.034c-0.003,0.001-0.006,0.001-0.01,0.001h0.001c-5.221,0.316-16.676,2.532-23.931,15.23
		C37.972,39.092,37.281,39,36.5,39c-3.726,0-7.5,3.436-7.5,10c0,3.568,0.001,7.427,1.132,9.898c0.076,0.213,0.158,0.418,0.248,0.613
		c0.076,0.214,0.159,0.421,0.25,0.618c0.076,0.211,0.157,0.414,0.247,0.609c0.05,0.141,0.106,0.273,0.162,0.407
		c-1.239,7.521-0.387,14.98,2.408,21.601c0.083,0.205,0.162,0.411,0.248,0.613c0.083,0.207,0.164,0.416,0.251,0.619
		c0.081,0.203,0.16,0.406,0.245,0.607c0.083,0.205,0.162,0.411,0.248,0.614c0.083,0.208,0.165,0.416,0.251,0.622
		c0.082,0.201,0.16,0.406,0.245,0.604c0.083,0.207,0.164,0.415,0.251,0.62c0.081,0.203,0.16,0.406,0.245,0.607
		c0.083,0.205,0.162,0.41,0.248,0.613c0.083,0.205,0.162,0.41,0.248,0.613c0.083,0.207,0.164,0.415,0.251,0.62
		c0.081,0.203,0.16,0.406,0.245,0.606c0.083,0.205,0.162,0.412,0.248,0.613c0.083,0.205,0.162,0.411,0.248,0.614
		c0.083,0.207,0.164,0.415,0.251,0.62c0.081,0.203,0.16,0.406,0.245,0.607c0.083,0.205,0.162,0.41,0.248,0.612
		c0.083,0.205,0.162,0.411,0.248,0.614c0.084,0.21,0.167,0.42,0.254,0.628c0.08,0.2,0.159,0.401,0.242,0.601
		c0.083,0.205,0.162,0.41,0.248,0.613c0.083,0.205,0.162,0.411,0.248,0.614c0.083,0.205,0.162,0.411,0.248,0.614
		c0.083,0.207,0.164,0.414,0.251,0.619c0.081,0.203,0.16,0.405,0.245,0.606c0.083,0.205,0.162,0.411,0.248,0.614
		c0.083,0.205,0.162,0.41,0.248,0.613c0.083,0.207,0.164,0.416,0.251,0.621c0.081,0.201,0.16,0.404,0.245,0.605
		c0.083,0.205,0.162,0.411,0.248,0.613c0.083,0.205,0.162,0.412,0.248,0.615c0.084,0.209,0.167,0.42,0.254,0.627
		c0.08,0.201,0.158,0.4,0.242,0.601c0.083,0.205,0.162,0.411,0.248,0.614c0.083,0.205,0.162,0.41,0.248,0.613
		c0.083,0.205,0.162,0.411,0.248,0.613c0.083,0.207,0.164,0.415,0.251,0.62c0.081,0.203,0.16,0.405,0.245,0.606
		c0.083,0.205,0.162,0.412,0.248,0.614c0.083,0.204,0.162,0.41,0.248,0.613c0.083,0.207,0.164,0.415,0.251,0.62
		c0.081,0.203,0.16,0.406,0.245,0.607c0.083,0.205,0.162,0.41,0.248,0.612c0.083,0.205,0.162,0.411,0.248,0.614
		c0.083,0.207,0.164,0.415,0.251,0.62c0.082,0.206,0.163,0.411,0.249,0.614c0.082,0.203,0.161,0.406,0.245,0.605
		c0.083,0.205,0.162,0.411,0.248,0.614c0.083,0.204,0.162,0.411,0.248,0.614c0.083,0.207,0.164,0.414,0.251,0.619
		c0.081,0.203,0.16,0.406,0.245,0.606c0.083,0.205,0.162,0.411,0.248,0.614c0.083,0.205,0.162,0.41,0.248,0.613
		c0.083,0.207,0.164,0.416,0.251,0.621c0.081,0.202,0.16,0.404,0.245,0.605c0.083,0.205,0.162,0.41,0.248,0.613
		c0.083,0.205,0.162,0.412,0.248,0.615c0.083,0.206,0.164,0.414,0.251,0.619c0.081,0.203,0.16,0.405,0.245,0.605
		c0.083,0.209,0.165,0.416,0.251,0.623c0.082,0.201,0.16,0.406,0.245,0.605c0.083,0.205,0.162,0.411,0.248,0.613
		c0.083,0.207,0.164,0.415,0.251,0.62c0.081,0.202,0.16,0.405,0.245,0.606c0.083,0.205,0.162,0.411,0.248,0.614
		c0.083,0.205,0.162,0.411,0.248,0.613c0.083,0.207,0.164,0.415,0.251,0.62c0.081,0.203,0.16,0.406,0.245,0.606
		c0.083,0.205,0.162,0.411,0.248,0.614c0.083,0.205,0.162,0.41,0.248,0.613c0.083,0.207,0.164,0.414,0.251,0.619
		c0.049,0.123,0.099,0.246,0.149,0.369C55.344,127.559,59.62,128,64,128C87.552,128,108.119,115.27,119.23,96.322z" fill="#D16354"/> 34 <Path d="M64,104c-9.775,0-19.092-4.668-25.557-12.809c-6.726-8.467-9.336-19.584-7.29-30.775
		C29,58.297,29,53.424,29,49c0-6.564,3.774-10,7.5-10c0.781,0,1.472,0.093,2.07,0.278C46.632,25.17,59.881,24,64,24
		s17.368,1.17,25.43,15.278C90.027,39.092,90.719,39,91.5,39c3.727,0,7.5,3.436,7.5,10c0,4.424,0,9.297-2.152,11.416
		c2.045,11.191-0.563,22.311-7.291,30.775C83.092,99.332,73.775,104,64,104z" fill="#242424"/> 35 <Path d="M64,95.5c-12.861,0-21.5-11.117-21.5-21.5c0-3.489,0.82-6.148,2.581-8.367l0.686-0.863l-0.926-0.599
		c-1.808-1.167-4.84-4.04-4.84-10.171c0-5.908,5.785-9,11.5-9h25c5.715,0,11.5,3.092,11.5,9c0,6.131-3.033,9.004-4.84,10.171
		l-0.927,0.599l0.687,0.863c1.761,2.219,2.581,4.878,2.581,8.367C85.5,84.383,76.861,95.5,64,95.5z" fill="#B3B3B3"/> 36 <G> 37 <Path d="M86.43,39.278C87.027,39.092,87.719,39,88.5,39c0.266,0,0.532,0.021,0.797,0.058
			C81.225,25.163,68.098,24,64,24c-0.412,0-0.919,0.013-1.5,0.048C67.723,24.365,79.175,26.582,86.43,39.278z" fill="#1A1A1A"/> 38 <Path d="M99,49c0-6.564-3.773-10-7.5-10c-0.58,0-1.093,0.068-1.573,0.171C93.131,39.935,96,43.277,96,49
			c0,4.424,0,9.297-2.152,11.416c2.045,11.191-0.563,22.311-7.291,30.775c-6.133,7.723-14.832,12.313-24.057,12.764
			C62.999,103.979,63.499,104,64,104c9.775,0,19.092-4.668,25.557-12.809c6.728-8.467,9.336-19.584,7.291-30.775
			C99,58.297,99,53.424,99,49z" fill="#1A1A1A"/> 39 <Path d="M35.073,39.171c0.166,0.035,0.344,0.061,0.498,0.107c0.043-0.076,0.089-0.146,0.132-0.222
			C35.492,39.085,35.281,39.121,35.073,39.171z" fill="#1A1A1A"/> 40 </G> 41 <Path d="M69,71.5c-1.382,0-2.5-1.118-2.5-2.5c0-1.123-1.377-2.5-2.5-2.5s-2.5,1.377-2.5,2.5
		c0,1.382-1.118,2.5-2.5,2.5s-2.5-1.118-2.5-2.5c0-3.855,3.645-7.5,7.5-7.5c3.855,0,7.5,3.645,7.5,7.5
		C71.5,70.382,70.382,71.5,69,71.5z" fill="#242424"/> 42 <Path d="M76.5,59c-2.756,0-5-2.241-5-5s2.244-5,5-5c2.759,0,5,2.241,5,5S79.259,59,76.5,59z" fill="#F5F5F5"/> 43 <Path d="M76.5,56.5c-1.377,0-2.5-1.121-2.5-2.5s1.123-2.5,2.5-2.5c1.382,0,2.5,1.121,2.5,2.5S77.882,56.5,76.5,56.5
		z" fill="#242424"/> 44 <Path d="M51.5,59c-2.759,0-5-2.241-5-5s2.241-5,5-5c2.756,0,5,2.241,5,5S54.256,59,51.5,59z" fill="#F5F5F5"/> 45 <Path d="M51.498,56.5C50.121,56.5,49,55.379,49,54s1.121-2.5,2.498-2.5C52.88,51.5,54,52.621,54,54
		S52.879,56.5,51.498,56.5z" fill="#242424"/> 46 <Path d="M74,81.5H54c-1.382,0-2.5-1.118-2.5-2.5s1.118-2.5,2.5-2.5h20c1.382,0,2.5,1.118,2.5,2.5
		S75.382,81.5,74,81.5z" fill="#242424"/> 47 </G> 48 </Svg> 49 ); 50}
Width / height order of precedence
The order of precedence of how width/height is set on a generated component is as follows:
- 1 - Passed in width and height props are always priority one. This gives run time control to the container.
- 2 - If a svg has its width/height set, this will be the first fallback if width/height props are not provided.
- 3 - If the svg has not provided width/height attributes, the svg's viewbox's width/height segments are used as the fallback if width/height props are not provided.
- 4 - Finally, if the svg has no width/height attributes, and the svg also doesn't have a viewbox - a fallback of 50px is applied to the width and height
No vulnerabilities found.
Reason
no binaries found in the repo
Reason
license file detected
Details
- Info: project has a license file: LICENSE:0
- Info: FSF or OSI recognized license: MIT License: LICENSE:0
Reason
Found 4/26 approved changesets -- score normalized to 1
Reason
project is archived
Details
- Warn: Repository is archived.
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
security policy file not detected
Details
- Warn: no security policy file detected
- Warn: no security file to analyze
- Warn: no security file to analyze
- Warn: no security file to analyze
Reason
project is not fuzzed
Details
- Warn: no fuzzer integrations found
Reason
branch protection not enabled on development/release branches
Details
- Warn: branch protection not enabled for branch 'master'
Reason
SAST tool is not run on all commits -- score normalized to 0
Details
- Warn: 0 commits out of 8 are checked with a SAST tool
Reason
30 existing vulnerabilities detected
Details
- Warn: Project is vulnerable to: GHSA-v88g-cgmw-v5xw
- Warn: Project is vulnerable to: GHSA-rq8g-5pc5-wrhr
- Warn: Project is vulnerable to: GHSA-qrmc-fj45-qfc2
- Warn: Project is vulnerable to: GHSA-44pw-h2cw-w3vq
- Warn: Project is vulnerable to: GHSA-jp4x-w63m-7wgm
- Warn: Project is vulnerable to: GHSA-c429-5p7v-vgjp
- Warn: Project is vulnerable to: GHSA-43f8-2h32-f4cj
- Warn: Project is vulnerable to: GHSA-896r-f27r-55mw
- Warn: Project is vulnerable to: GHSA-jf85-cpcp-j695
- Warn: Project is vulnerable to: GHSA-fvqr-27wr-82fm
- Warn: Project is vulnerable to: GHSA-4xc9-xhrj-v574
- Warn: Project is vulnerable to: GHSA-x5rq-j2xg-h7qm
- Warn: Project is vulnerable to: GHSA-p6mc-m468-83gw
- Warn: Project is vulnerable to: GHSA-29mw-wpgm-hmr9
- Warn: Project is vulnerable to: GHSA-35jh-r3h4-6jhm
- Warn: Project is vulnerable to: GHSA-r683-j2x4-v87g
- Warn: Project is vulnerable to: GHSA-6394-6h9h-cfjg
- Warn: Project is vulnerable to: GHSA-hrpp-h998-j3pp
- Warn: Project is vulnerable to: GHSA-p8p7-x288-28g6
- Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw
- Warn: Project is vulnerable to: GHSA-2m39-62fm-q8r3
- Warn: Project is vulnerable to: GHSA-mf6x-7mm4-x2g7
- Warn: Project is vulnerable to: GHSA-72xf-g2v4-qvf3
- Warn: Project is vulnerable to: GHSA-662x-fhqg-9p8v
- Warn: Project is vulnerable to: GHSA-394c-5j6w-4xmx
- Warn: Project is vulnerable to: GHSA-78cj-fxph-m83p
- Warn: Project is vulnerable to: GHSA-fhg7-m89q-25r3
- Warn: Project is vulnerable to: GHSA-776f-qx25-q3cc
- Warn: Project is vulnerable to: GHSA-c4w7-xm78-47vh
- Warn: Project is vulnerable to: GHSA-p9pc-299p-vxgp
Score
1.9
/10
Last Scanned on 2025-07-07
The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.
Learn More