diff --git a/README.md b/README.md
index a5b6be2e..d7039183 100644
--- a/README.md
+++ b/README.md
@@ -27,6 +27,7 @@ react-native link react-native-svg # not react-native-svg-uri !!!
| `source` | `ImageSource` | | Same kind of `source` prop that `` component has
| `svgXmlData` | `String` | | You can pass the SVG as String directly
| `fill` | `Color` | | Overrides all fill attributes of the svg file
+| `stroke` | `Color` | | Overrides stroke attribute of the svg file
| `fillAll` | `Boolean` | Adds the fill color to the entire svg object
## Known Bugs
diff --git a/index.d.ts b/index.d.ts
index 3fd7685f..77381e23 100644
--- a/index.d.ts
+++ b/index.d.ts
@@ -35,11 +35,16 @@ interface SvgUriProps {
*/
fill?: string
+ /**
+ * Stroke color for the svg object
+ */
+ stroke?: string
+
/**
* Invoked when load completes successfully.
*/
onLoad?: Function
-
+
/**
* Fill the entire svg element with same color
*/
diff --git a/index.js b/index.js
index 20107ac6..5394fdc2 100644
--- a/index.js
+++ b/index.js
@@ -47,7 +47,7 @@ const G_ATTS = ['id'];
const CIRCLE_ATTS = ['cx', 'cy', 'r'];
const PATH_ATTS = ['d'];
-const RECT_ATTS = ['width', 'height'];
+const RECT_ATTS = ['width', 'height', 'rx', 'ry'];
const LINE_ATTS = ['x1', 'y1', 'x2', 'y2'];
const LINEARG_ATTS = LINE_ATTS.concat(['id', 'gradientUnits']);
const RADIALG_ATTS = CIRCLE_ATTS.concat(['id', 'gradientUnits']);
@@ -83,7 +83,7 @@ class SvgUri extends Component{
constructor(props){
super(props);
- this.state = {fill: props.fill, svgXmlData: props.svgXmlData};
+ this.state = {fill: props.fill, svgXmlData: props.svgXmlData, stroke: props.stroke};
this.createSVGElement = this.createSVGElement.bind(this);
this.obtainComponentAtts = this.obtainComponentAtts.bind(this);
@@ -119,6 +119,9 @@ class SvgUri extends Component{
if (nextProps.fill !== this.props.fill) {
this.setState({ fill: nextProps.fill });
}
+ if (nextProps.stroke !== this.props.stroke) {
+ this.setState({ stroke: nextProps.stroke });
+ }
}
componentWillUnmount() {
@@ -149,12 +152,16 @@ class SvgUri extends Component{
// Remove empty strings from children array
trimElementChilden(children) {
+ let emptyItems=[]
for (child of children) {
- if (typeof child === 'string') {
- if (child.trim().length === 0)
- children.splice(children.indexOf(child), 1);
+ if (typeof child === 'string') {
+ if (child.trim().length === 0)
+ emptyItems.push(child)
}
}
+ emptyItems.forEach(child=>{
+ children.splice(children.indexOf(child), 1);
+ })
}
createSVGElement(node, childs){
@@ -227,12 +234,16 @@ class SvgUri extends Component{
if (this.state.fill && this.props.fillAll) {
styleAtts.fill = this.state.fill;
}
+ if (this.state.stroke) {
+ styleAtts.stroke = this.state.stroke;
+ }
Array.from(attributes).forEach(({nodeName, nodeValue}) => {
Object.assign(styleAtts, utils.transformStyle({
nodeName,
nodeValue,
- fillProp: this.state.fill
+ fillProp: this.state.fill,
+ strokeProp: this.state.stroke
}));
});
@@ -252,7 +263,7 @@ class SvgUri extends Component{
inspectNode(node){
// Only process accepted elements
if (!ACCEPTED_SVG_ELEMENTS.includes(node.nodeName)) {
- return ();
+ return null;
}
// Process the xml node
@@ -311,6 +322,7 @@ SvgUri.propTypes = {
svgXmlData: PropTypes.string,
source: PropTypes.any,
fill: PropTypes.string,
+ stroke: PropTypes.string,
onLoad: PropTypes.func,
fillAll: PropTypes.bool
}