https://github.com/tobua/react-sprite
React SVG Sprite Component with Polyfill for older browsers.
https://github.com/tobua/react-sprite
Last synced: 3 months ago
JSON representation
React SVG Sprite Component with Polyfill for older browsers.
- Host: GitHub
- URL: https://github.com/tobua/react-sprite
- Owner: tobua
- Created: 2018-06-18T13:15:26.000Z (almost 7 years ago)
- Default Branch: main
- Last Pushed: 2023-07-02T15:37:59.000Z (almost 2 years ago)
- Last Synced: 2025-02-15T07:40:43.021Z (3 months ago)
- Language: TypeScript
- Homepage: https://tobua.github.io/react-sprite
- Size: 1.03 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
Awesome Lists containing this project
README
# ReactSprite
> Dynamic SVG Sprite Polyfill Component for React
```jsx
// Will be turned into
```
Not a whole lot 😛 but more importantly for browsers that do not support the use tag for SVG sprites the plugin will request and cache the sprite, query it for the relevant symbol and insert it manually into the DOM.
## Installation & Usage
```
npm i react-sprite
```
```jsx
import { useState } from 'react'
import { createRoot } from 'react-dom/client'
import ReactSprite from 'react-sprite'
const SimpleIcon = () =>
const StatefulIcon = () => {
const [icon, toggleOpen] = useState('closed')
return (
toggleOpen(icon === 'closed' ? 'open' : 'closed')}
/>
)
}
const WithOptions = (props) => (
alert('Hello there!')}
{...props}
/>
)
createRoot(document.body).render(
<>
>
)
```