react-svg 17.0.3 → 17.0.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +15 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -49,7 +49,7 @@ root.render(<ReactSVG src="svg.svg" />)
|
|
|
49
49
|
|
|
50
50
|
**Props**
|
|
51
51
|
|
|
52
|
-
- `src` - The SVG URL.
|
|
52
|
+
- `src` - The SVG URL. Must be a fetchable URL (relative or absolute): `data:` URIs and inline SVG strings are not supported.
|
|
53
53
|
- `afterInjection(svg)` - _Optional_ Function to call after the SVG is injected. `svg` is the injected SVG DOM element. If an error occurs during execution it will be routed to the `onError` callback, and if a `fallback` is specified it will be rendered. Defaults to `() => {}`.
|
|
54
54
|
- `beforeInjection(svg)` - _Optional_ Function to call just before the SVG is injected. `svg` is the SVG DOM element which is about to be injected. If an error occurs during execution it will be routed to the `onError` callback, and if a `fallback` is specified it will be rendered. Defaults to `() => {}`.
|
|
55
55
|
- `desc` - _Optional_ String used for SVG `<desc>` element content. If a `<desc>` exists it will be replaced, otherwise a new `<desc>` is created. When set, a unique `id` is added to the `<desc>` element and `aria-describedby` is set on the SVG for assistive technology. Defaults to `''`, which is a noop.
|
|
@@ -151,6 +151,20 @@ Related issues and PRs:
|
|
|
151
151
|
|
|
152
152
|
</details>
|
|
153
153
|
|
|
154
|
+
<details>
|
|
155
|
+
|
|
156
|
+
<summary>
|
|
157
|
+
Can I use data URIs or inline SVG strings?
|
|
158
|
+
</summary>
|
|
159
|
+
|
|
160
|
+
No. The `src` prop must be a fetchable URL. Under the hood, [@tanem/svg-injector](https://github.com/tanem/svg-injector) uses `XMLHttpRequest` to fetch the SVG, so `data:image/svg+xml;base64,...` and `data:image/svg+xml,...` sources are not supported.
|
|
161
|
+
|
|
162
|
+
If you already have the SVG markup as a string (for example, a dynamically generated chart), consider parsing it with `DOMParser` and appending the result yourself, or rendering it with `dangerouslySetInnerHTML`. These approaches avoid the fetch step entirely and will also avoid the brief flash that occurs when `react-svg` re-injects on `src` change.
|
|
163
|
+
|
|
164
|
+
**Security note:** inserting SVG strings into the DOM bypasses React's built-in sanitisation and can expose your application to XSS if the content is not trusted. If the SVG originates from user input or a third party, sanitise it first with a library like [DOMPurify](https://github.com/cure53/DOMPurify) before inserting it into the page.
|
|
165
|
+
|
|
166
|
+
</details>
|
|
167
|
+
|
|
154
168
|
## License
|
|
155
169
|
|
|
156
170
|
MIT
|