Skip to content

Commit

Permalink
feat(native): make icons usable on react-native (#24)
Browse files Browse the repository at this point in the history
* feat(native): make icons usable on react-native

* fix now.sh

* fix now.sh

* fix build on now.sh
  • Loading branch information
ritz078 authored Jul 17, 2018
1 parent f05e55a commit 856dbcb
Show file tree
Hide file tree
Showing 16 changed files with 346 additions and 250 deletions.
1 change: 1 addition & 0 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -6,3 +6,4 @@ dist
storybook-static
optimized-svg
package-lock.json
native
23 changes: 22 additions & 1 deletion Readme.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
11 changes: 10 additions & 1 deletion now.json
Original file line number Diff line number Diff line change
Expand Up @@ -3,5 +3,14 @@
"alias": "pebble",
"engines": {
"node": "9.x.x"
}
},
"files": [
".storybook",
"src",
"stories",
"tests",
".babelrc",
"tsconfig.base.json",
"tsconfig.json"
]
}
8 changes: 7 additions & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand All @@ -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",
Expand Down Expand Up @@ -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",
Expand All @@ -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",
Expand Down
49 changes: 16 additions & 33 deletions scripts/generateIcon.js
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand All @@ -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/",
Expand Down Expand Up @@ -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();
}
}
);
}
Expand Down
Binary file not shown.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file not shown.
Binary file not shown.
Binary file added src/theme/fonts/AnarockIcons.woff2
Binary file not shown.
Binary file removed src/theme/fonts/anarock-icons.woff2
Binary file not shown.
206 changes: 206 additions & 0 deletions src/theme/icons.css
Original file line number Diff line number Diff line change
@@ -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";
}
2 changes: 1 addition & 1 deletion src/theme/icons.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
Loading

0 comments on commit 856dbcb

Please sign in to comment.