https://github.com/trevonerd/react-remote-svg
A React component that fetches an SVG from a URL and allows dynamic styling and caching.
https://github.com/trevonerd/react-remote-svg
Last synced: 2 months ago
JSON representation
A React component that fetches an SVG from a URL and allows dynamic styling and caching.
- Host: GitHub
- URL: https://github.com/trevonerd/react-remote-svg
- Owner: trevonerd
- Created: 2023-07-07T11:09:38.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2023-12-04T11:14:04.000Z (over 1 year ago)
- Last Synced: 2025-02-25T20:08:03.594Z (3 months ago)
- Language: TypeScript
- Size: 556 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# RemoteSVG
RemoteSVG is a React component for efficiently loading SVG icons from remote sources.
## Features
- Lazy loading: Icons are fetched only when they become visible on the screen, improving performance.
- Customizable colors and effects: Supports customization of the icon appearance in different states - default, hover, active, and disabled.
- Dark mode support: Ability to specify different icon variants for light and dark themes.
- Flexible dimensions: Allows customization of the width and height of the icon.
- Accessibility: Supports setting the alt text and title attributes for better accessibility.
## Installation
```bash
# Using npm
npm install react-remote-svg
# Using yarn
yarn add react-remote-svg
```
## Usage
```jsx
import React from 'react';
import RemoteSVG from 'react-remote-svg';
const MyComponent = () => (
);
export default MyComponent;
```
## Props
| Prop | Type | Description |
| ---------------- | -------------- | -------------------------------------- |
| url | string | The URL of the SVG icon. |
| alt | string | Alternative text for accessibility. |
| title | string | Title text for accessibility. |
| width | number\|string | Width of the icon. |
| height | number\|string | Height of the icon. |
| activeEffect | CSSProperties | Styles for active state. |
| disabledEffect | CSSProperties | Styles for disabled state. |
| hoverEffect | CSSProperties | Styles for hover state. |
| dark | boolean | Whether to use dark theme variant. |
| useDisabledImage | boolean | Whether to use disabled image variant. |
| useActiveImage | boolean | Whether to use active image variant. |
| useHoverImage | boolean | Whether to use hover image variant. |
| lazyLoad | boolean | Enable lazy loading when visible. |
## Testing
To test components that depend on `RemoteSVG`, you can use a mock component in your tests. Here's how you can do it:
1. In your test setup file (e.g., `jest.setup.js`), add the following line to import and use the mock component:
```javascript
require('react-remote-svg/mock');
```
2. Now, you can use the RemoteSVG component in your tests to verify the behavior of components that depend on RemoteSVG.