@moxy/react-icon
v1.0.0
Published
A component to render svg icons.
Downloads
6
Readme
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.