Possible to set `stroke` or `stroke-width` ?

[manifestinteractive]

Is there a way to set common SVG properties?

This is my React Native Component, which correctly loads the SVG. However, no matter what I do, I cannot change the stroke color. Even if I set the SVG stroke color within the SVG file it will still be black when imported as a react component.

import React from 'react'
import { View } from 'react-native'

import SvgUri from 'react-native-svg-uri'
import Account from './svg/account.svg'

const Icon = () => (
  <View>
    <SvgUri
      width='32'
      height='32'
      stroke='#FF0000'
      svgXmlData={Account}
    />
  </View>
);

export default Icon

This is the contents of the SVG file

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 48 48" enable-background="new 0 0 48 48" x="0px" y="0px" width="48px" height="48px" xml:space="preserve">
    <path stroke="#000000" stroke-width="2" stroke-linejoin="round" fill="none" d="M23.7 28.7c3.4 0 5.6-4.6 5.9-5.7 0-0.1 0.5-0.3 0.6-0.4 1.8-3.3-0.2-3.7-0.2-3.7s0.1-1.7-0.3-3.4c0 0-0.3-4-6-4 -5.7 0-6 4-6 4 -0.4 1.6-0.3 3.4-0.3 3.4s-2 0.4-0.2 3.7c0 0.1 0.5 0.3 0.6 0.4C18.1 24.1 20.3 28.7 23.7 28.7z" />
    <path stroke="#000000" stroke-width="2" stroke-linejoin="round" fill="none" d="M10.2 38.2c0-5 3.2-7.3 6.7-8.4 2.4-0.8 3.7-2.1 3.7-2.1" />
    <path stroke="#000000" stroke-width="2" stroke-linejoin="round" fill="none" d="M26.8 27.7c0 0 1.3 1.3 3.7 2.1 3.5 1.1 6.4 3.2 6.7 8.7" />
    <circle stroke="#000000" stroke-width="2" fill="none" stroke-linejoin="round" cx="24" cy="24" r="20" />
</svg>

[manifestinteractive]

Closing this issue out as it looks like I needed to convert the strokes to paths in illustrator to get this working. Corrected SVG file below.

For anyone looking at this, it looks like you just cannot use stroke colors other than black. If you want to use strokes, it looks like you need to convert all strokes to paths. In addition to doing this, you just also set a default fill="" property on each path. Without it, it seems the coloring applied in the RN component will not work ( took a while to figure that out ). So only paths that already have colors will get colored by your components fill prop.

