react-native-nano-icons

React Native Nano Icons 1.0.0

v1.​0.​0Major Release

Key changes

Hot reload Metro plugin

Wrap your Metro config with withNanoIcons and edited SVGs reload in the running dev app, without a native rebuild.

  • Icon font hot reload in development by @stachbial in #74
  • Metro: read the aggregated change event of metro-file-map 0.84.3 and newer by @huextrat in #75

Native symbols for tab bars

SVGs can now be generated as SF Symbols on iOS and VectorDrawables on Android, and used in react-navigation’s native tabs with nativeNanoSymbol. Requires react-navigation 8 and react-native-screens 4.29+.

  • Native symbol support by @stachbial in #34
  • Use react-navigation’s multicolor rendering mode for native symbols by @stachbial in #87

Animated size and color

size and color are now native props, so they can be animated with Reanimated or set through Unistyles.

  • Animate size and color via a custom shadow node (Reanimated, Unistyles) by @stachbial in #79

Breaking changes

  • React Native 0.81+ is required (was 0.74+).
  • Regenerate fonts after upgrading (npx react-native-nano-icons or npx expo prebuild) and rebuild the native app.
  • CLI: --dynamic --app-config is now --dynamic-app-config, and paths in .nanoicons.json resolve relative to the file.
  • Bump the react-native peer dependency to 0.81 for shadow node support by @stachbial in #84
  • CLI: add --help, a --dynamic-app-config flag and config-relative paths by @stachbial in #86

Improvements

  • Colors: support PlatformColor and DynamicColorIOS by @johankasperi in #55
  • Colors: add tintMode="currentColor" to color only currentColor layers by @yalanyali in #28
  • Fonts: fingerprint every font build and verify it at runtime by @stachbial in #67
  • Web: emit .woff2 fonts and render under the configured family by @stachbial in #68
  • Web: forward className to the container element by @lursz in #40
  • CLI: report every broken icon with author-facing messages by @stachbial in #60
  • Pipeline: replace Pyodide with a TypeScript port of picosvg by @stachbial in #58
  • Pipeline: restructure the SVG flattening pipeline by @stachbial in #57
  • Pipeline: compile icons in a worker pool by @stachbial in #64
  • Pipeline: trim the tarball and shrink generated fonts by @stachbial in #61

Bug fixes

iOS

  • Fix stale glyph scale and state leaks on recycled icon views by @huextrat in #47
  • Place inline icons on the text baseline by @stachbial in #78
  • Expose FabricComponents headers for inline baseline correction by @huextrat in #82

Android

  • Fit the glyph to the view bounds so font scale applies by @huextrat in #49
  • Skip the explicit Kotlin plugin when AGP registers the kotlin extension by @gabrieldonadel in #56

CLI and packaging

  • Skip icons with <text>, <style>, <foreignObject>, <a> or <switch> instead of failing the set by @stachbial in #83
  • Resolve the iOS Info.plist from target build settings by @vanHoi in #53
  • Scale the default safeZone with upm by @stachbial in #71
  • Add the missing react-native export field by @lursz in #39
  • Include codegen specs in the published package by @huextrat in #66

New contributors

  • @huextrat made their first contribution in #47
  • @vanHoi made their first contribution in #53
  • @johankasperi made their first contribution in #55
  • @yalanyali made their first contribution in #28
  • @gabrieldonadel made their first contribution in #56

Source: v1.0.0 release notes on GitHub. Full changelog: v0.2.1...v1.0.0.

Release card
React Native Nano Icons 1.0.0 release card
Download