Skip to content

Instantly share code, notes, and snippets.

@beausmith

beausmith/SVG.js

Created May 23, 2017 18:09
Show Gist options
  • Save beausmith/d2b56e6659e08ad0ceb4ae8684fb05d1 to your computer and use it in GitHub Desktop.
Save beausmith/d2b56e6659e08ad0ceb4ae8684fb05d1 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. beausmith revised this gist May 23, 2017. No changes.
  2. beausmith created this gist May 23, 2017.
    69 changes: 69 additions & 0 deletions SVG.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,69 @@
    // 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