react-icon

A component to render SVG icons.

Installation

$ npm install @moxy/react-icon

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

This package was implemented to help import SVG icons in react projects.

Usage

import React, { forwardRef } from 'react';
import Icon from '@moxy/react-icon';

const arrowLeftSvg = import(/* webpackChunkName: "svg-sprite" */ '../media/arrow-left.inline.svg');
const ArrowLeftIcon = forwardRef((props, ref) => <Icon ref={ ref } { ...props } svg={ arrowLeftSvg } />);

const MyComponent = ({ children }) => (
    <div>
        { children }
        <ArrowLeftIcon />
    </div>
);

API

These are the props available in @moxy/react-icon.

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.

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-icon project with:

$ npm run build

To run the demo, do the following inside the demo's folder:

$ npm i
$ npm run dev

License

Released under the MIT License.