react-native-nano-icons 0.1.2 → 0.1.4

package/README.md

@@ -1,174 +1,30 @@
-# react-native-nano-icons
+<div align="center">
 
-**High-performance, build-time icon font generation for React Native & Expo.**
+![Nano Icons (light mode)](./docs/img/logo-nanoicons-default.svg#gh-light-mode-only)
+![Nano Icons (dark mode)](./docs/img/logo-nanoicons-inverted.svg#gh-dark-mode-only)
 
-`react-native-nano-icons` automates the conversion of SVG directories into optimized, **multi-color-aware** native fonts and strictly typed TypeScript component factories. It leverages a WebAssembly-powered skia pathops binary build pipeline to ensure pixel-perfect geometry and zero runtime overhead.
 
----
+<br>
+</div>
 
-## 🧩 Platforms Supported
+# High-performance, build-time icon font generation for React Native & Expo.
 
-- [x] iOS
-- [x] Android
-- [x] Web
+Start here ➡️➡️➡️ [react-native-nano-icons README.md](/README.md) ⬅️⬅️⬅️
 
-> [!NOTE]
-> `<filter>` and `<mask>` are not yet supported, due to native fonts' glyph limitations.
-> In order to leverage those features, use [`react-native-svg`](https://github.com/software-mansion/react-native-svg) or [`expo-image`](https://docs.expo.dev/versions/latest/sdk/image/)
+## Nano Icons are created by Software Mansion
 
-## 🚀 Usage
+[![swm](https://logo.swmansion.com/logo?color=white&variant=desktop&width=150&tag=react-native-nano-icons-github 'Software Mansion')](https://swmansion.com)
 
-### 1. Installation
+Since 2012 [Software Mansion](https://swmansion.com) is a software agency with
+experience in building web and mobile apps. We are Core React Native
+Contributors and experts in dealing with all kinds of React Native issues. We
+can help you build your next dream product –
+[Hire us](https://swmansion.com/contact/projects?utm_source=typegpu&utm_medium=readme).
 
-```bash
-npm install react-native-nano-icons
-```
+<!-- automd:contributors author="software-mansion" -->
 
-### 2. Configuration
-
-#### 2.1. Expo
-
-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.
-
-`app.json`
-
-```JSON
-{
-  "expo": {
-    "plugins": [
-      [
-        "react-native-nano-icons",
-        {
-          "iconSets": [
-            {
-              "inputDir": "./assets/icons/user"
-            }
-          ]
-        }
-      ]
-    ]
-  }
-}
-```
-
-<details>
-<summary>All iconSets Entry Plugin Options</summary>
-
-The plugin accepts an object with an `iconSets` array, allowing you to generate multiple distinct fonts in a single build.
-
-| Property       | Type     | Required | Default        | Description                                                                                                                |
-| :------------- | :------- | :------- | :------------- | :------------------------------------------------------------------------------------------------------------------------- |
-| `inputDir`     | `string` | **Yes**  | —              | Path to the directory containing your `.svg` files (e.g., `./assets/icons/ui`).                                            |
-| `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`).        |
-| `outputDir`    | `string` | No       | `../nanoicons` | Path where the `.ttf` and `.json` artifacts will be saved. Defaults to a sibling `nanoicons` folder relative to the input. |
-| `upm`          | `number` | No       | `1024`         | Units Per Em. Defines the resolution of the font grid.                                                                     |
-| `startUnicode` | `string` | No       | `0xe900`       | The starting Hex Unicode point for the first icon glyph.                                                                   |
-
-  <details>
-  <summary>Default Dir Path Behavior</summary>
-  If you do not specify an `outputDir` or `fontFamily`, the library attempts to keep your project organized by creating a   sibling folder.
-
-- **Input:** `./assets/icons/user`
-- **Resulting Output:** `./assets/icons/nanoicons/user.ttf` & `user.glyphmap.json`
-  </details>
-  </details>
-
-#### 2.2 Bare React Native/React Native Web (no Expo)
-
-Bare apps don’t have a prebuild step, so you run the same pipeline via the CLI and ship the built fonts into the native project yourself:
-
-1. **Config** – At the app root, add a `.nanoicons.json` with the same `iconSets` shape as the Expo plugin (see "All iconSets Entry Plugin Options above").
-   <details>
-    <summary>.nanoicons.json example</summary>
-    
-    ```JSON
-    {
-      "iconSets": [
-        {
-          "inputDir": "./assets/icons/user"
-        }
-      ]
-    }
-    ```
-    
-    </details>
-
-2. **Build and link** – From the app root run:
-
-   ```sh
-   npx react-native-nano-icons
-   ```
-
-   This works exactly like the config plugin, removing any necessity for manual Xcode/Android Studio steps.
-
-### 3. Creating an Icon Set Component
-
-Use the factory function to create a fully typed component for your specific icon set. This enables multiple distinct sets (e.g., "Outlined", "Solid", "Brand") within a single app.
-
-`src/components/UserIcon.tsx`
-
-```TypeScript
-import { createNanoIconSet } from "react-native-nano-icons";
-// auto-generated during build-time in outputDir
-import glyphMap from "../../assets/nanoicons/UserIcons.glyphmap.json";
-
-export const UserIcon = createNanoIconSet(glyphMap);
-```
-
-### 4. Component Usage
-
-The generated component supports standard `Text` props **excluding** `style.color | .fontWeight | .fontFamily`.
-
-To manipulate the color(s) of the icon you should provide `colorPalette: ColorValue[]`.
-
-The `name` prop corresponds to **the original name of the svg file** for a given icon.
-
-```TypeScript
-import { Text } from 'react-native'
-import { UserIcon } from './components/UserIcon';
-
-export default function App() {
-  return (
-    <>
-      // Renders the icon with its original multi-color layers from the SVG
-      <UserIcon name="avatar-1" size={32} />
-
-      // Overrides all color layers with the provided colors respectively
-      <UserIcon name="avatar-1" size={24} colorPalette={["blue", "#ffffff", "#fc2930"]} />
-
-      // Renders icon inline within a paragraph
-      <Text>
-        User <UserIcon name="avatar-1" size={12}  /> liked your photo!
-      </Text>
-    </>
-  );
-}
-```
-
-Your color icons can have as many colors as your original svg has, therefore you should experiment to establish which element of the array corresponds to the layer you aim to change the color of.
-If the icon is single-color by design (which results in creating a single glyph during build-time) only the first element is took into consideration, and if the `colorPalette` array is too short - the last color is repeated.
-
-### 5. Font Regeneration
-
-The script detects changes in path and contents of the SVGs in your input directory based on a fingerprint hash. If anything changed, or the output font files are deleted, a given icon-set is regenerated.
-
-> [!IMPORTANT]
-> **You should always verify your icons visually.**
-
----
-
-## 💡 Architecture & Pipeline & Examples
-
-see [MOTIVATION.md](docs/MOTIVATION.md)
-
----
-
-## License
-
-`react-native-nano-icons` is released under the **MIT License**. See [LICENSE](LICENSE) for the full text.
-
----
-
-Built by [Software Mansion](https://swmansion.com/).
-
-[<img width="128" height="69" alt="Software Mansion Logo" src="https://github.com/user-attachments/assets/f0e18471-a7aa-4e80-86ac-87686a86fe56" />](https://swmansion.com/)
+Made by [@software-mansion](https://github.com/software-mansion) 💛
+<br><br>
+<a href="https://github.com/software-mansion-labs/react-native-nano-icons/graphs/contributors">
+<img src="https://contrib.rocks/image?repo=software-mansion-labs/react-native-nano-icons" />
+</a>

package/android/build.gradle

@@ -0,0 +1,28 @@
+buildscript {
+  ext.safeExtGet = { prop, fallback ->
+    rootProject.ext.has(prop) ? rootProject.ext.get(prop) : fallback
+  }
+}
+
+apply plugin: 'com.android.library'
+apply plugin: 'org.jetbrains.kotlin.android'
+apply plugin: 'com.facebook.react'
+
+android {
+  namespace "com.nanoicons"
+  compileSdk safeExtGet('compileSdkVersion', 35)
+
+  defaultConfig {
+    minSdk safeExtGet('minSdkVersion', 24)
+  }
+
+  sourceSets {
+    main {
+      java.srcDirs += ["src/main/java"]
+    }
+  }
+}
+
+dependencies {
+  implementation 'com.facebook.react:react-android'
+}

package/android/src/main/java/com/nanoicons/NanoIconView.kt

@@ -0,0 +1,78 @@
+package com.nanoicons
+
+import android.content.Context
+import android.graphics.Canvas
+import android.graphics.Paint
+import android.graphics.Typeface
+import android.view.View
+import com.facebook.react.common.assets.ReactFontManager
+
+class NanoIconView(context: Context) : View(context) {
+
+  private val paint = Paint(Paint.ANTI_ALIAS_FLAG)
+  private var codepoints: IntArray = intArrayOf()
+  private var colors: IntArray = intArrayOf()
+  private var cachedFontFamily: String? = null
+  private var cachedTypeface: Typeface? = null
+  // Cached String objects — rebuilt only when codepoints change
+  private var cachedTexts: Array<String> = emptyArray()
+  // Cached baseline — rebuilt only when font or size changes
+  private var cachedBaseline: Float = 0f
+
+  init {
+    // Transparent background, no default drawing
+    setBackgroundColor(0x00000000)
+  }
+
+  fun setFontFamily(fontFamily: String) {
+    if (fontFamily != cachedFontFamily) {
+      cachedFontFamily = fontFamily
+      cachedTypeface = ReactFontManager.getInstance()
+        .getTypeface(fontFamily, Typeface.NORMAL, context.assets)
+      paint.typeface = cachedTypeface
+      updateBaseline()
+      invalidate()
+    }
+  }
+
+  fun setFontSize(size: Float) {
+    val sizeInPx = size * resources.displayMetrics.density
+    if (paint.textSize != sizeInPx) {
+      paint.textSize = sizeInPx
+      updateBaseline()
+      invalidate()
+    }
+  }
+
+  fun setCodepoints(values: IntArray) {
+    codepoints = values
+    cachedTexts = Array(values.size) { i -> String(Character.toChars(values[i])) }
+    invalidate()
+  }
+
+  fun setColors(values: IntArray) {
+    colors = values
+    invalidate()
+  }
+
+  private fun updateBaseline() {
+    cachedBaseline = -paint.fontMetrics.ascent
+  }
+
+  override fun onDraw(canvas: Canvas) {
+    super.onDraw(canvas)
+    if (cachedTexts.isEmpty() || cachedTypeface == null) return
+
+    canvas.save()
+    canvas.clipRect(0f, 0f, width.toFloat(), height.toFloat())
+
+    // All layers drawn at the same position (stacked on each other)
+    for (i in cachedTexts.indices) {
+      val color = if (i < colors.size) colors[i] else 0xFF000000.toInt()
+      paint.color = color
+      canvas.drawText(cachedTexts[i], 0f, cachedBaseline, paint)
+    }
+
+    canvas.restore()
+  }
+}

package/android/src/main/java/com/nanoicons/NanoIconViewManager.kt

@@ -0,0 +1,84 @@
+package com.nanoicons
+
+import com.facebook.react.bridge.ReadableArray
+import com.facebook.react.module.annotations.ReactModule
+import com.facebook.react.uimanager.SimpleViewManager
+import com.facebook.react.uimanager.ThemedReactContext
+import com.facebook.react.uimanager.ViewManagerDelegate
+import com.facebook.react.uimanager.annotations.ReactProp
+import com.facebook.react.viewmanagers.NanoIconViewManagerDelegate
+import com.facebook.react.viewmanagers.NanoIconViewManagerInterface
+
+@ReactModule(name = NanoIconViewManager.REACT_CLASS)
+class NanoIconViewManager :
+  SimpleViewManager<NanoIconView>(),
+  NanoIconViewManagerInterface<NanoIconView> {
+
+  private val delegate: ViewManagerDelegate<NanoIconView> =
+    NanoIconViewManagerDelegate(this)
+
+  companion object {
+    const val REACT_CLASS = "NanoIconView"
+  }
+
+  override fun getName(): String = REACT_CLASS
+
+  override fun createViewInstance(reactContext: ThemedReactContext): NanoIconView =
+    NanoIconView(reactContext)
+
+  override fun getDelegate(): ViewManagerDelegate<NanoIconView> = delegate
+
+  @ReactProp(name = "fontFamily")
+  override fun setFontFamily(view: NanoIconView, value: String?) {
+    if (value != null) {
+      view.setFontFamily(value)
+    }
+  }
+
+  @ReactProp(name = "codepoints")
+  override fun setCodepoints(view: NanoIconView, value: ReadableArray?) {
+    if (value != null) {
+      val arr = IntArray(value.size())
+      for (i in 0 until value.size()) {
+        arr[i] = value.getInt(i)
+      }
+      view.setCodepoints(arr)
+    }
+  }
+
+  @ReactProp(name = "colors")
+  override fun setColors(view: NanoIconView, value: ReadableArray?) {
+    if (value != null) {
+      val arr = IntArray(value.size())
+      for (i in 0 until value.size()) {
+        arr[i] = value.getInt(i)
+      }
+      view.setColors(arr)
+    }
+  }
+
+  @ReactProp(name = "fontSize", defaultFloat = 12f)
+  override fun setFontSize(view: NanoIconView, value: Float) {
+    view.setFontSize(value)
+  }
+
+  @ReactProp(name = "advanceWidth", defaultInt = 0)
+  override fun setAdvanceWidth(view: NanoIconView, value: Int) {
+    // Used for sizing on JS side; native view uses Canvas layout
+  }
+
+  @ReactProp(name = "unitsPerEm", defaultInt = 0)
+  override fun setUnitsPerEm(view: NanoIconView, value: Int) {
+    // Used for sizing on JS side; native view uses Canvas layout
+  }
+
+  @ReactProp(name = "iconWidth", defaultFloat = 0f)
+  override fun setIconWidth(view: NanoIconView, value: Float) {
+    // Width set via style from JS
+  }
+
+  @ReactProp(name = "iconHeight", defaultFloat = 0f)
+  override fun setIconHeight(view: NanoIconView, value: Float) {
+    // Height set via style from JS
+  }
+}

package/android/src/main/java/com/nanoicons/NanoIconsPackage.kt

@@ -0,0 +1,22 @@
+package com.nanoicons
+
+import com.facebook.react.BaseReactPackage
+import com.facebook.react.bridge.NativeModule
+import com.facebook.react.bridge.ReactApplicationContext
+import com.facebook.react.module.model.ReactModuleInfoProvider
+import com.facebook.react.uimanager.ViewManager
+
+class NanoIconsPackage : BaseReactPackage() {
+
+  override fun createViewManagers(
+    reactContext: ReactApplicationContext
+  ): List<ViewManager<*, *>> = listOf(NanoIconViewManager())
+
+  override fun getModule(
+    name: String,
+    reactContext: ReactApplicationContext
+  ): NativeModule? = null
+
+  override fun getReactModuleInfoProvider(): ReactModuleInfoProvider =
+    ReactModuleInfoProvider { emptyMap() }
+}

package/ios/NanoIconView.h

@@ -0,0 +1,4 @@
+#import <React/RCTViewComponentView.h>
+
+@interface NanoIconView : RCTViewComponentView
+@end