Skip to content

Commit 95362fc

Browse files
author
amars29
committed
added nb icons page
1 parent 19102e6 commit 95362fc

File tree

4 files changed

+372
-0
lines changed

4 files changed

+372
-0
lines changed

‎docs/3.3.x/nb-icons.md‎

Lines changed: 182 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,182 @@
1+
---
2+
id: nb-icons
3+
title: NativeBase Icons
4+
---
5+
6+
`NativeBase Icons` was designed to make integration of icons in nativebase projects easier. It is a unified library which export icons and fonts for all the native and web platforms.
7+
8+
## Built With
9+
- react-native-vector-icons
10+
- @expo/vector-icon
11+
- typescript
12+
13+
## Installation
14+
15+
`yarn add @native-base/icons`
16+
17+
### Next Js:
18+
19+
- Add Fonts:
20+
- To add all the fonts, write this piece of code in `_document.js`
21+
<br/>
22+
23+
```jsx
24+
import { default as NativebaseDocument } from "@native-base/next-adapter/document";
25+
import fontsCSS from "@native-base/icons/FontsCSS"
26+
import { AppRegistry } from "react-native";
27+
import { Main } from "next/document";
28+
import * as React from "react";
29+
30+
class Document extends NativebaseDocument {
31+
//
32+
}
33+
34+
async function getInitialProps({ renderPage }) {
35+
AppRegistry.registerComponent("Main", () => Main);
36+
const { getStyleElement } = AppRegistry.getApplication("Main");
37+
const page = await renderPage();
38+
const styles = [
39+
// eslint-disable-next-line react/jsx-key
40+
<style dangerouslySetInnerHTML={{ __html: fontsCSS }} />,
41+
getStyleElement(),
42+
];
43+
return { ...page, styles: React.Children.toArray(styles) };
44+
}
45+
46+
Document.getInitialProps = getInitialProps;
47+
48+
export default Document;
49+
```
50+
51+
- To add particular fonts: (For example, if you need to add AntDesignFonts and MaterialIconsFonts, write this piece of code in `_document.js`)
52+
<br/>
53+
54+
```jsx
55+
import { default as NativebaseDocument } from "@native-base/next-adapter/document";
56+
import AntDesignFontFaceCSS from "@native-base/icons/FontsCSS/AntDesignFontFaceCSS";
57+
import MaterialIconsFontFaceCSS from "@native-base/icons/FontsCSS/MaterialIconsFontFaceCSS";
58+
59+
const fontsCSS = AntDesignFontFaceCSS + MaterialIconsFontFaceCSS;
60+
61+
class Document extends NativebaseDocument {
62+
//
63+
}
64+
65+
async function getInitialProps({ renderPage }) {
66+
const res = await NativebaseDocument.getInitialProps({ renderPage });
67+
const styles = [
68+
// eslint-disable-next-line react/jsx-key
69+
<style dangerouslySetInnerHTML={{ __html: fontsCSS }} />,
70+
...res.styles
71+
];
72+
return { ...res, styles: React.Children.toArray(styles) };
73+
}
74+
75+
Document.getInitialProps = getInitialProps;
76+
77+
export default Document;
78+
```
79+
80+
- Update `next.config.js` with this code (if you are using [@native-base/next adapter](https://github.com/GeekyAnts/native-base-next-adapter)):
81+
82+
```jsx
83+
const { withNativebase } = require("@native-base/next-adapter");
84+
const path = require("path");
85+
86+
module.exports = withNativebase({
87+
dependencies: ["@native-base/icons"],
88+
nextConfig: {
89+
webpack: (config, options) => {
90+
config.module.rules.push({
91+
test: /\.ttf$/,
92+
loader: "url-loader", // or directly file-loader
93+
include: path.resolve(__dirname, "node_modules/@native-base/icons"),
94+
});
95+
config.resolve.alias = {
96+
...(config.resolve.alias || {}),
97+
"react-native$": "react-native-web",
98+
};
99+
config.resolve.extensions = [
100+
".web.js",
101+
".web.ts",
102+
".web.tsx",
103+
...config.resolve.extensions,
104+
];
105+
return config;
106+
},
107+
},
108+
});
109+
```
110+
111+
### Create React App:
112+
113+
- Add Fonts:
114+
- To add all the fonts, write this piece of code in `index.jsx/index.tsx`:
115+
<br/>
116+
117+
```jsx
118+
import fontsCSS from "@native-base/icons/FontsCSS";
119+
120+
const style = document.createElement("style");
121+
style.type = "text/css";
122+
style.appendChild(document.createTextNode(fontsCSS));
123+
document.head.appendChild(style);
124+
```
125+
<br/>
126+
127+
- To add a particular font
128+
<br/>
129+
130+
```jsx
131+
import AntDesignFontFaceCSS from "@native-base/icons/FontsCSS/AntDesignFontFaceCSS";
132+
import MaterialIconsFontFaceCSS from "@native-base/icons/FontsCSS/MaterialIconsFontFaceCSS";
133+
134+
const fontsCSS = AntDesignFontFaceCSS + MaterialIconsFontFaceCSS;
135+
136+
const style = document.createElement("style");
137+
style.type = "text/css";
138+
if (style.styleSheet) {
139+
style.styleSheet.cssText += fontsCSS;
140+
} else {
141+
style.appendChild(document.createTextNode(fontsCSS));
142+
}
143+
document.head.appendChild(style);
144+
```
145+
146+
147+
### Expo:
148+
149+
- Add this configuration to `.babel.config.js` file in root directory:
150+
<br/>
151+
152+
```jsx
153+
module.exports = function (api) {
154+
api.cache(true);
155+
return {
156+
presets: ["babel-preset-expo"],
157+
plugins: [
158+
[
159+
"module-resolver",
160+
{
161+
alias: {
162+
"@native-base/icons": "@native-base/icons/lib",
163+
},
164+
},
165+
],
166+
],
167+
};
168+
};
169+
```
170+
171+
## Usage:
172+
173+
Now, let’s render an icon:
174+
175+
```jsx
176+
import { Entypo } from "@native-base/icons";
177+
178+
return <Icon as={Entypo} name="user"></Icon>;
179+
```
180+
181+
182+

‎docs/3.3.x/sidebar.json‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -340,6 +340,10 @@
340340
"id": "icon",
341341
"title": "Icon"
342342
},
343+
{
344+
"id": "nb-icons",
345+
"title": "Nativebase Icon"
346+
},
343347
{
344348
"id": "image",
345349
"title": "Image",

‎docs/next/nb-icons.md‎

Lines changed: 182 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,182 @@
1+
---
2+
id: nb-icons
3+
title: NativeBase Icons
4+
---
5+
6+
`NativeBase Icons` was designed to make integration of icons in nativebase projects easier. It is a unified library which export icons and fonts for all the native and web platforms.
7+
8+
## Built With
9+
- react-native-vector-icons
10+
- @expo/vector-icon
11+
- typescript
12+
13+
## Installation
14+
15+
`yarn add @native-base/icons`
16+
17+
### Next Js:
18+
19+
- Add Fonts:
20+
- To add all the fonts, write this piece of code in `_document.js`
21+
<br/>
22+
23+
```jsx
24+
import { default as NativebaseDocument } from "@native-base/next-adapter/document";
25+
import fontsCSS from "@native-base/icons/FontsCSS"
26+
import { AppRegistry } from "react-native";
27+
import { Main } from "next/document";
28+
import * as React from "react";
29+
30+
class Document extends NativebaseDocument {
31+
//
32+
}
33+
34+
async function getInitialProps({ renderPage }) {
35+
AppRegistry.registerComponent("Main", () => Main);
36+
const { getStyleElement } = AppRegistry.getApplication("Main");
37+
const page = await renderPage();
38+
const styles = [
39+
// eslint-disable-next-line react/jsx-key
40+
<style dangerouslySetInnerHTML={{ __html: fontsCSS }} />,
41+
getStyleElement(),
42+
];
43+
return { ...page, styles: React.Children.toArray(styles) };
44+
}
45+
46+
Document.getInitialProps = getInitialProps;
47+
48+
export default Document;
49+
```
50+
51+
- To add particular fonts: (For example, if you need to add AntDesignFonts and MaterialIconsFonts, write this piece of code in `_document.js`)
52+
<br/>
53+
54+
```jsx
55+
import { default as NativebaseDocument } from "@native-base/next-adapter/document";
56+
import AntDesignFontFaceCSS from "@native-base/icons/FontsCSS/AntDesignFontFaceCSS";
57+
import MaterialIconsFontFaceCSS from "@native-base/icons/FontsCSS/MaterialIconsFontFaceCSS";
58+
59+
const fontsCSS = AntDesignFontFaceCSS + MaterialIconsFontFaceCSS;
60+
61+
class Document extends NativebaseDocument {
62+
//
63+
}
64+
65+
async function getInitialProps({ renderPage }) {
66+
const res = await NativebaseDocument.getInitialProps({ renderPage });
67+
const styles = [
68+
// eslint-disable-next-line react/jsx-key
69+
<style dangerouslySetInnerHTML={{ __html: fontsCSS }} />,
70+
...res.styles
71+
];
72+
return { ...res, styles: React.Children.toArray(styles) };
73+
}
74+
75+
Document.getInitialProps = getInitialProps;
76+
77+
export default Document;
78+
```
79+
80+
- Update `next.config.js` with this code (if you are using [@native-base/next adapter](https://github.com/GeekyAnts/native-base-next-adapter)):
81+
82+
```jsx
83+
const { withNativebase } = require("@native-base/next-adapter");
84+
const path = require("path");
85+
86+
module.exports = withNativebase({
87+
dependencies: ["@native-base/icons"],
88+
nextConfig: {
89+
webpack: (config, options) => {
90+
config.module.rules.push({
91+
test: /\.ttf$/,
92+
loader: "url-loader", // or directly file-loader
93+
include: path.resolve(__dirname, "node_modules/@native-base/icons"),
94+
});
95+
config.resolve.alias = {
96+
...(config.resolve.alias || {}),
97+
"react-native$": "react-native-web",
98+
};
99+
config.resolve.extensions = [
100+
".web.js",
101+
".web.ts",
102+
".web.tsx",
103+
...config.resolve.extensions,
104+
];
105+
return config;
106+
},
107+
},
108+
});
109+
```
110+
111+
### Create React App:
112+
113+
- Add Fonts:
114+
- To add all the fonts, write this piece of code in `index.jsx/index.tsx`:
115+
<br/>
116+
117+
```jsx
118+
import fontsCSS from "@native-base/icons/FontsCSS";
119+
120+
const style = document.createElement("style");
121+
style.type = "text/css";
122+
style.appendChild(document.createTextNode(fontsCSS));
123+
document.head.appendChild(style);
124+
```
125+
<br/>
126+
127+
- To add a particular font
128+
<br/>
129+
130+
```jsx
131+
import AntDesignFontFaceCSS from "@native-base/icons/FontsCSS/AntDesignFontFaceCSS";
132+
import MaterialIconsFontFaceCSS from "@native-base/icons/FontsCSS/MaterialIconsFontFaceCSS";
133+
134+
const fontsCSS = AntDesignFontFaceCSS + MaterialIconsFontFaceCSS;
135+
136+
const style = document.createElement("style");
137+
style.type = "text/css";
138+
if (style.styleSheet) {
139+
style.styleSheet.cssText += fontsCSS;
140+
} else {
141+
style.appendChild(document.createTextNode(fontsCSS));
142+
}
143+
document.head.appendChild(style);
144+
```
145+
146+
147+
### Expo:
148+
149+
- Add this configuration to `.babel.config.js` file in root directory:
150+
<br/>
151+
152+
```jsx
153+
module.exports = function (api) {
154+
api.cache(true);
155+
return {
156+
presets: ["babel-preset-expo"],
157+
plugins: [
158+
[
159+
"module-resolver",
160+
{
161+
alias: {
162+
"@native-base/icons": "@native-base/icons/lib",
163+
},
164+
},
165+
],
166+
],
167+
};
168+
};
169+
```
170+
171+
## Usage:
172+
173+
Now, let’s render an icon:
174+
175+
```jsx
176+
import { Entypo } from "@native-base/icons";
177+
178+
return <Icon as={Entypo} name="user"></Icon>;
179+
```
180+
181+
182+

‎docs/next/sidebar.json‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -340,6 +340,10 @@
340340
"id": "icon",
341341
"title": "Icon"
342342
},
343+
{
344+
"id": "nb-icons",
345+
"title": "Nativebase Icon"
346+
},
343347
{
344348
"id": "image",
345349
"title": "Image",

0 commit comments

Comments
 (0)