Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
React Native SVG Component using react-native-svg
// React Native SVG Component
// https://github.com/react-native-community/react-native-svg
//
// Process
// 1. Clean up SVG in graphics app (Illustrator/Sketch/etc) to set consistent width, height, and make sure the viewBox is "0, 0, W, H"
// 2. Open SVG in text editor to remove width, height, and any undesired/unnecessary styles
// 3. Open in https://jakearchibald.github.io/svgomg/ and optimize.
// 4. Integrate info app by converting SVG tags to component-based SVG tags used in https://github.com/react-native-community/react-native-svg and updating with JS variables such that I can controls dimensions, colors, etc.
// 5. Use in other components.
//
// For a set of icons, place converted SVGs in a single component and pass a "name" property to return the desired SVG. See below.
//
// Usage:
// import SVG from '../Components/SVG'
// <SVG name='logo' height={100} fill='tomato' />
import React from 'react'
import _ from 'lodash'
import Svg, {
Circle,
G,
Path
} from 'react-native-svg'
const SVG = ({ name, fill, width, height, ...otherProps }) => {
const graphics = {
logo: {
width: 70,
height: 68,
content: <Path fill={fill} d='M65.3 9.2v12.2C60.1 9.2 48 .6 33.9.6 17.7.6 4.1 12 .7 27.2h4.1c3.3-13 15.1-22.6 29.1-22.6 12.6 0 23.3 7.8 27.8 18.8H51.1v4h18.2V9.2h-4zM36.1 63.4c-12.6 0-23.3-7.8-27.8-18.8h10.6v-4H.7v18.2h4V46.6C9.9 58.8 22 67.4 36.1 67.4c16.2 0 29.8-11.4 33.2-26.6h-4.1c-3.3 12.9-15.1 22.6-29.1 22.6z' />
},
location: {
width: 512,
height: 512,
content:
<G fill={fill}>
<Path d='M255.9 0c-84.18 0-152.56 70.54-152.56 157.13 0 18 7.86 38.9 19 63.68s26.05 52.81 41.9 80.72c31.7 55.81 67.17 112 80.95 138.72a12 12 0 0 0 21.52 0c13.81-26.69 49.24-82.9 80.95-138.72 15.85-27.91 30.71-55.94 41.9-80.72s19-45.65 19-63.68C408.66 70.54 340.14 0 255.9 0zm0 77c40.78 0 73.71 33.69 73.71 75.63s-32.93 75.63-73.71 75.63-73.52-33.69-73.52-75.63S215.2 77 255.9 77z' />
<Path d='M107.15 379.16a12 12 0 0 0-9.15 4.12L3.16 491A12.82 12.82 0 0 0 1 504.5a12.18 12.18 0 0 0 11.11 7.5H499.7a12.17 12.17 0 0 0 11.24-7.41 12.82 12.82 0 0 0-2.1-13.59L414 383.28a12 12 0 0 0-9.14-4.11h-79.44a12.13 12.13 0 0 0-10.58 6.26 12.85 12.85 0 0 0 0 12.56 12.13 12.13 0 0 0 10.58 6.26h74.09l72.76 82.68H39.73l72.76-82.68h73.9A12.13 12.13 0 0 0 197 398a12.85 12.85 0 0 0 0-12.56 12.13 12.13 0 0 0-10.58-6.26h-79.27z' />
</G>
}
}
const viewBoxWidth = graphics[name].width
const viewBoxHeight = graphics[name].height
const viewBoxRatio = viewBoxWidth / viewBoxHeight
return (
<Svg
width={width || height && _.parseInt(height * viewBoxRatio) || 100}
height={height || width && _.parseInt(width / viewBoxRatio) || 100}
viewBox={`0 0 ${viewBoxWidth} ${viewBoxHeight}`}
{...otherProps}
>
{graphics[name].content}
</Svg>
)
}
SVG.propTypes = {
name: React.PropTypes.string.isRequired,
fill: React.PropTypes.string,
width: React.PropTypes.number,
height: React.PropTypes.number
}
SVG.defaultProps = {
name: 'logo',
fill: 'black'
}
export default SVG
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.