https://github.com/the-road-to-learn-react/use-with-viewbox
Custom hook to add a viewbox attribute to your SVG in case it's missing.
https://github.com/the-road-to-learn-react/use-with-viewbox
react react-svg reactjs svg-viewbox
Last synced: 4 months ago
JSON representation
Custom hook to add a viewbox attribute to your SVG in case it's missing.
- Host: GitHub
- URL: https://github.com/the-road-to-learn-react/use-with-viewbox
- Owner: the-road-to-learn-react
- License: mit
- Created: 2019-06-26T08:02:03.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2020-06-12T08:24:44.000Z (about 5 years ago)
- Last Synced: 2025-03-15T20:11:22.935Z (4 months ago)
- Topics: react, react-svg, reactjs, svg-viewbox
- Language: JavaScript
- Homepage: https://www.robinwieruch.de
- Size: 157 KB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
# useWithViewbox React Hook
[](https://travis-ci.org/the-road-to-learn-react/use-with-viewbox) [](https://slack-the-road-to-learn-react.wieruch.com/) [](https://greenkeeper.io/) 
Custom hook to add a viewbox attribute to your SVG in case it's missing. It calculates the viewbox based on the rendered svg element with its height and width. [Read more about it here.](https://www.robinwieruch.de/react-svg-icon-components/)
## Installation
`npm install use-with-viewbox`
## Usage
```
import useWithViewbox from 'use-with-viewbox';
const MySvg = (props) => {
const ref = React.createRef();
useViewbox(ref);
return (
// SVG Content ...
);
};
export default MySvg;
```
## Contribute
- `git clone [email protected]:the-road-to-learn-react/use-with-viewbox.git`
- `cd use-with-viewbox`
- `npm install`
### More
- [Publishing a Node Package to NPM](https://www.robinwieruch.de/publish-npm-package-node/)
- [Node.js Testing Setup](https://www.robinwieruch.de/node-js-testing-mocha-chai/)
- [React Testing Setup](https://www.robinwieruch.de/react-testing-tutorial/)