0.0.7 • Published 7 years ago
svg-to-react-native-tsx-cli v0.0.7
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:
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 15.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<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"
width="128px" height="128px" viewBox="0 0 128 128" enable-background="new 0 0 128 128" xml:space="preserve">
<g>
<circle fill="#E16B5A" cx="64" cy="64" r="64"/>
<path fill="#D16354" d="M119.23,96.322c-0..."/>
<path fill="#242424" d="M64,104c-9.775,0-..."/>
<path fill="#B3B3B3" d="M64,95.5c-12.861,..."/>
<g>
<path fill="#1A1A1A" d="M86.43,39.278C8..."/>
<path fill="#1A1A1A" d="M99,49c0-6.564-..."/>
<path fill="#1A1A1A" d="M35.073,39.171c..."/>
</g>
<path fill="#242424" d="M69,71.5c-1.382,..."/>
<path fill="#F5F5F5" d="M76.5,59c-2.756,..."/>
<path fill="#242424" d="M76.5,56.5c-1.37..."/>
<path fill="#F5F5F5" d="M51.5,59c-2.759,..."/>
<path fill="#242424" d="M51.498,56.5C500..."/>
<path fill="#242424" d="M74,81.5H54c-1.3..."/>
</g>
</svg>And creates a new file with this:
import React from 'react';
import {
Svg,
Circle,
Ellipse,
G,
LinearGradient,
RadialGradient,
Line,
Path,
Polygon,
Polyline,
Rect,
Symbol,
Text,
Use,
Defs,
Stop
} from 'react-native-svg';
interface Props {
width: number;
height: number;
}
export default function Test({width, height}: Props) {
return (
<Svg height={height || 64} id="Layer_1" width={width || 64} version="1.1" viewBox="0 0 128 128" x="0px" y="0px" xmlSpace="preserve">
<G>
<Circle x="64" y="64" fill="#E16B5A" r="64"/>
<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"/>
<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"/>
<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"/>
<G>
<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"/>
<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"/>
<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"/>
</G>
<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"/>
<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"/>
<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"/>
<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"/>
<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"/>
<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"/>
</G>
</Svg>
);
}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