1

I see this post: https://stackoverflow.com/a/48245827/9775054

That was extracted from here, where says react-native-svg-uri.

But I can't make it work... I did all steps, but always says me that "Path './test.svg' could not be found.". I don't understand why, because the path to the file is correct for sure. I installed correctly react-native-svg, react-native-svg-uri, babel-plugin-inline-import and I have put the config on .babelrc.

.babelrc config:

{
  "presets": ["module:metro-react-native-babel-preset"],
  "plugins": [
    ["babel-plugin-inline-import", {
      "extensions": [
        ".svg"
      ]
    }]
  ]
}

Using the SVG File:

import * as React from 'react';
import SvgUri from 'react-native-svg-uri';
import testSvg from './test.svg';
export default () => (
  <SvgUri
    width="200"
    height="200"
    svgXmlData={testSvg}
  />
);

SVG File example

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 23.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 96 96" style="enable-background:new 0 0 96 96;" xml:space="preserve">
<style type="text/css">
    .st0{fill:#FFFFFF;}
    .st1{fill:#222FFF;}
</style>
<path class="st0" d="M48,96c26.5,0,48-21.5,48-48S74.5,0,48,0S0,21.5,0,48S21.5,96,48,96"/>
<path class="st0" d="M48,95c26,0,47-21,47-47S74,1,48,1S1,22,1,48S22,95,48,95"/>
<g>
    <g id="Navigation">
        <g>
            <path class="st1" d="M24,30.9h48.6c1.8,0,3.2-1.5,3.2-3.3c0-1.8-1.4-3.3-3.2-3.3H24c-1.8,0-3.2,1.5-3.2,3.3
                C20.8,29.4,22.2,30.9,24,30.9z M72.6,44.3H24c-1.8,0-3.2,1.5-3.2,3.3c0,1.8,1.4,3.3,3.2,3.3h48.6c1.8,0,3.2-1.5,3.2-3.3
                C75.8,45.7,74.3,44.3,72.6,44.3z M72.6,64.2H24c-1.8,0-3.2,1.5-3.2,3.3c0,1.8,1.4,3.3,3.2,3.3h48.6c1.8,0,3.2-1.5,3.2-3.3
                C75.8,65.6,74.3,64.2,72.6,64.2z"/>
        </g>
    </g>
</g>
</svg>

Other details

  • React Native verison: 0.57.8
  • Targeting Android 8.0

Someone could help me please?

sevenlops
  • 456
  • 1
  • 4
  • 18
  • Did you also install and link `react-native-svg` ? And shouldn't `svgXmlData={testSvg}` be `source={require('./test.svg')}` – VilleKoo Mar 21 '19 at 09:43
  • 1
    I assume the svg file is in the same folder as the file you're calling it from? What is the contents of your SVG file? We need a bit more information about your setup – Jono Mar 21 '19 at 09:44
  • as @Jono pointed out we need a bit more information. What react-native version are you using and what platform(s) are you targeting? – VilleKoo Mar 21 '19 at 10:01
  • @Jono I updated the original post with react native version, target, and an Example SVG File. And is svgXmlData, as said on the links at the top on my post. The problem is with importing an SVG File with the react-native-svg-uri installed, the error prompts before using it. – sevenlops Mar 21 '19 at 16:21
  • @VilleKoo I updated the original post with react native version, target, and an Example SVG File. And is svgXmlData, as said on the links at the top on my post. The problem is with importing an SVG File with the react-native-svg-uri installed, the error prompts before using it. – sevenlops Mar 21 '19 at 16:21

0 Answers0