feat(native): make icons usable on react-native

.gitignore

@@ -6,3 +6,4 @@ dist
 storybook-static
 optimized-svg
 package-lock.json
+native

Readme.md

@@ -53,13 +53,34 @@ function loadFont(
 injectGlobal`
   ${loadFont("Anarock", "anarock-regular", "normal")}
   ${loadFont("Anarock", "anarock-medium", "bold")}
-  ${loadFont("anarock-icons", "anarock-icons")}
+  ${loadFont("AnarockIcons", "AnarockIcons")}
 `;
 
 // initStyles includes the CSS for all the icons and some normalizing CSS properties.
 initStyles();
 ```
 
+## Using fonts/icons in React Native
+
+Add the following in your `package.json`;
+
+```json
+"rnpm": {
+    "assets": {
+        "./node_modules/@anarock/pebble/dist/fonts"
+    }
+}
+```
+
+and then it can be used by importing the Icon component.
+
+```js
+import Icon from "@anarock/pebble/native/Icon"
+
+// Usage
+<Icon name="icon-name" size={20} color="#000000" />
+```
+
 ## License
 
 MIT

now.json

@@ -3,5 +3,14 @@
   "alias": "pebble",
   "engines": {
     "node": "9.x.x"
-  }
+  },
+  "files": [
+    ".storybook",
+    "src",
+    "stories",
+    "tests",
+    ".babelrc",
+    "tsconfig.base.json",
+    "tsconfig.json"
+  ]
 }

package.json

@@ -7,6 +7,10 @@
   "module": "dist/pebble.es.js",
   "typings": "dist/index.d.ts",
   "unpkg": "dist/pebble.umd.js",
+  "files": [
+    "dist",
+    "native"
+  ],
   "scripts": {
     "storybook": "start-storybook -p 6006",
     "build-storybook": "rimraf storybook-static && build-storybook",
@@ -21,7 +25,7 @@
     "now-start": "cd storybook-static && serve",
     "deploy": "npm run now-build && cd storybook-static && now",
     "build:icons": "node ./scripts/generateIcon.js",
-    "copy:fonts": "cp -R './src/theme/fonts' './dist/fonts' && cp ./src/theme/pebble.css ./dist/pebble.css"
+    "copy:fonts": "cp -R './src/theme/fonts' './dist/fonts' && cp \"./src/theme/\"*.css './dist'"
   },
   "dependencies": {
     "@types/rheostat": "^2.1.3",
@@ -73,6 +77,7 @@
     "enzyme": "^3.3.0",
     "enzyme-adapter-react-16": "^1.1.1",
     "enzyme-to-json": "^3.3.4",
+    "execa": "^0.10.0",
     "file-loader": "^1.1.11",
     "husky": "^0.14.3",
     "jest": "^23.4.1",
@@ -82,6 +87,7 @@
     "pretty-quick": "^1.6.0",
     "react": "^16.4.1",
     "react-dom": "^16.4.1",
+    "react-native-vector-icons": "^4.6.0",
     "react-test-renderer": "^16.4.1",
     "rimraf": "^2.6.2",
     "rollup": "^0.62.0",

scripts/generateIcon.js

@@ -3,36 +3,18 @@ const path = require("path");
 const fs = require("fs");
 const prettier = require("prettier");
 const colors = require("colors");
+const execa = require("execa");
 
-const anarockFonts = `
-@font-face{
-    font-family: "Anarock";
-    src: url(./fonts/anarock-regular.woff) format("woff"),
-         url(./fonts/anarock-regular.woff2) format("woff2"),
-         url(./fonts/anarock-regular.ttf) format("truetype"),
-         url(./fonts/anarock-regular.svg#Anarock) format("svg");
-    font-style: normal;
-    font-weight: normal;
-}
-
-@font-face{
-    font-family: "Anarock";
-    src: url(./fonts/anarock-medium.woff) format("woff"),
-         url(./fonts/anarock-medium.woff2) format("woff2"),
-         url(./fonts/anarock-medium.ttf) format("truetype"),
-         url(./fonts/anarock-medium.svg#Anarock) format("svg");
-    font-style: normal;
-    font-weight: bold;
-}
-* {	
-		margin: 0;	
-		padding: 0;	
-		box-sizing: border-box;	
-		font-family: "Anarock", sans-serif;	
-		-webkit-font-smoothing: antialiased;	
-		-moz-osx-font-smoothing: grayscale;	
+async function createRNativeFont() {
+  try {
+    await execa.shell(
+      "rimraf native && mkdir native && ./node_modules/.bin/generate-icon ./src/theme/icons.css --componentName=AnarockIcons --fontFamily=anarock-icons > native/Icon.js"
+    );
+    console.log(colors.green.bold("Created Icon component for React Native."));
+  } catch (e) {
+    console.log(e);
+  }
 }
-`;
 
 fs.readdir(path.resolve(__dirname, "../svgs"), (err, data) => {
   if (err) {
@@ -45,7 +27,7 @@ fs.readdir(path.resolve(__dirname, "../svgs"), (err, data) => {
     {
       files,
       dest: "src/theme/fonts/",
-      fontName: "anarock-icons",
+      fontName: "AnarockIcons", // pascalcase to make it react native compatible
       types: ["woff2", "ttf", "eot", "woff"],
       css: false,
       cssFontsUrl: "./fonts/",
@@ -85,15 +67,16 @@ fs.readdir(path.resolve(__dirname, "../svgs"), (err, data) => {
       );
 
       fs.writeFile(
-        path.resolve(__dirname, "../src/theme/pebble.css"),
-        prettier.format(anarockFonts + css, {
+        path.resolve(__dirname, "../src/theme/icons.css"),
+        prettier.format(css, {
           parser: "css"
         }),
         "utf-8",
         err => {
           if (err) console.log(err.message);
-          else
-            console.log(colors.green.bold("pebble.css successfully created."));
+          else {
+            createRNativeFont();
+          }
         }
       );
     }

src/theme/icons.css

@@ -0,0 +1,206 @@
+@font-face {
+  font-family: "AnarockIcons";
+  src: url("./fonts/AnarockIcons.eot?d5deb5612b1f7a43d8c50f709ce53bb1?#iefix")
+      format("embedded-opentype"),
+    url("./fonts/AnarockIcons.woff2?d5deb5612b1f7a43d8c50f709ce53bb1")
+      format("woff2"),
+    url("./fonts/AnarockIcons.woff?d5deb5612b1f7a43d8c50f709ce53bb1")
+      format("woff"),
+    url("./fonts/AnarockIcons.ttf?d5deb5612b1f7a43d8c50f709ce53bb1")
+      format("truetype");
+}
+
+i {
+  line-height: 1;
+}
+
+i:before {
+  font-family: AnarockIcons !important;
+  font-style: normal;
+  font-weight: normal !important;
+  vertical-align: top;
+}
+
+.icon-add:before {
+  content: "\f101";
+}
+.icon-arrow-down:before {
+  content: "\f102";
+}
+.icon-arrow-right:before {
+  content: "\f103";
+}
+.icon-back:before {
+  content: "\f104";
+}
+.icon-calendar:before {
+  content: "\f105";
+}
+.icon-call:before {
+  content: "\f106";
+}
+.icon-car:before {
+  content: "\f107";
+}
+.icon-check:before {
+  content: "\f108";
+}
+.icon-checkbox-selected:before {
+  content: "\f109";
+}
+.icon-checkbox-unfilled:before {
+  content: "\f10a";
+}
+.icon-checkbox-unselected:before {
+  content: "\f10b";
+}
+.icon-chevron-left:before {
+  content: "\f10c";
+}
+.icon-clock:before {
+  content: "\f10d";
+}
+.icon-close-circle-filled:before {
+  content: "\f10e";
+}
+.icon-close-circle:before {
+  content: "\f10f";
+}
+.icon-close:before {
+  content: "\f110";
+}
+.icon-copy:before {
+  content: "\f111";
+}
+.icon-direction:before {
+  content: "\f112";
+}
+.icon-document-uploaded:before {
+  content: "\f113";
+}
+.icon-document:before {
+  content: "\f114";
+}
+.icon-download:before {
+  content: "\f115";
+}
+.icon-edit-2:before {
+  content: "\f116";
+}
+.icon-edit:before {
+  content: "\f117";
+}
+.icon-filter:before {
+  content: "\f118";
+}
+.icon-fire:before {
+  content: "\f119";
+}
+.icon-history:before {
+  content: "\f11a";
+}
+.icon-home:before {
+  content: "\f11b";
+}
+.icon-info:before {
+  content: "\f11c";
+}
+.icon-invoice:before {
+  content: "\f11d";
+}
+.icon-junk:before {
+  content: "\f11e";
+}
+.icon-location:before {
+  content: "\f11f";
+}
+.icon-logout-door:before {
+  content: "\f120";
+}
+.icon-logout:before {
+  content: "\f121";
+}
+.icon-mail:before {
+  content: "\f122";
+}
+.icon-mic:before {
+  content: "\f123";
+}
+.icon-more:before {
+  content: "\f124";
+}
+.icon-note:before {
+  content: "\f125";
+}
+.icon-notification:before {
+  content: "\f126";
+}
+.icon-open-external:before {
+  content: "\f127";
+}
+.icon-pause:before {
+  content: "\f128";
+}
+.icon-phone:before {
+  content: "\f129";
+}
+.icon-play:before {
+  content: "\f12a";
+}
+.icon-plus:before {
+  content: "\f12b";
+}
+.icon-profile-1:before {
+  content: "\f12c";
+}
+.icon-profile:before {
+  content: "\f12d";
+}
+.icon-radio-check-filled:before {
+  content: "\f12e";
+}
+.icon-radio-check:before {
+  content: "\f12f";
+}
+.icon-radio-selected:before {
+  content: "\f130";
+}
+.icon-radio:before {
+  content: "\f131";
+}
+.icon-reschedule:before {
+  content: "\f132";
+}
+.icon-reset:before {
+  content: "\f133";
+}
+.icon-search:before {
+  content: "\f134";
+}
+.icon-share:before {
+  content: "\f135";
+}
+.icon-sms:before {
+  content: "\f136";
+}
+.icon-unchecked-radio:before {
+  content: "\f137";
+}
+.icon-undo:before {
+  content: "\f138";
+}
+.icon-update:before {
+  content: "\f139";
+}
+.icon-updating:before {
+  content: "\f13a";
+}
+.icon-upload:before {
+  content: "\f13b";
+}
+.icon-warning:before {
+  content: "\f13c";
+}
+.icon-whatsapp:before {
+  content: "\f13d";
+}

src/theme/icons.ts

@@ -70,7 +70,7 @@ export function initIconStyles() {
 }
 
 i:before {
-  font-family: anarock-icons !important;
+  font-family: AnarockIcons !important;
   font-style: normal;
   font-weight: normal !important;
   vertical-align: top;