react-svg
A component that renders the contents of an SVG
file.
Installation
$ npm install @moxy/react-svg
This library is written in modern JavaScript and is published in both CommonJS and ES module transpiled variants. If you target older browsers please make sure to transpile accordingly.
Motivation
In the course of making a project, there is often a need to inject SVG
into the DOM. This package aims to simplify this matter, allowing for SVG
inlining and SVG
spriting.
Usage
import React from 'react';
import Svg from '@moxy/react-svg';
import styles from './index.module.css';
const twitterLogo = import(/* webpackChunkName: "svg-sprite" */ '../media/twitter.inline.svg');
const Home = () => (
<div className={ styles.home }>
<h1>react-svg</h1>
<br />
<p>This is a svg of the Twitter logo.</p>
<Svg svg={ twitterLogo } className={ styles.svg } />
</div>
);
export default Home;
API
These are the props available in @moxy/react-svg
.
svg
Type: string
or object
| Required: true
The contents of the SVG
that should be rendered.
In the case of the prop being an object, it must be the Promise
that gets the contents of the SVG
.
className
Type: string
| Required: false
A className to apply to the component.
forwardedRef
Type: object
| Required: false
A ref that will be attached to the icon (<svg>
) component that @moxy/react-svg
ultimately returns.
Tests
$ npm test
$ npm test -- --watch # during development
Demo
A demo Next.js project is available in the /demo
folder so you can try out this component.
First, build the react-svg
project with:
$ npm run build
To run the demo, do the following inside the demo's folder:
$ npm i
$ npm run dev
Note: Everytime a change is made to the package a rebuild is required to reflect those changes on the demo.
License
Released under the MIT License.