A React component to dynamically fetch and display SVGs from URLs or from your codebase.
Install the package via Bun or Yarn:
bun add react-dynamic-svg
yarn add react-dynamic-svg
To use the component with an SVG URL:
import React from 'react'; import DynamicSvg from 'react-dynamic-svg';
const App = () => (
<div>
<DynamicSvg url="https://example.com/my.svg" />
</div>
);
export default App;
To use the component with an SVG file in your codebase:
import React from 'react'; import DynamicSvg from 'react-dynamic-svg'; import HomeIcon from './assets/icon/home.svg';
const App = () => (
<div>
<DynamicSvg svgFile={HomeIcon} />
</div>
);
export default App;
Prop | Type | Description |
---|---|---|
url |
string | The URL of the SVG file to fetch and display. |
svgFile |
React.FC | An imported SVG file from the codebase. |
Contributions are welcome! Please follow the steps below to contribute:
Fork the repository on GitHub and clone it to your local machine.
git clone https://github.com/gloverola/react-dynamic-svg.git cd react-dynamic-svg
Install the necessary dependencies using Bun:
bun install
Make the necessary changes in the src
directory. Ensure your changes follow the code style and conventions used in the project.
Build the project to ensure there are no errors:
bun run build
If there are tests, make sure all tests pass before submitting your changes. You can run the tests using:
bun test
Commit your changes and push them to your forked repository:
git add . git commit -m "Describe your changes" git push origin your-branch-name
Create a pull request on the original repository. Provide a clear description of your changes and why they are necessary.
Please adhere to the Contributor Covenant Code of Conduct when contributing to this project.
This project is licensed under the MIT License - see the LICENSE file for details.