Skip to content

Commit 8c88abb

Browse files
amars29amars29
authored
Merge pull request #253 from GeekyAnts/feat/nb-icons
Feat/nb icons
2 parents 19102e6 + 74440d9 commit 8c88abb

File tree

8 files changed

+421
-3
lines changed

8 files changed

+421
-3
lines changed

‎docs/3.3.x/install-next.mdx‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -229,12 +229,20 @@ export default function App() {
229229
/>
230230
</HStack>
231231
<Box mt="2" pl="0" ml="0">
232+
<HStack pl="0" ml="0" space="4">
232233
<TileLink
233234
title="Utility props"
234235
url="utility-props"
235236
description="Shorthands of commonly used styling props which maps with the provided theme"
236237
className="bg-blueGray-600"
237238
/>
239+
<TileLink
240+
title="NativeBase next adapter"
241+
url="next-adapter"
242+
description="To use Next.js with native-base for web we recommend that you use a library called @native-base/next-adapter to handle the configuration and integration of the tools."
243+
className="bg-blueGray-600"
244+
/>
245+
</HStack>
238246
</Box>
239247
</Box>
240248
</Box>

‎docs/3.3.x/installation.mdx‎

Lines changed: 15 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,10 +23,24 @@ NativeBase VS Code Extensions are specifically designed to quicken your developm
2323
NativeBase snippets are shorthand for commonly used NativeBase components.
2424

2525
All snippets start with the prefix `nb-` and are followed by the name of the desired component.
26+
2627
<AspectRatio ratio={1.7} w="100%" maxW="1056">
2728
<Image
2829
resizeMode="contain"
2930
source={{ uri: "/img/NativeBaseSnippet.gif" }}
3031
alt="aang transitioning to avatar state"
3132
/>
32-
</AspectRatio>
33+
</AspectRatio>
34+
35+
<br />
36+
<br />
37+
38+
### NativeBase icons
39+
40+
[NativeBase Icons](./nb-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.
41+
42+
```jsx
43+
import { Entypo } from "@native-base/icons";
44+
45+
return <Icon as={Entypo} name="user"></Icon>;
46+
```

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

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

‎docs/3.3.x/sidebar.json‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -42,6 +42,10 @@
4242
{
4343
"id": "setup-provider",
4444
"title": "Setup NativeBase Provider"
45+
},
46+
{
47+
"id": "nb-icons",
48+
"title": "Nativebase Icons"
4549
}
4650
]
4751
},
@@ -339,7 +343,7 @@
339343
{
340344
"id": "icon",
341345
"title": "Icon"
342-
},
346+
},
343347
{
344348
"id": "image",
345349
"title": "Image",

‎docs/next/install-next.mdx‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -229,12 +229,20 @@ export default function App() {
229229
/>
230230
</HStack>
231231
<Box mt="4" pl="0" ml="0">
232+
<HStack pl="0" ml="0" space="4">
232233
<TileLink
233234
title="Utility props"
234235
url="utility-props"
235236
description="Shorthands of commonly used styling props which maps with the provided theme"
236237
className="bg-blueGray-600"
237238
/>
239+
<TileLink
240+
title="NativeBase next adapter"
241+
url="next-adapter"
242+
description="To use Next.js with native-base for web we recommend that you use a library called @native-base/next-adapter to handle the configuration and integration of the tools."
243+
className="bg-blueGray-600"
244+
/>
245+
</HStack>
238246
</Box>
239247
</Box>
240248
</Box>

‎docs/next/installation.mdx‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,10 +23,24 @@ NativeBase VS Code Extensions are specifically designed to quicken your developm
2323
NativeBase snippets are shorthand for commonly used NativeBase components.
2424

2525
All snippets start with the prefix `nb-` and are followed by the name of the desired component.
26+
2627
<AspectRatio ratio={1.7} w="100%" maxW="1056">
2728
<Image
2829
resizeMode="contain"
2930
source={{ uri: "/img/NativeBaseSnippet.gif" }}
3031
alt="aang transitioning to avatar state"
3132
/>
3233
</AspectRatio>
34+
35+
<br />
36+
<br />
37+
38+
### NativeBase icons
39+
40+
[NativeBase Icons](./nb-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.
41+
42+
```jsx
43+
import { Entypo } from "@native-base/icons";
44+
45+
return <Icon as={Entypo} name="user"></Icon>;
46+
```

0 commit comments

Comments
 (0)