https://github.com/alexcanessa/react-svg-use-external

A React library that enables external SVG <use> references in all browsers that support SVG
https://github.com/alexcanessa/react-svg-use-external

polyfill react svg svg-sprite

Last synced: 4 months ago
JSON representation

A React library that enables external SVG <use> references in all browsers that support SVG

• Host: GitHub
• URL: https://github.com/alexcanessa/react-svg-use-external
• Owner: alexcanessa
• License: mit
• Created: 2018-07-30T12:23:41.000Z (about 7 years ago)
• Default Branch: master
• Last Pushed: 2018-09-18T13:50:23.000Z (about 7 years ago)
• Last Synced: 2025-06-09T12:06:22.973Z (4 months ago)
• Topics: polyfill, react, svg, svg-sprite
• Language: JavaScript
• Homepage: https://react-svg-use-external.netlify.com
• Size: 408 KB
• Stars: 1
• Watchers: 4
• Forks: 1
• Open Issues: 12
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# react-svg-use-external

[![Build Status](https://travis-ci.com/digital-detox/react-svg-use-external.svg?branch=master)](https://travis-ci.com/digital-detox/react-svg-use-external)

[![Code coverage](https://img.shields.io/codecov/c/github/digital-detox/react-svg-use-external/master.svg)](https://codecov.io/gh/digital-detox/react-svg-use-external)

[![npm](https://img.shields.io/npm/v/@digital-detox/react-svg-use-external.svg)](https://www.npmjs.com/package/@digital-detox/react-svg-use-external)

A React library that enables external SVG `` references in all browsers that support SVG.

Check out the [demo](https://react-svg-use-external.netlify.com/).

Inspired by [SVG for Everybody](https://github.com/jonathantneal/svg4everybody).

## Usage

In your React SVG rendering code, replace `` and `` with `` and `` from this library:

```jsx

import { Svg, Use } from "@digital-detox/react-svg-use-external";

  

;

```

These components are drop-in replacements for the `` and `` React DOM intrinsics, supporting the exact same props. In fact, on browsers that don't need the polyfill, you'll find that `Svg === "svg"` and `Use === "use"`.

In the rare case you need to access the underlying DOM elements, `` and `` have you covered by the use of [ref forwarding][]. Note that `` may render a `` (`SVGGElement`) instance and not necessarily an actual `SVGUseElement` when the polyfill is active.

[ref forwarding]: https://reactjs.org/docs/forwarding-refs.html

## Browser support

This library supports IE 9 and up and should generally match [svg4everybody's browser support](https://github.com/jonathantneal/svg4everybody#implementation-status) as it uses similar techniques underneath. Polyfills for `fetch`, `Promise` and `Map` are required in environments that don't support these APIs.

## Differences from `svg4everybody`

- There is no fallback to `` (and hence no support for IE < 9).

- `` references (internal or external) in the imported SVG content aren't resolved recursively ([#5](https://github.com/digital-detox/react-svg-use-external/issues/5)).

- This polyfill observes the strict same-origin policy that all modern browsers apply to `` references (ignoring CORS headers), as formally specified in [SVG 2][].

[svg 2]: https://www.w3.org/TR/SVG2/struct.html#UseElementHrefAttribute