Custom SVG logo, icon

Expo SDK
1

Hello everyone, is there any material to use react-native-svg with expo to create custom logos or icons? I know react-native-svg is pre-installed with expo, but I don’t know how to start…

Any directions to start?

2

there’s a simple example in the README for the lib here:
https://github.com/react-native-community/react-native-svg

Here’s another example of a hangman drawing:

3

Hi, thank you for your help! I also found a tutorial that was just what I was needing:

https://gist.github.com/beausmith/d2b56e6659e08ad0ceb4ae8684fb05d1

But I tweaked the import a little to work with expo, the final code is the following:

import React, { Component } from 'react';
import _ from 'lodash';
import { Svg } from 'expo';
const { Path, G } = 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>
    )
  
}

export default SVG;
2 Likes
4

great! glad you got it working.