A component that renders the contents of an SVG file.

$ 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.

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.

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;

These are the props available in @moxy/react-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.

Type: string | Required: false

A className to apply to the component.

Type: object | Required: false

A ref that will be attached to the icon (<svg>) component that @moxy/react-svg ultimately returns.

$ npm test
$ npm test -- --watch # during development

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.

Released under the MIT License.