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.