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: about 1 month 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 (over 5 years ago)
• Default Branch: master
• Last Pushed: 2020-06-12T08:24:44.000Z (over 4 years ago)
• Last Synced: 2024-11-09T14:17:45.869Z (about 2 months ago)
• Topics: react, react-svg, reactjs, svg-viewbox
• Language: JavaScript
• Homepage: https://www.robinwieruch.de
• Size: 157 KB
• Stars: 1
• Watchers: 3
• 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

[![Build Status](https://travis-ci.org/the-road-to-learn-react/use-with-viewbox.svg?branch=master)](https://travis-ci.org/the-road-to-learn-react/use-with-viewbox) [![Slack](https://slack-the-road-to-learn-react.wieruch.com/badge.svg)](https://slack-the-road-to-learn-react.wieruch.com/) [![Greenkeeper badge](https://badges.greenkeeper.io/the-road-to-learn-react/use-with-viewbox.svg)](https://greenkeeper.io/) ![NPM](https://img.shields.io/npm/l/use-with-viewbox.svg)

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/)