fix: correctly export rest of the props and add onError to parsing (#1814)

PR correctly exporting rest of the props and adding onError to parsing in other Svg components.
2025-12-05 22:56:11 +00:00 · 2022-07-26 15:27:56 +02:00
parent 82717e656a
commit 9c1a8b1f71
9 changed files with 175 additions and 52 deletions
--- a/TestsExample/App.js
+++ b/TestsExample/App.js
@@ -2,6 +2,7 @@
 import React from 'react';
 import ColorTest from './src/ColorTest';
 import Test1718 from './src/Test1718';
+import Test1813 from './src/Test1813';

 export default function App() {
  return <ColorTest />;
--- a/TestsExample/assets/ruby.svg
+++ b/TestsExample/assets/ruby.svg
@@ -0,0 +1,12 @@
+<svg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'>
+<path d='M20,100l74-5l6-75zM61,35l37-2l-29-24z' fill='#b11' fill-rule='evenodd'/>
+<path d='M21,100l74-5l-47-4zM98,33c4-12,5-29-14-33l-15,9l29,24z' fill='#811' fill-rule='evenodd'/>
+<path d='M7,67l14,33l11-38z' fill='#d44' fill-rule='evenodd'/>
+<path d='M29,61l42,13l-10-42zM56,0h28l-16,10zM1,51l-1,29l7-13z' fill='#c22' fill-rule='evenodd'/>
+<path d='M32,61l39,13c-14,13-30,24-50,26z' fill='#a00' fill-rule='evenodd'/>
+<path d='M61,35l10,39l17-23zM32,61l16,30c9-5,16-11,23-17l-39-13z' fill='#900' fill-rule='evenodd'/>
+<path d='M61,35l27,17l10-20l-37,3z' fill='#800' fill-rule='evenodd'/>
+<path d='M71,74l23,21l-6-44zM0,80c1,19,15,20,21,20l-14-33l-7,13zM7,67l-2,26c4,6,9,7,15,6c-4-11-13-32-13-32zM69,9l30,4c-1-7-6-11-15-13l-15,9z' fill='#911' fill-rule='evenodd'/>
+<path d='M1,51l6,16l25-5l29-27l8-26l-13-9l-22,8c-6,7-20,19-20,19c-1,1-9,16-13,24z' fill='#ebb' fill-rule='evenodd'/>
+<path d='M21,21c15-14,34-23,42-16c7,8-1,26-16,40c-14,15-33,24-41,17c-7-7,1-26,15-41z' fill='#b11' fill-rule='evenodd'/>
+</svg>
--- a/TestsExample/ios/Podfile.lock
+++ b/TestsExample/ios/Podfile.lock
@@ -347,7 +347,7 @@ PODS:
    - React-jsi (= 0.68.0-rc.1)
    - React-logger (= 0.68.0-rc.1)
    - React-perflogger (= 0.68.0-rc.1)
-  - RNSVG (12.3.0):
+  - RNSVG (12.4.2):
    - React-Core
  - SocketRocket (0.6.0)
  - Yoga (1.14.0)
@@ -501,7 +501,7 @@ SPEC CHECKSUMS:
  CocoaAsyncSocket: 065fd1e645c7abab64f7a6a2007a48038fdc6a99
  DoubleConversion: 831926d9b8bf8166fd87886c4abab286c2422662
  FBLazyVector: bcdeff523be9f87a135b7c6fde8736db94904716
-  FBReactNativeSpec: 137186498f03934daf999cec565fbc3d291f294c
+  FBReactNativeSpec: e7746531d15c5440c7588d148797f9d20b12ba89
  Flipper: 26fc4b7382499f1281eb8cb921e5c3ad6de91fe0
  Flipper-Boost-iOSX: fd1e2b8cbef7e662a122412d7ac5f5bea715403c
  Flipper-DoubleConversion: 57ffbe81ef95306cc9e69c4aa3aeeeeb58a6a28c
@@ -540,11 +540,11 @@ SPEC CHECKSUMS:
  React-RCTVibration: 5cab6419b68d5750482b0fc34dbb27af550469cc
  React-runtimeexecutor: 10cda3a396b14a764a5f86088e7e3810b9c66cec
  ReactCommon: 73a01eb83f22c84a6b09dfb60f3463888ebd4975
-  RNSVG: 302bfc9905bd8122f08966dc2ce2d07b7b52b9f8
+  RNSVG: 72bf57dc8f6dfa304bdab465cd8371c62bc70b16
  SocketRocket: fccef3f9c5cedea1353a9ef6ada904fde10d6608
  Yoga: d29dba374c1a582b40cfb736647b5e1b5ed35dba
  YogaKit: f782866e155069a2cca2517aafea43200b01fd5a

 PODFILE CHECKSUM: 54439993ba279e900534ada11d49259eaead9508

-COCOAPODS: 1.11.2
+COCOAPODS: 1.11.3
--- a/TestsExample/src/Test1813.tsx
+++ b/TestsExample/src/Test1813.tsx
@@ -0,0 +1,102 @@
+import React from 'react';
+import { SvgFromUri, SvgFromXml, SvgUri, SvgXml, SvgCss, SvgCssUri, SvgWithCss, SvgWithCssUri, WithLocalSvg, LocalSvg } from 'react-native-svg';
+
+const asset = require('../assets/ruby.svg');
+const normalUri = "https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/ruby.svg";
+const uriWithCss = "http://thenewcode.com/assets/svg/accessibility.svg";
+const xml = `
+  <svg width="32" height="32" viewBox="0 0 32 32">
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      fill="url(#gradient)"
+      d="M4 0C1.79086 0 0 1.79086 0 4V28C0 30.2091 1.79086 32 4 32H28C30.2091 32 32 30.2091 32 28V4C32 1.79086 30.2091 0 28 0H4ZM17 6C17 5.44772 17.4477 5 18 5H20C20.5523 5 21 5.44772 21 6V25C21 25.5523 20.5523 26 20 26H18C17.4477 26 17 25.5523 17 25V6ZM12 11C11.4477 11 11 11.4477 11 12V25C11 25.5523 11.4477 26 12 26H14C14.5523 26 15 25.5523 15 25V12C15 11.4477 14.5523 11 14 11H12ZM6 18C5.44772 18 5 18.4477 5 19V25C5 25.5523 5.44772 26 6 26H8C8.55228 26 9 25.5523 9 25V19C9 18.4477 8.55228 18 8 18H6ZM24 14C23.4477 14 23 14.4477 23 15V25C23 25.5523 23.4477 26 24 26H26C26.5523 26 27 25.5523 27 25V15C27 14.4477 26.5523 14 26 14H24Z"
+    />
+    <defs>
+      <linearGradient
+        id="gradient"
+        x1="0"
+        y1="0"
+        x2="8.46631"
+        y2="37.3364"
+        gradient-units="userSpaceOnUse">
+        <stop offset="0" stop-color="#FEA267" />
+        <stop offset="1" stop-color="#E75A4C" />
+      </linearGradient>
+    </defs>
+  </svg>
+`;
+
+const css = `
+  <svg width="32" height="32" viewBox="0 0 32 32">
+    <style>
+      .red {
+        fill: #ff0000;
+      }
+    </style>
+    <rect class="red" x="0" y="0" width="32" height="32" />
+  </svg>
+`;
+
+export default () => {
+  const [uri, setUri] = React.useState('https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/not_existing.svg')
+
+  return (
+    <>
+      <SvgUri
+        onError={() => setUri(normalUri)}
+        width="100"
+        height="100"
+        uri={uri}
+      />
+    <SvgFromUri
+        onError={(error) => console.log(error)}
+        width="100"
+        height="100"
+        uri={normalUri}
+      />
+    <SvgFromXml
+        width="100"
+        height="100"
+        xml={xml}
+      />
+    <SvgXml
+        width="100"
+        height="100"
+        xml={xml}
+      />
+    <SvgCss
+        width="100"
+        height="100"
+        xml={css}
+      />
+    <SvgCssUri
+        onError={(error) => console.log(error)}
+        width="100"
+        height="100"
+        uri={uriWithCss}
+      />
+    <SvgWithCss
+        width="100"
+        height="100"
+        xml={css}
+      />
+    <SvgWithCssUri
+        onError={(error) => console.log(error)}
+        width="100"
+        height="100"
+        uri={uriWithCss}
+      />
+    <WithLocalSvg
+        width="100"
+        height="100"
+        asset={asset}
+      />
+    <LocalSvg
+        width="100"
+        height="100"
+        asset={asset}
+      />
+    </>
+  );
+}
--- a/TestsExample/yarn.lock
+++ b/TestsExample/yarn.lock
@@ -2312,18 +2312,18 @@ cross-spawn@^7.0.0, cross-spawn@^7.0.2:
    shebang-command "^2.0.0"
    which "^2.0.1"

-css-select@^4.2.1:
-  version "4.2.1"
-  resolved "https://registry.yarnpkg.com/css-select/-/css-select-4.2.1.tgz#9e665d6ae4c7f9d65dbe69d0316e3221fb274cdd"
-  integrity sha512-/aUslKhzkTNCQUB2qTX84lVmfia9NyjP3WpDGtj/WxhwBzWBYUV3DgUpurHTme8UTPcPlAD1DJ+b0nN/t50zDQ==
+css-select@^5.1.0:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/css-select/-/css-select-5.1.0.tgz#b8ebd6554c3637ccc76688804ad3f6a6fdaea8a6"
+  integrity sha512-nwoRF1rvRRnnCqqY7updORDsuqKzqYJ28+oSMaJMMgOauh3fvwHqMS7EZpIPqK8GL+g9mKxF1vP/ZjSeNjEVHg==
  dependencies:
    boolbase "^1.0.0"
-    css-what "^5.1.0"
-    domhandler "^4.3.0"
-    domutils "^2.8.0"
+    css-what "^6.1.0"
+    domhandler "^5.0.2"
+    domutils "^3.0.1"
    nth-check "^2.0.1"

-css-tree@^1.0.0-alpha.39:
+css-tree@^1.1.3:
  version "1.1.3"
  resolved "https://registry.yarnpkg.com/css-tree/-/css-tree-1.1.3.tgz#eb4870fb6fd7707327ec95c2ff2ab09b5e8db91d"
  integrity sha512-tRpdppF7TRazZrjJ6v3stzv93qxRcSsFmW6cX0Zm2NVKpxE1WV1HblnghVv9TreireHkqI/VDEsfolRF1p6y7Q==
@@ -2331,10 +2331,10 @@ css-tree@^1.0.0-alpha.39:
    mdn-data "2.0.14"
    source-map "^0.6.1"

-css-what@^5.1.0:
-  version "5.1.0"
-  resolved "https://registry.yarnpkg.com/css-what/-/css-what-5.1.0.tgz#3f7b707aadf633baf62c2ceb8579b545bb40f7fe"
-  integrity sha512-arSMRWIIFY0hV8pIxZMEfmMI47Wj3R/aWpZDDxWYCPEiOMv6tfOrnpDtgxBYPEQD4V0Y/958+1TdC3iWTFcUPw==
+css-what@^6.1.0:
+  version "6.1.0"
+  resolved "https://registry.yarnpkg.com/css-what/-/css-what-6.1.0.tgz#fb5effcf76f1ddea2c81bdfaa4de44e79bac70f4"
+  integrity sha512-HTUrgRJ7r4dsZKU6GjmpfRK1O76h97Z8MfS1G0FozR+oF2kG6Vfe8JE6zwrkbxigziPHinCJ+gCPjA9EaBDtRw==

 cssom@^0.4.4:
  version "0.4.4"
@@ -2500,19 +2500,19 @@ doctrine@^3.0.0:
  dependencies:
    esutils "^2.0.2"

-dom-serializer@^1.0.1:
-  version "1.3.2"
-  resolved "https://registry.yarnpkg.com/dom-serializer/-/dom-serializer-1.3.2.tgz#6206437d32ceefaec7161803230c7a20bc1b4d91"
-  integrity sha512-5c54Bk5Dw4qAxNOI1pFEizPSjVsx5+bpJKmL2kPn8JhBUq2q09tTCa3mjijun2NfK78NMouDYNMBkOrPZiS+ig==
+dom-serializer@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/dom-serializer/-/dom-serializer-2.0.0.tgz#e41b802e1eedf9f6cae183ce5e622d789d7d8e53"
+  integrity sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==
  dependencies:
-    domelementtype "^2.0.1"
-    domhandler "^4.2.0"
-    entities "^2.0.0"
+    domelementtype "^2.3.0"
+    domhandler "^5.0.2"
+    entities "^4.2.0"

-domelementtype@^2.0.1, domelementtype@^2.2.0:
-  version "2.2.0"
-  resolved "https://registry.yarnpkg.com/domelementtype/-/domelementtype-2.2.0.tgz#9a0b6c2782ed6a1c7323d42267183df9bd8b1d57"
-  integrity sha512-DtBMo82pv1dFtUmHyr48beiuq792Sxohr+8Hm9zoxklYPfa6n0Z3Byjj2IV7bmr2IyqClnqEQhfgHJJ5QF0R5A==
+domelementtype@^2.3.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/domelementtype/-/domelementtype-2.3.0.tgz#5c45e8e869952626331d7aab326d01daf65d589d"
+  integrity sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==

 domexception@^2.0.1:
  version "2.0.1"
@@ -2521,21 +2521,21 @@ domexception@^2.0.1:
  dependencies:
    webidl-conversions "^5.0.0"

-domhandler@^4.2.0, domhandler@^4.3.0:
-  version "4.3.0"
-  resolved "https://registry.yarnpkg.com/domhandler/-/domhandler-4.3.0.tgz#16c658c626cf966967e306f966b431f77d4a5626"
-  integrity sha512-fC0aXNQXqKSFTr2wDNZDhsEYjCiYsDWl3D01kwt25hm1YIPyDGHvvi3rw+PLqHAl/m71MaiF7d5zvBr0p5UB2g==
+domhandler@^5.0.1, domhandler@^5.0.2:
+  version "5.0.3"
+  resolved "https://registry.yarnpkg.com/domhandler/-/domhandler-5.0.3.tgz#cc385f7f751f1d1fc650c21374804254538c7d31"
+  integrity sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==
  dependencies:
-    domelementtype "^2.2.0"
+    domelementtype "^2.3.0"

-domutils@^2.8.0:
-  version "2.8.0"
-  resolved "https://registry.yarnpkg.com/domutils/-/domutils-2.8.0.tgz#4437def5db6e2d1f5d6ee859bd95ca7d02048135"
-  integrity sha512-w96Cjofp72M5IIhpjgobBimYEfoPjx1Vx0BSX9P30WBdZW2WIKU0T1Bd0kz2eNZ9ikjKgHbEyKx8BB6H1L3h3A==
+domutils@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/domutils/-/domutils-3.0.1.tgz#696b3875238338cb186b6c0612bd4901c89a4f1c"
+  integrity sha512-z08c1l761iKhDFtfXO04C7kTdPBLi41zwOZl00WS8b5eiaebNpY00HKbztwBq+e3vyqWNwWF3mP9YLUeqIrF+Q==
  dependencies:
-    dom-serializer "^1.0.1"
-    domelementtype "^2.2.0"
-    domhandler "^4.2.0"
+    dom-serializer "^2.0.0"
+    domelementtype "^2.3.0"
+    domhandler "^5.0.1"

 ee-first@1.1.1:
  version "1.1.1"
@@ -2576,10 +2576,10 @@ enquirer@^2.3.5:
  dependencies:
    ansi-colors "^4.1.1"

-entities@^2.0.0:
-  version "2.2.0"
-  resolved "https://registry.yarnpkg.com/entities/-/entities-2.2.0.tgz#098dc90ebb83d8dffa089d55256b351d34c4da55"
-  integrity sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A==
+entities@^4.2.0:
+  version "4.3.1"
+  resolved "https://registry.yarnpkg.com/entities/-/entities-4.3.1.tgz#c34062a94c865c322f9d67b4384e4169bcede6a4"
+  integrity sha512-o4q/dYJlmyjP2zfnaWDUC6A3BQFmVTX+tZPezK7k0GLSU9QYCauscf5Y+qcEPzKL+EixVouYDgLQK5H9GrLpkg==

 envinfo@^7.7.2:
  version "7.8.1"
@@ -5528,10 +5528,8 @@ react-native-gradle-plugin@^0.0.4:
    react-native-codegen "*"

 "react-native-svg@link:..":
-  version "12.3.0"
-  dependencies:
-    css-select "^4.2.1"
-    css-tree "^1.0.0-alpha.39"
+  version "0.0.0"
+  uid ""

 react-native@0.68.0-rc.1:
  version "0.68.0-rc.1"
--- a/src/LocalSvg.tsx
+++ b/src/LocalSvg.tsx
@@ -5,6 +5,7 @@ import resolveAssetSource from 'react-native/Libraries/Image/resolveAssetSource'

 import { fetchText } from './xml';
 import { SvgCss, SvgWithCss } from './css';
+import { SvgProps } from './elements/Svg';

 const { getRawResource } = NativeModules.RNSVGRenderableManager || {};

@@ -48,7 +49,10 @@ export const loadLocalRawResource =
    ? loadLocalRawResourceDefault
    : loadLocalRawResourceAndroid;

-export type LocalProps = { asset?: string | number; override?: Object };
+export type LocalProps = SvgProps & {
+  asset?: string | number;
+  override?: Object;
+};
 export type LocalState = { xml: string | null };

 export function LocalSvg(props: LocalProps) {
--- a/src/ReactNativeSVG.ts
+++ b/src/ReactNativeSVG.ts
@@ -42,7 +42,12 @@ import {
  SvgWithCssUri,
  inlineStyles,
 } from './css';
-import { LocalSvg, WithLocalSvg, loadLocalRawResource } from './LocalSvg';
+import {
+  LocalSvg,
+  WithLocalSvg,
+  loadLocalRawResource,
+  LocalProps,
+} from './LocalSvg';
 import {
  RNSVGCircle,
  RNSVGClipPath,
@@ -94,6 +99,7 @@ export {
  UriProps,
  XmlProps,
  AstProps,
+  LocalProps,
 };

 export {
--- a/src/css.tsx
+++ b/src/css.tsx
@@ -720,7 +720,7 @@ export class SvgWithCss extends Component<XmlProps, XmlState> {
    try {
      this.setState({ ast: xml ? parse(xml, inlineStyles) : null });
    } catch (e) {
-      console.error(e);
+      this.props.onError ? this.props.onError(e as Error) : console.error(e);
    }
  }
  render() {
@@ -747,7 +747,7 @@ export class SvgWithCssUri extends Component<UriProps, UriState> {
    try {
      this.setState({ xml: uri ? await fetchText(uri) : null });
    } catch (e) {
-      console.error(e);
+      this.props.onError ? this.props.onError(e as Error) : console.error(e);
    }
  }
  render() {
--- a/src/xml.tsx
+++ b/src/xml.tsx
@@ -205,7 +205,7 @@ export type Styles = { [property: string]: string };

 export function getStyle(string: string): Styles {
  const style: Styles = {};
-  const declarations = string.split(';').filter(v => v.trim());
+  const declarations = string.split(';').filter((v) => v.trim());
  const { length } = declarations;
  for (let i = 0; i < length; i++) {
    const declaration = declarations[i];