feat: initial implementation (#1)

Author: ruimonteiro93

.gitignore

@@ -3,3 +3,5 @@ npm-debug.log*
 coverage
 lib/
 es/
+dist/
+

README.md

@@ -1,15 +1,91 @@
-# react-lib-template
-A template that aims to make the implementation of `React` component packages easier and more methodic.
+# react-icon
+
+[![NPM version][npm-image]][npm-url] [![Downloads][downloads-image]][npm-url] [![Build Status][build-status-image]][build-status-url] [![Coverage Status][codecov-image]][codecov-url] [![Dependency status][david-dm-image]][david-dm-url] [![Dev Dependency status][david-dm-dev-image]][david-dm-dev-url]
+
+[npm-url]:https://npmjs.org/package/@moxy/react-icon
+[downloads-image]:https://img.shields.io/npm/dm/@moxy/react-icon.svg
+[npm-image]:https://img.shields.io/npm/v/@moxy/react-icon.svg
+[build-status-url]:https://github.com/moxystudio/react-icon/actions
+[build-status-image]:https://img.shields.io/github/workflow/status/moxystudio/react-icon/Node%20CI/master
+[codecov-url]:https://codecov.io/gh/moxystudio/react-icon
+[codecov-image]:https://img.shields.io/codecov/c/github/moxystudio/react-icon/master.svg
+[david-dm-url]:https://david-dm.org/moxystudio/react-icon
+[david-dm-image]:https://img.shields.io/david/moxystudio/react-icon.svg
+[david-dm-dev-url]:https://david-dm.org/moxystudio/react-icon?type=dev
+[david-dm-dev-image]:https://img.shields.io/david/dev/moxystudio/react-icon.svg
+
+A component to render `SVG` icons.
+
+## Installation
+
+```sh
+$ 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
 
-This repo serves as the template for the creation of MOXY's base `React` components. To use this, just select `@moxystudio/react-lib-template` as the template when creating a new repo for your new package, and you're all set to start working.
+```js
+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
+
+```sh
+$ npm test
+$ npm test -- --watch # during development
+```
+
+## Demo
+
+A demo [Next.js](https://nextjs.org/) project is available in the [`/demo`](./demo) folder so you can try out this component.
+
+First, build the `react-icon` project with:
+
+```sh
+$ npm run build
+```
+
+To run the demo, do the following inside the demo's folder:
 
-This template already includes a `src` folder, with 2 dummy files ready for you to start your work. `NewComponent` is a dummy component, available for demonstration purposes. Just rename `NewComponent.js` and change it according to your needs. An `index.js` for exporting is available as well. Do not forget to update the unit tests and try to reach as much coverage as possible.
+```sh
+$ npm i
+$ npm run dev
+```
 
-In order to help make proper use of this template, here's a quick checklist with some crucial stuff to have in mind:
+## License
 
-- Remember to change `package.json` name, description, keywords, etc.
-- Review the dependencies, removing the unnecessary ones.
-- Just to stress this out again: add unit tests and check for a good coverage. The closest to 100%, the better.
-- Make sure to update the `README`, documenting the features of your component as best as possible.
+Released under the [MIT License](./LICENSE).

demo/.gitignore

@@ -0,0 +1,3 @@
+node_modules
+.next/
+out/

demo/next.config.js

@@ -0,0 +1,31 @@
+/* eslint-disable import/no-commonjs */
+
+const { withSVG } = require('@moxy/next-common-files');
+const withOneOf = require('@moxy/next-webpack-oneof');
+const withPlugins = require('next-compose-plugins');
+
+const withSymlinks = (nextConfig = {}) => ({
+    ...nextConfig,
+    webpack(config) {
+        config.resolve.symlinks = false;
+
+        return config;
+    },
+});
+
+module.exports = (phase, nextConfig) =>
+    withPlugins([
+        withSymlinks,
+        withOneOf,
+        withSVG(),
+        withSVG({
+            include: /\.data-url\./,
+            options: {
+                limit: Infinity,
+            },
+        }),
+        withSVG({
+            include: /\.inline\./,
+            inline: true,
+        }),
+    ], {})(phase, nextConfig);