Skip to content

Commit 74440d9

Browse files
author
amars29
committed
added Nb icons
1 parent 95362fc commit 74440d9

File tree

8 files changed

+197
-151
lines changed

8 files changed

+197
-151
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: 71 additions & 70 deletions
Original file line numberDiff line numberDiff line change
@@ -14,11 +14,12 @@ title: NativeBase Icons
1414

1515
`yarn add @native-base/icons`
1616

17+
1718
### Next Js:
1819

1920
- Add Fonts:
20-
- To add all the fonts, write this piece of code in `_document.js`
21-
<br/>
21+
1. To add all the fonts, write this piece of code in `_document.js`
22+
<br/>
2223

2324
```jsx
2425
import { default as NativebaseDocument } from "@native-base/next-adapter/document";
@@ -47,11 +48,11 @@ title: NativeBase Icons
4748

4849
export default Document;
4950
```
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
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
5556
import { default as NativebaseDocument } from "@native-base/next-adapter/document";
5657
import AntDesignFontFaceCSS from "@native-base/icons/FontsCSS/AntDesignFontFaceCSS";
5758
import MaterialIconsFontFaceCSS from "@native-base/icons/FontsCSS/MaterialIconsFontFaceCSS";
@@ -77,44 +78,50 @@ title: NativeBase Icons
7778
export default Document;
7879
```
7980

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+
3. Update `next.config.js` with this code if you are using [`@native-base/next adapter`](https://github.com/GeekyAnts/native-base-next-adapter)):
8182

8283
```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-
});
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+
});
109110
```
110111

112+
113+
114+
115+
111116
### Create React App:
112117

113118
- Add Fonts:
114-
- To add all the fonts, write this piece of code in `index.jsx/index.tsx`:
115-
<br/>
116-
117-
```jsx
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
118125
import fontsCSS from "@native-base/icons/FontsCSS";
119126
120127
const style = document.createElement("style");
@@ -123,11 +130,11 @@ title: NativeBase Icons
123130
document.head.appendChild(style);
124131
```
125132
<br/>
126-
127-
- To add a particular font
128-
<br/>
129-
130-
```jsx
133+
134+
2. To add a particular font
135+
<br/>
136+
137+
```jsx
131138
import AntDesignFontFaceCSS from "@native-base/icons/FontsCSS/AntDesignFontFaceCSS";
132139
import MaterialIconsFontFaceCSS from "@native-base/icons/FontsCSS/MaterialIconsFontFaceCSS";
133140
@@ -142,41 +149,35 @@ title: NativeBase Icons
142149
}
143150
document.head.appendChild(style);
144151
```
145-
146152

147-
### Expo:
148153

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",
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+
},
163170
},
164-
},
171+
],
165172
],
166-
],
173+
};
167174
};
168-
};
169-
```
170-
171-
## Usage:
175+
```
172176

173-
Now, let’s render an icon:
177+
## Usage
174178

175179
```jsx
176180
import { Entypo } from "@native-base/icons";
177181
178182
return <Icon as={Entypo} name="user"></Icon>;
179-
```
180-
181-
182-
183+
```

‎docs/3.3.x/sidebar.json‎

Lines changed: 5 additions & 5 deletions
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,11 +343,7 @@
339343
{
340344
"id": "icon",
341345
"title": "Icon"
342-
},
343-
{
344-
"id": "nb-icons",
345-
"title": "Nativebase Icon"
346-
},
346+
},
347347
{
348348
"id": "image",
349349
"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)