<?xml version="1.0" encoding="utf-8"?>
  <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 48 48" style="enable-background:new 0 0 48 48;" xml:space="preserve">
  <path fill="rgb(42, 42, 42)" d="M23.7,29.7c-2.1,0-3.9-1.4-5.1-3c-0.5-0.7-0.9-1.4-1.3-2.2c-0.4-0.9-1.1-1.5-1.5-2.5c-0.4-1-0.6-2.3,0.1-3.2 c0.2-0.2,0.4-0.4,0.5-0.6c0.1-0.2,0-0.6,0-0.8c0-0.7,0.2-1.4,0.3-2.1c0.2-0.9,0.5-1.7,1.1-2.5c2.4-2.9,7.9-3.1,10.8-0.9 c0.9,0.7,1.6,1.7,1.9,2.9c0.2,0.8,0.3,1.6,0.4,2.3c0,0.3,0,0.6,0,0.9c0.1,0.3,0.2,0.3,0.4,0.6c0.4,0.4,0.5,1,0.5,1.5 c0,0.7-0.2,1.4-0.5,2c-0.3,0.7-0.8,1-1.1,1.6c-0.4,0.7-0.7,1.5-1.2,2.2C27.9,28,26.1,29.7,23.7,29.7z M18,21.9 c0.7,0.4,0.8,0.9,1.1,1.5c0.3,0.8,0.8,1.5,1.3,2.1c1,1.3,2.5,2.5,4.2,2c1.6-0.5,2.7-2.1,3.5-3.5c0.3-0.5,0.4-1.3,0.8-1.8 c0.3-0.4,0.6-0.5,0.9-1c0.1-0.3,0.3-0.8,0.2-1.1c-0.2-0.6-0.9-0.5-0.9-1.3c-0.1-0.8,0-1.6-0.1-2.4c-0.1-0.9-0.3-1.7-0.9-2.4 c-1.9-2.2-7-2.2-8.7,0.2c-0.6,0.9-0.8,2.2-0.8,3.2c0,0.7,0.2,1.8-0.4,2.3c-0.3,0.3-0.5,0.1-0.6,0.6C17.3,20.8,17.8,21.5,18,21.9 C18,22,17.5,20.9,18,21.9z M30.6,23C30.6,23,30.6,23,30.6,23S30.6,23,30.6,23z M30.6,23C30.6,23,30.6,23,30.6,23 C30.6,23,30.6,23,30.6,23z M30.6,23C30.6,23,30.6,23,30.6,23C30.6,23,30.6,23,30.6,23z M30.6,23C30.6,23,30.6,23,30.6,23 C30.6,23,30.6,23,30.6,23z M30.6,23C30.6,23,30.6,23,30.6,23C30.6,23,30.6,23,30.6,23z M30.6,23C30.6,23,30.6,23,30.6,23 C30.6,23,30.6,23,30.6,23z M30.6,23C30.6,23,30.6,23,30.6,23C30.6,23,30.6,23,30.6,23z M30.6,23C30.6,23,30.6,23,30.6,23 C30.6,23,30.6,23,30.6,23z M30.6,23L30.6,23L30.6,23z M18.2,22.6L18.2,22.6L18.2,22.6z M18.2,22.6C18.2,22.6,18.2,22.6,18.2,22.6 C18.2,22.6,18.2,22.6,18.2,22.6z M18.2,22.6C18.2,22.6,18.2,22.6,18.2,22.6C18.2,22.6,18.2,22.6,18.2,22.6z M18.2,22.6 C18.2,22.6,18.2,22.6,18.2,22.6C18.2,22.6,18.2,22.6,18.2,22.6z M18.2,22.6C18.2,22.6,18.2,22.6,18.2,22.6 C18.2,22.6,18.2,22.6,18.2,22.6z M18.2,22.6C18.2,22.6,18.2,22.6,18.2,22.6C18.2,22.6,18.2,22.6,18.2,22.6z M18.2,22.6 C18.2,22.6,18.2,22.6,18.2,22.6C18.2,22.6,18.2,22.6,18.2,22.6z M18.2,22.6C18.2,22.6,18.2,22.6,18.2,22.6 C18.2,22.6,18.2,22.6,18.2,22.6z M18.2,22.6C18.2,22.6,18.2,22.6,18.2,22.6C18.2,22.6,18.2,22.6,18.2,22.6z M18.2,22.6 C18.2,22.6,18.2,22.6,18.2,22.6C18.2,22.6,18.2,22.6,18.2,22.6z M18.2,22.6L18.2,22.6L18.2,22.6z"/>
  <path fill="rgb(42, 42, 42)" d="M11.2,38.2c-0.7,0-1.3,0-2,0c0-3.6,1.8-6.7,5.1-8.4c1.7-0.9,3.6-1.2,5.2-2.4c0.5-0.3,0.3-0.4,0.7-0.1 c0.4,0.3,0.8,0.8,1.2,1.2c-1.8,1.8-4.4,2.1-6.5,3.4C12.4,33.2,11.2,35.5,11.2,38.2z"/>
  <path fill="rgb(42, 42, 42)" d="M36.2,38.6c-0.2-2.9-1.3-5.5-3.9-7c-2.1-1.1-4.5-1.5-6.2-3.2c0.4-0.4,0.8-1.1,1.3-1.3c0.3-0.1,0.4,0.1,0.8,0.4 c1.4,1,3.1,1.4,4.7,2.1c3.5,1.7,5.2,5,5.4,8.8C37.5,38.5,36.9,38.5,36.2,38.6z"/>
  <path fill="rgb(42, 42, 42)" d="M24,45c-8.7,0-16.7-5.6-19.7-13.8c-3-8.3-0.4-17.8,6.3-23.4C17.4,2.2,27.3,1.4,34.8,6c7.5,4.5,11.5,13.5,9.8,22.1 C42.7,37.8,33.9,45,24,45z M24,5C16.1,5,8.8,10.1,6.1,17.6c-2.7,7.5-0.3,16,5.8,21.1c6.1,5.1,15,5.7,21.8,1.7 c6.9-4.1,10.5-12.3,8.9-20.1C40.8,11.5,32.9,5,24,5z"/>
</svg>

[martinchristov]

This is a workaround, not a solution. If you can set "fill" you should be able to set "strokeColor" as well