overhaul: dynamic svg loading from package

added size attribute / option
added option to show colourless emojis

Author: drinking-code

README.md

@@ -1,9 +1,20 @@
 # Openmoji for React
 unofficial; bodged by drinking-code  
-**do not use in production**
+not optimized for production use  
+
+1. [What is Openmoji for React?](#what-is-openmoji-for-react)
+2. [Installation](#installation)
+3. [Usage](#usage)
+    1. [Automatically](#automatically)
+        1. [`reactReplaceEmojis(jsx[, options])`](#reactreplaceemojisjsx-options)
+        2. [`replaceEmojis(string[, options])`](#replaceemojisstring-options)
+    2. [Manually](#manually)
+        1. [Via icon name](#via-icon-name)
+        2. [Via unicode](#via-unicode)
+        3. [Attributes](#attributes)
+
 #### What is Openmoji for React?
-[Openmoji](https://github.com/hfg-gmuend/openmoji) is a collection of open source emojis. This repository lets you use these emojis in a reactjs-app easily.
-#### Built from (coloured) Openmoji  `v12.2.0`
+[Openmoji](https://github.com/hfg-gmuend/openmoji) is a collection of open source emojis. This repository lets you use these emojis in a React app easily.
 
 > Please comply with the [Openmoji Attribution Requirements](https://github.com/hfg-gmuend/openmoji#attribution-requirements)
 
@@ -14,6 +25,7 @@ npm i react-openmoji
 
 ## Usage
 ### Automatically
+#### `reactReplaceEmojis(jsx[, options])`
 For easy and dynamic use you can replace emojis completely automatically:
 ```jsx
 import React from 'react';
@@ -26,6 +38,37 @@ const App = () => {
 export default App;
 ```
 
+You can also set options:  
+`size` — size of the emojis; default `1.7em`  
+`outline` — set to `true` if you want the colourless emojis; default `false`
+
+```jsx
+import React from 'react';
+import reactReplaceEmojis from 'react-openmoji';
+
+const App = () => {
+    return reactReplaceEmojis(
+        <p>Hello 🙋‍♂️ World! 🌍</p>,
+        {size: '1.2em', outline: true}
+    )
+};
+
+export default App;
+```
+
+#### `replaceEmojis(string[, options])`
+Is the sting equivalent to `reactReplaceEmojis`. Use this if you only want to replace emojis within a string.
+```jsx
+import React from 'react';
+import {replaceEmojis} from 'react-openmoji';
+
+const App = () => {
+    return <p>{replaceEmojis('Hello 🙋‍♂️ World! 🌍')}</p>
+};
+
+export default App;
+```
+
 ### Manually
 #### Via icon name
 ```jsx
@@ -91,3 +134,19 @@ const App = () => {
 
 export default App;
 ```
+
+#### Attributes
+In all manual cases you can use two attributes:  
+`size` — sets the size of the emojis; default `1.7em`  
+`outline` — add if you want the colourless emojis
+
+```jsx
+import React from 'react';
+import { ManRaisingHand } from 'react-openmoji';
+
+const App = () => {
+  return <p>Hello World! <ManRaisingHand size={'1.2em'} outline/></p>
+};
+
+export default App;
+```

build/build.js

@@ -9,9 +9,16 @@ String.prototype.capitalize = function () {
     let string = this.split(' '),
         capitalised = [];
 
+    try {
     string.forEach(word => {
+        if (!word) return
         capitalised.push(word[0].toUpperCase() + word.substr(1))
     })
+    } catch (e) {
+        console.log(string)
+        string.forEach(word => console.log(word))
+        throw new Error(e);
+    }
 
     string = capitalised.join('').split('-');
     capitalised = [];
@@ -84,9 +91,11 @@ if (fs.existsSync(srcPath)) {
     });
 }
 
+const OPENMOJI_DIR = '../node_modules/openmoji'
+
 // get openmoji.json
-console.log('reading ./input/openmoji.json');
-const index = JSON.parse(fs.readFileSync(path.join(__dirname, 'input/openmoji.json'), {encoding: 'utf-8'}));
+console.log('reading openmoji.json');
+const index = JSON.parse(fs.readFileSync(path.join(__dirname, OPENMOJI_DIR, 'data/openmoji.json'), {encoding: 'utf-8'}));
 
 //make icons directory
 fs.mkdir(srcPath + '/icons', (err) => {
@@ -97,14 +106,19 @@ let indexJS = '';//'module.exports = {\n';
 console.log(`writing icon scripts ${''.toString()/*0/${index.length}*/}`);
 index.forEach(icon => {
     // get content of <HEXCODE>.svg
-    let iconSvg;
+    let iconSvg, outlineSvg;
     try {
-        iconSvg = fs.readFileSync(path.join(__dirname, `input/color/${icon.hexcode}.svg`), {encoding: 'utf-8'})
+        iconSvg = fs.readFileSync(path.join(__dirname, OPENMOJI_DIR, `color/svg/${icon.hexcode}.svg`), {encoding: 'utf-8'})
+        outlineSvg = fs.readFileSync(path.join(__dirname, OPENMOJI_DIR, `black/svg/${icon.hexcode}.svg`), {encoding: 'utf-8'})
     } catch (err) {
         return
     }
     if (!iconSvg) {
-        console.error(`input/color/${icon.hexcode}.svg does not exist`);
+        console.error(`color/svg/${icon.hexcode}.svg does not exist`);
+        return;
+    }
+    if (!outlineSvg) {
+        console.error(`black/svg/${icon.hexcode}.svg does not exist`);
         return;
     }
 
@@ -118,20 +132,29 @@ index.forEach(icon => {
     /*
         import React
         const <ICON-NAME> = (size) => {
-            if (!size) size = '1.2em';
+            if (!size) size = '1.7em';
             return (icon with size in width and height)
         }
         export default <ICON-NAME>
     */
     const iconScript = `
 import React from 'react';
 
-const ${iconName} = (size) => {
-    return (
-        ${iconSvg
-        .replace('<svg', '<svg width="1.7em" height="1.7em"')
+const ${iconName} = ({size, outline}) => {
+    if (!size) size = '1.7em';
+    if (!outline) {
+        return (
+            ${iconSvg
+            .replace('<svg', '<svg width={size} height={size}')
+            .replace(/x[a-z]+:[a-z]+="[^>]+"/g, '')/*rem namespace tags*/}
+        );
+    } else {
+        return (
+            ${outlineSvg
+        .replace('<svg', '<svg width={size} height={size}')
         .replace(/x[a-z]+:[a-z]+="[^>]+"/g, '')/*rem namespace tags*/}
-    );
+        );
+    }
 };
 
 export default ${iconName};