react-native-nano-icons 0.1.6 → 0.1.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +329 -7
- package/README.md.bak +33 -0
- package/lib/commonjs/scripts/cli.js +0 -0
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,15 +1,337 @@
|
|
|
1
1
|
<div align="center">
|
|
2
2
|
|
|
3
|
-
|
|
4
|
-
|
|
3
|
+
<picture>
|
|
4
|
+
<source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/software-mansion-labs/react-native-nano-icons/main/https://raw.githubusercontent.com/software-mansion-labs/react-native-nano-icons/main/packages/react-native-nano-icons/docs/img/logo-nanoicons-inverted.svg">
|
|
5
|
+
<source media="(prefers-color-scheme: light)" srcset="https://raw.githubusercontent.com/software-mansion-labs/react-native-nano-icons/main/https://raw.githubusercontent.com/software-mansion-labs/react-native-nano-icons/main/packages/react-native-nano-icons/docs/img/logo-nanoicons-default.svg">
|
|
6
|
+
<img alt="Nano Icons" src="https://raw.githubusercontent.com/software-mansion-labs/react-native-nano-icons/main/https://raw.githubusercontent.com/software-mansion-labs/react-native-nano-icons/main/packages/react-native-nano-icons/docs/img/logo-nanoicons-default.svg">
|
|
7
|
+
</picture>
|
|
5
8
|
|
|
9
|
+
</div>
|
|
10
|
+
<br>
|
|
11
|
+
|
|
12
|
+
[](https://www.npmjs.com/package/react-native-nano-icons?activeTab=readme) [](https://github.com/software-mansion-labs/react-native-nano-icons/actions/workflows/run-jest-tests.yml?query=branch%3Amain)
|
|
13
|
+
|
|
14
|
+
# High-performance icon rendering for React Native & Expo.
|
|
15
|
+
|
|
16
|
+
Nano Icons is the fastest way to render icons in React Native. Point it at a folder of SVGs and get **blazing-fast, native icon rendering with near-zero overhead**. It works great for any app that uses icons, and is at its best when the same small symbols appear many times on screen — row icons in a list, tab bars, inline badges. [See benchmarks →](#-performance)
|
|
17
|
+
|
|
18
|
+
## Why not just use…
|
|
19
|
+
`react-native-svg` — It works, but it wasn’t designed for icons. Every SVG component spins up a full React subtree that gets parsed, reconciled, and laid out on each mount. One icon is fine. Fifty in a scrollable list and your UI starts paying for it ([read more](https://swmansion.com/blog/you-might-not-need-react-native-svg-b5c65646d01f)).
|
|
20
|
+
|
|
21
|
+
`expo-image` and similar — A better choice for complex vector graphics, but each image goes through its own rasterization pipeline. That’s not optimized for drawing many copies of the same small symbol, and the per-image overhead makes it better suited for richer graphics than tiny repeated icons.
|
|
22
|
+
|
|
23
|
+
`react-native-vector-icons` — Already font-based, so rendering is fast. Great if you’re using a bundled icon pack like MaterialIcons or FontAwesome. But if you need your own custom icons, you’re back to managing font files manually with external tools — exactly the workflow Nano Icons eliminates.
|
|
24
|
+
|
|
25
|
+
## How Nano Icons works
|
|
26
|
+
At build time, your SVGs are automatically converted into an optimized icon font. At runtime, each icon renders as a single native text glyph stack — bypassing React’s component tree entirely. The result is dramatically less work per icon, especially in screens with many repeated symbols: lists, tab bars, buttons, inline badges.
|
|
27
|
+
Drop your SVGs in a folder. Use them as a fully typed component by name.
|
|
28
|
+
That’s it 🔬⚡️
|
|
29
|
+
|
|
30
|
+
<picture>
|
|
31
|
+
<source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/software-mansion-labs/react-native-nano-icons/main/https://raw.githubusercontent.com/software-mansion-labs/react-native-nano-icons/main/packages/react-native-nano-icons/docs/img/nano-icons-platforms-inverted.png">
|
|
32
|
+
<source media="(prefers-color-scheme: light)" srcset="https://raw.githubusercontent.com/software-mansion-labs/react-native-nano-icons/main/https://raw.githubusercontent.com/software-mansion-labs/react-native-nano-icons/main/packages/react-native-nano-icons/docs/img/nano-icons-platforms-light.png">
|
|
33
|
+
<img alt="Nano Icons Platforms Showcase" src="https://raw.githubusercontent.com/software-mansion-labs/react-native-nano-icons/main/https://raw.githubusercontent.com/software-mansion-labs/react-native-nano-icons/main/packages/react-native-nano-icons/docs/img/nano-icons-platforms-light.png">
|
|
34
|
+
</picture>
|
|
35
|
+
|
|
36
|
+
---
|
|
37
|
+
|
|
38
|
+
## Table of Contents
|
|
39
|
+
|
|
40
|
+
- [🧩 Platforms Supported](#-platforms-supported)
|
|
41
|
+
- [🚀 Quick Start](#-quick-start)
|
|
42
|
+
- [🎨 Multicolor Icons](#-multicolor-icons)
|
|
43
|
+
- [📊 Performance](#-performance)
|
|
44
|
+
- [⚠️ Known Limitations](#%EF%B8%8F-known-limitations)
|
|
45
|
+
- [🔧 Font Generation Pipeline](#-how-it-works)
|
|
46
|
+
- [🤝 Contributing](#-contributing)
|
|
47
|
+
|
|
48
|
+
---
|
|
49
|
+
|
|
50
|
+
## 🧩 Platforms Supported
|
|
51
|
+
|
|
52
|
+
- [x] React Native 0.74+ [(New Arch Only)](https://reactnative.dev/architecture/landing-page)
|
|
53
|
+
- [x] iOS 15.1+
|
|
54
|
+
- [x] Android API 24+
|
|
55
|
+
- [x] Web
|
|
56
|
+
- [x] Expo Go
|
|
57
|
+
|
|
58
|
+
---
|
|
59
|
+
|
|
60
|
+
## 🚀 Quick Start
|
|
61
|
+
|
|
62
|
+
### 1. Install
|
|
63
|
+
|
|
64
|
+
```bash
|
|
65
|
+
npm install react-native-nano-icons
|
|
66
|
+
```
|
|
67
|
+
|
|
68
|
+
### 2. Add your SVGs
|
|
69
|
+
|
|
70
|
+
Create a directory for your icon set and place your `.svg` files in it. Only `*.svg` format is supported.
|
|
71
|
+
|
|
72
|
+
```
|
|
73
|
+
assets/icons/my-icons/
|
|
74
|
+
├── heart.svg
|
|
75
|
+
├── search.svg
|
|
76
|
+
├── flag-us.svg
|
|
77
|
+
└── ...
|
|
78
|
+
```
|
|
79
|
+
|
|
80
|
+
File names become icon names: `heart.svg` is rendered with `<Icon name="heart" />`.
|
|
81
|
+
|
|
82
|
+
### 3. Configure
|
|
83
|
+
|
|
84
|
+
#### Expo (Development build)
|
|
85
|
+
|
|
86
|
+
The library uses an Expo Config Plugin to hook into the prebuild phase. This automatically generates the `.ttf` and corresponding `glyphmap` files and links them to the native iOS/Android project's assets.
|
|
87
|
+
|
|
88
|
+
`app.json`
|
|
89
|
+
|
|
90
|
+
```JSON
|
|
91
|
+
{
|
|
92
|
+
"expo": {
|
|
93
|
+
"plugins": [
|
|
94
|
+
[
|
|
95
|
+
"react-native-nano-icons",
|
|
96
|
+
{
|
|
97
|
+
"iconSets": [
|
|
98
|
+
{
|
|
99
|
+
"inputDir": "./assets/icons/my-icons"
|
|
100
|
+
}
|
|
101
|
+
]
|
|
102
|
+
}
|
|
103
|
+
]
|
|
104
|
+
]
|
|
105
|
+
}
|
|
106
|
+
}
|
|
107
|
+
```
|
|
108
|
+
|
|
109
|
+
<details>
|
|
110
|
+
<summary><u>All iconSets Entry Plugin Options</u></summary>
|
|
111
|
+
|
|
112
|
+
The plugin accepts an object with an `iconSets` array, allowing you to generate multiple distinct fonts in a single build.
|
|
113
|
+
|
|
114
|
+
| Property | Type | Required | Default | Description |
|
|
115
|
+
| :------------- | :------- | :------- | :------------- | :------------------------------------------------------------------------------------------------------------------------- |
|
|
116
|
+
| `inputDir` | `string` | **Yes** | — | Path to the directory containing your `.svg` files (e.g., `./assets/icons/ui`). |
|
|
117
|
+
| `fontFamily` | `string` | No | Folder Name | The name of the generated font family and file. If omitted, the name of the `inputDir` folder is used (e.g., `ui`). |
|
|
118
|
+
| `outputDir` | `string` | No | `../nanoicons` | Path where the `.ttf` and `.json` artifacts will be saved. Defaults to a sibling `nanoicons` folder relative to the input. |
|
|
119
|
+
| `upm` | `number` | No | `1024` | Units Per Em. Defines the resolution of the font grid. |
|
|
120
|
+
| `startUnicode` | `string` | No | `0xe900` | The starting Hex Unicode point for the first icon glyph. |
|
|
121
|
+
|
|
122
|
+
<details>
|
|
123
|
+
<summary>Default Dir Path Behavior</summary>
|
|
124
|
+
If you do not specify an `outputDir` or `fontFamily`, the library attempts to keep your project organized by creating a sibling folder.
|
|
125
|
+
|
|
126
|
+
- **Input:** `./assets/icons/user`
|
|
127
|
+
- **Resulting Output:** `./assets/icons/nanoicons/user.ttf` & `user.glyphmap.json`
|
|
128
|
+
</details>
|
|
129
|
+
</details>
|
|
130
|
+
|
|
131
|
+
#### Bare React Native / React Native Web / Expo Go
|
|
132
|
+
|
|
133
|
+
Bare apps don't have a prebuild step, so you run the same pipeline via the CLI:
|
|
134
|
+
|
|
135
|
+
1. **Config** – Add a `.nanoicons.json` with the same `iconSets` shape as the Expo plugin (see options above).
|
|
136
|
+
<details>
|
|
137
|
+
<summary>.nanoicons.json example</summary>
|
|
138
|
+
|
|
139
|
+
```JSON
|
|
140
|
+
{
|
|
141
|
+
"iconSets": [
|
|
142
|
+
{
|
|
143
|
+
"inputDir": "./assets/icons/my-icons"
|
|
144
|
+
}
|
|
145
|
+
]
|
|
146
|
+
}
|
|
147
|
+
```
|
|
148
|
+
|
|
149
|
+
</details>
|
|
150
|
+
|
|
151
|
+
2. **Build and link** – From the app root run:
|
|
152
|
+
|
|
153
|
+
```sh
|
|
154
|
+
npx react-native-nano-icons --path path/to/.nanoicons.json
|
|
155
|
+
```
|
|
156
|
+
|
|
157
|
+
This works exactly like the config plugin, removing any necessity for manual Xcode/Android Studio font linking steps.
|
|
158
|
+
|
|
159
|
+
> [!TIP]
|
|
160
|
+
> Run `EXPO_DEBUG=1 npx expo prebuild` or `npx react-native-nano-icons --verbose` to get font build-time logs.
|
|
161
|
+
|
|
162
|
+
> [!NOTE]
|
|
163
|
+
> Linking the font on web is just as straightforward as always and does not require any actions other than the usual web font addition.
|
|
164
|
+
>
|
|
165
|
+
> In [Expo Go](https://expo.dev/go), icons are rendered using a regular `<Text>` fallback so you can iterate quickly. You will need to link the font manually via the already included [`expo-font` library](https://docs.expo.dev/versions/latest/sdk/font/). [Once you move to a development build](https://docs.expo.dev/develop/development-builds/expo-go-to-dev-build/), the library automatically switches to the native component implementation. Remember to remove any `expo-font`-related icon font setup after the switch.
|
|
166
|
+
|
|
167
|
+
### 4. Use
|
|
168
|
+
|
|
169
|
+
```TypeScript
|
|
170
|
+
import { View, Text } from 'react-native'
|
|
171
|
+
import { createNanoIconSet } from "react-native-nano-icons";
|
|
172
|
+
// auto-generated during build in outputDir
|
|
173
|
+
import glyphMap from "./assets/icons/nanoicons/my-icons.glyphmap.json";
|
|
174
|
+
|
|
175
|
+
export const Icon = createNanoIconSet(glyphMap);
|
|
176
|
+
|
|
177
|
+
export default function App() {
|
|
178
|
+
return (
|
|
179
|
+
<View>
|
|
180
|
+
<Icon name="heart" size={24} color="tomato" />
|
|
181
|
+
|
|
182
|
+
{/* Icons work inline with text */}
|
|
183
|
+
<Text>
|
|
184
|
+
Tap <Icon name="heart" size={12} color="tomato" /> to save
|
|
185
|
+
</Text>
|
|
186
|
+
</View>
|
|
187
|
+
);
|
|
188
|
+
}
|
|
189
|
+
```
|
|
190
|
+
|
|
191
|
+
#### Props
|
|
6
192
|
|
|
193
|
+
| Prop | Type | Default | Description |
|
|
194
|
+
| -------------------- | ---------------------------- | ----------------- | -------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
195
|
+
| `name` | `string` | **(required)** | Icon name — corresponds to the original SVG filename. Fully typed from the glyphmap. |
|
|
196
|
+
| `size` | `number` | `12` | Icon size in points. |
|
|
197
|
+
| `color` | `ColorValue \| ColorValue[]` | Glyphmap defaults | Single color applied to all layers, or per-layer color array. If the array is shorter than the number of layers, the last color is repeated. |
|
|
198
|
+
| `allowFontScaling` | `boolean` | `true` | Whether the icon size respects the system accessibility font scale. |
|
|
199
|
+
| `style` | `ViewStyle` | — | Style applied to the icon container. |
|
|
200
|
+
| `accessible` | `boolean` | — | Override the default accessibility behavior. |
|
|
201
|
+
| `accessibilityLabel` | `string` | Icon `name` | Label announced by screen readers. Defaults to the icon name. |
|
|
202
|
+
| `accessibilityRole` | `AccessibilityRole` | `"image"` | Accessibility role. Defaults to `"image"` so the icon is not misinterpreted as text. |
|
|
203
|
+
| `testID` | `string` | — | Test identifier for e2e testing frameworks. |
|
|
204
|
+
| `ref` | `Ref<View>` | — | Ref to the underlying native view. |
|
|
205
|
+
|
|
206
|
+
### 5. Font Regeneration
|
|
207
|
+
|
|
208
|
+
**The build script detects changes in path and contents of the SVGs** in your input directory based on a fingerprint hash. If anything changes (file names, SVG attributes/nodes) or the output font/glyphmap files are deleted, the icon set is regenerated during `prebuild` or manual script run.
|
|
209
|
+
|
|
210
|
+
---
|
|
211
|
+
|
|
212
|
+
## 🎨 Multicolor Icons
|
|
213
|
+
|
|
214
|
+
At build time, each SVG is split by fill color — every distinct color becomes a separate glyph layer in the font. At render time, layers are stacked on top of each other to reconstruct the original image.
|
|
215
|
+
|
|
216
|
+
This makes the library well-suited for multicolor icons like country flags, brand logos, or any icon with distinct color regions:
|
|
217
|
+
|
|
218
|
+
```TypeScript
|
|
219
|
+
// Renders with the original SVG colors
|
|
220
|
+
<Icon name="person" size={52} />
|
|
221
|
+
|
|
222
|
+
// Override individual layer colors
|
|
223
|
+
<Icon name="person" size={52} color={['#DB227F', '#FDA780', '#231B25','#140E19']} />
|
|
224
|
+
|
|
225
|
+
<Text>
|
|
226
|
+
Inline<Icon name="person" size={32} />person
|
|
227
|
+
</Text>
|
|
228
|
+
```
|
|
229
|
+
|
|
230
|
+
<div align="center">
|
|
231
|
+
<img alt="Multicolor icon example showing per-layer color overrides" src="https://raw.githubusercontent.com/software-mansion-labs/react-native-nano-icons/main/https://raw.githubusercontent.com/software-mansion-labs/react-native-nano-icons/main/packages/react-native-nano-icons/docs/img/nano-icon-color-showcase.png" height="250">
|
|
232
|
+
</div>
|
|
7
233
|
<br>
|
|
234
|
+
|
|
235
|
+
**Color prop behavior:**
|
|
236
|
+
|
|
237
|
+
- **Single string** — applies to all layers.
|
|
238
|
+
- **Array** — each element maps to a layer. If the array is shorter than the number of layers, the last color is repeated.
|
|
239
|
+
- **Omitted** — uses the original SVG colors stored in the glyphmap.
|
|
240
|
+
|
|
241
|
+
An SVG with many distinct colors (e.g., a detailed vector image with 50 colors) produces at least 50 glyph layers. Each layer is a lightweight text glyph, so this is fine for typical icons (3–10 colors). For highly complex illustrations with dozens of colors, consider using `expo-image` instead.
|
|
242
|
+
|
|
243
|
+
Since all of that is actually simple text, you can use your beautiful multicolor SVG designs **inline within a regular** `<Text>` **component** without fighting the layout engine.
|
|
244
|
+
|
|
245
|
+
> [!IMPORTANT]
|
|
246
|
+
> You should always verify your icons visually.
|
|
247
|
+
|
|
248
|
+
---
|
|
249
|
+
|
|
250
|
+
## 📊 Performance
|
|
251
|
+
|
|
252
|
+
Native text engines are among the most optimized rendering pipelines in any OS. Rendering a glyph from a `.ttf` is synchronous and memory-efficient — unlike SVG, which requires XML parsing, native view tree creation, and Yoga layout calculation per icon instance.
|
|
253
|
+
|
|
254
|
+
We measured the average time to render a screen with identical set of 1,000 different multicolor icons in a ScrollView on iOS (release build).
|
|
255
|
+
|
|
256
|
+
| Library | What it is | Rendering approach | Multicolor |
|
|
257
|
+
| :------------------------------------------------------------------------------ | :------------------------ | :------------------------------- | :----------------------------------------------------------------------------------------------------------------------------------- |
|
|
258
|
+
| [`react-native-svg`](https://github.com/software-mansion/react-native-svg) | Full SVG renderer | Native view tree per icon | Yes (full SVG spec) |
|
|
259
|
+
| [`expo-image`](https://docs.expo.dev/versions/latest/sdk/image/) | Universal image component | Async image decode + cache | N/A (raster) |
|
|
260
|
+
| [`@expo/vector-icons`](https://docs.expo.dev/versions/latest/sdk/vector-icons/) | Icon fonts via IcoMoon | Color Table Font glyph rendering | Limited - [not supported on Android API level below 33](https://developer.android.com/about/versions/13/features#color-vector-fonts) |
|
|
261
|
+
| `react-native-nano-icons` | Build-time SVG-to-font | Font glyph rendering (layered) | Yes (full API support) |
|
|
262
|
+
|
|
263
|
+
> [!NOTE]
|
|
264
|
+
> These libraries serve different primary purposes. `expo-image` is the go-to image library for photos and remote assets. `@expo/vector-icons` ships with many popular icon sets built in. `react-native-svg` handles the full SVG specification with fine-grained attribute control. We compare them here specifically on the use case of rendering many small, static icons.
|
|
265
|
+
|
|
266
|
+
<div align="center">
|
|
267
|
+
<img alt="Performance benchmark: time to render 1k icons" src="https://raw.githubusercontent.com/software-mansion-labs/react-native-nano-icons/main/https://raw.githubusercontent.com/software-mansion-labs/react-native-nano-icons/main/packages/react-native-nano-icons/docs/img/nano-icons-benchmarks.png" width="900">
|
|
8
268
|
</div>
|
|
269
|
+
<br>
|
|
270
|
+
|
|
271
|
+
The chart shows time in milliseconds across three phases: **JS Thread** (JavaScript execution), **UI Thread** (native rendering on the main thread), and **Microhang** (main thread stall during initial load that can cause visible UI freezes — see [Apple's documentation on hangs](https://developer.apple.com/documentation/xcode/understanding-hangs-in-your-app)).
|
|
272
|
+
|
|
273
|
+
> [!NOTE]
|
|
274
|
+
> For full methodology, device specifications, and reproduction steps see [BENCHMARKS.md](https://github.com/software-mansion-labs/react-native-nano-icons/blob/main/packages/react-native-nano-icons/docs/BENCHMARKS.md).
|
|
275
|
+
|
|
276
|
+
---
|
|
277
|
+
|
|
278
|
+
## ⚠️ Known Limitations
|
|
279
|
+
|
|
280
|
+
- SVG `<filter>` and `<mask>` elements are not supported — font glyphs cannot represent these effects.
|
|
281
|
+
- Only `*.svg` input files are supported.
|
|
282
|
+
|
|
283
|
+
---
|
|
284
|
+
|
|
285
|
+
## 🔧 Font Generation Pipeline
|
|
286
|
+
|
|
287
|
+
<picture>
|
|
288
|
+
<source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/software-mansion-labs/react-native-nano-icons/main/https://raw.githubusercontent.com/software-mansion-labs/react-native-nano-icons/main/packages/react-native-nano-icons/docs/img/nano-icons-graph-inverted.png">
|
|
289
|
+
<source media="(prefers-color-scheme: light)" srcset="https://raw.githubusercontent.com/software-mansion-labs/react-native-nano-icons/main/https://raw.githubusercontent.com/software-mansion-labs/react-native-nano-icons/main/packages/react-native-nano-icons/docs/img/nano-icons-graph-light.png">
|
|
290
|
+
<img alt="Nano Icons Pipeline" src="https://raw.githubusercontent.com/software-mansion-labs/react-native-nano-icons/main/https://raw.githubusercontent.com/software-mansion-labs/react-native-nano-icons/main/packages/react-native-nano-icons/docs/img/nano-icons-graph-light.png">
|
|
291
|
+
</picture>
|
|
292
|
+
|
|
293
|
+
At build time, the pipeline processes your SVG directory through four stages:
|
|
294
|
+
|
|
295
|
+
1. **SVG optimization** - Simplifies the SVG structure removing unnecessary tags for further processing.
|
|
296
|
+
2. **Geometry flattening** — Transforms, clip paths, and overlapping shapes are resolved into simple path-only geometry using a WebAssembly build of [`Skia/pathops`](https://github.com/google/skia/tree/main/src/pathops).
|
|
297
|
+
3. **Color layer extraction** — Each distinct fill color in an SVG is separated into its own layer.
|
|
298
|
+
4. **Font compilation** — Layers are compiled into a standard `.ttf` font file, with each layer mapped to a private-use Unicode codepoint.
|
|
299
|
+
5. **Glyphmap generation** — A compact `.glyphmap.json` is created, mapping icon names to their codepoints, default colors, and metrics.
|
|
300
|
+
|
|
301
|
+
At runtime, the native component stacks glyph layers at the same position — one `drawGlyphs` call per layer via [CoreText](https://developer.apple.com/documentation/coretext/) (iOS) or `drawText` via [Canvas](<https://developer.android.com/reference/android/graphics/Canvas#drawText(java.lang.String,%20float,%20float,%20android.graphics.Paint)>) (Android). On web and Expo Go, a pure `react-native` fallback uses stacked `<Text>` elements.
|
|
302
|
+
|
|
303
|
+
---
|
|
304
|
+
|
|
305
|
+
## 🤝 Contributing
|
|
306
|
+
|
|
307
|
+
We want to make contributing to this project as easy and transparent as possible, and we are grateful to the community for contributing bug fixes and improvements. Read below to learn how you can take part in improving `react-native-nano-icons`.
|
|
308
|
+
|
|
309
|
+
<details>
|
|
310
|
+
<summary>Repo Navigation</summary>
|
|
311
|
+
<br>
|
|
312
|
+
This repository is a yarn workspaces monorepo containing the library package and example apps.
|
|
313
|
+
|
|
314
|
+
#### Package
|
|
315
|
+
|
|
316
|
+
- **Library source:** [`packages/react-native-nano-icons/`](https://github.com/software-mansion-labs/react-native-nano-icons/blob/main/packages/react-native-nano-icons/)
|
|
317
|
+
|
|
318
|
+
#### Examples
|
|
319
|
+
|
|
320
|
+
- **Bare React Native app:** [`examples/BareReactNativeExample/`](https://github.com/software-mansion-labs/react-native-nano-icons/blob/main/examples/BareReactNativeExample/)
|
|
321
|
+
- **Expo app:** [`examples/ExpoExample/`](https://github.com/software-mansion-labs/react-native-nano-icons/blob/main/examples/ExpoExample/)
|
|
322
|
+
</details>
|
|
323
|
+
|
|
324
|
+
#### Code of Conduct
|
|
325
|
+
|
|
326
|
+
We adopted a Code of Conduct that we expect project participants to adhere to. Please read the [full text](https://github.com/software-mansion-labs/react-native-nano-icons/blob/main/CODE_OF_CONDUCT.md) so that you can understand what actions will and will not be tolerated.
|
|
327
|
+
|
|
328
|
+
---
|
|
329
|
+
|
|
330
|
+
## License
|
|
9
331
|
|
|
10
|
-
|
|
332
|
+
`react-native-nano-icons` is released under the **MIT License**. See [LICENSE](LICENSE) for the full text.
|
|
11
333
|
|
|
12
|
-
|
|
334
|
+
---
|
|
13
335
|
|
|
14
336
|
## Nano Icons are created by Software Mansion
|
|
15
337
|
|
|
@@ -19,12 +341,12 @@ Since 2012 [Software Mansion](https://swmansion.com) is a software agency with
|
|
|
19
341
|
experience in building web and mobile apps. We are Core React Native
|
|
20
342
|
Contributors and experts in dealing with all kinds of React Native issues. We
|
|
21
343
|
can help you build your next dream product –
|
|
22
|
-
[Hire us](https://swmansion.com/contact/projects?utm_source=
|
|
344
|
+
[Hire us](https://swmansion.com/contact/projects?utm_source=react-native-nano-icons&utm_medium=readme).
|
|
23
345
|
|
|
24
346
|
<!-- automd:contributors author="software-mansion" -->
|
|
25
347
|
|
|
26
|
-
Made by [@software-mansion](https://github.com/software-mansion)
|
|
348
|
+
Made by [@software-mansion](https://github.com/software-mansion) 💙
|
|
27
349
|
<br><br>
|
|
28
350
|
<a href="https://github.com/software-mansion-labs/react-native-nano-icons/graphs/contributors">
|
|
29
|
-
<img src="https://contrib.rocks/image?repo=software-mansion-labs/react-native-nano-icons" />
|
|
351
|
+
<img src="https://contrib.rocks/image?repo=software-mansion-labs/react-native-nano-icons" />
|
|
30
352
|
</a>
|
package/README.md.bak
ADDED
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
<div align="center">
|
|
2
|
+
|
|
3
|
+
<picture>
|
|
4
|
+
<source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/software-mansion-labs/react-native-nano-icons/main/packages/react-native-nano-icons/docs/img/logo-nanoicons-inverted.svg">
|
|
5
|
+
<source media="(prefers-color-scheme: light)" srcset="https://raw.githubusercontent.com/software-mansion-labs/react-native-nano-icons/main/packages/react-native-nano-icons/docs/img/logo-nanoicons-default.svg">
|
|
6
|
+
<img alt="Nano Icons" src="https://raw.githubusercontent.com/software-mansion-labs/react-native-nano-icons/main/packages/react-native-nano-icons/docs/img/logo-nanoicons-default.svg">
|
|
7
|
+
</picture>
|
|
8
|
+
|
|
9
|
+
|
|
10
|
+
<br>
|
|
11
|
+
</div>
|
|
12
|
+
|
|
13
|
+
# High-performance, build-time icon font generation for React Native & Expo.
|
|
14
|
+
|
|
15
|
+
Start here ➡️➡️➡️ [react-native-nano-icons README.md](/README.md) ⬅️⬅️⬅️
|
|
16
|
+
|
|
17
|
+
## Nano Icons are created by Software Mansion
|
|
18
|
+
|
|
19
|
+
[](https://swmansion.com)
|
|
20
|
+
|
|
21
|
+
Since 2012 [Software Mansion](https://swmansion.com) is a software agency with
|
|
22
|
+
experience in building web and mobile apps. We are Core React Native
|
|
23
|
+
Contributors and experts in dealing with all kinds of React Native issues. We
|
|
24
|
+
can help you build your next dream product –
|
|
25
|
+
[Hire us](https://swmansion.com/contact/projects?utm_source=typegpu&utm_medium=readme).
|
|
26
|
+
|
|
27
|
+
<!-- automd:contributors author="software-mansion" -->
|
|
28
|
+
|
|
29
|
+
Made by [@software-mansion](https://github.com/software-mansion) 💛
|
|
30
|
+
<br><br>
|
|
31
|
+
<a href="https://github.com/software-mansion-labs/react-native-nano-icons/graphs/contributors">
|
|
32
|
+
<img src="https://contrib.rocks/image?repo=software-mansion-labs/react-native-nano-icons" />
|
|
33
|
+
</a>
|
|
File without changes
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "react-native-nano-icons",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.7",
|
|
4
4
|
"description": "Use any svg as font. High-performance, build-time icon font generation and rendering for React Native & Expo.",
|
|
5
5
|
"react-native": "src/index.ts",
|
|
6
6
|
"source": "src/index.ts",
|