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?
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?
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:
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;
great! glad you got it working.