react-native-nano-icons 0.1.2 → 0.1.4

package/ios/NanoIconView.mm

@@ -0,0 +1,286 @@
+#import "NanoIconView.h"
+#import <CoreText/CoreText.h>
+#import <React/RCTConversions.h>
+#import <React/RCTFabricComponentsPlugins.h>
+#import <react/renderer/components/RNNanoIconsSpec/ComponentDescriptors.h>
+#import <react/renderer/components/RNNanoIconsSpec/Props.h>
+
+using namespace facebook::react;
+
+// Drawing canvas that can be shifted outside the Yoga frame.
+@interface NanoIconDrawingView : UIView
+@property (nonatomic, copy) void (^drawBlock)(CGContextRef, CGRect);
+@end
+
+@implementation NanoIconDrawingView
+- (instancetype)initWithFrame:(CGRect)frame {
+    if (self = [super initWithFrame:frame]) {
+        self.opaque = NO;
+        self.backgroundColor = [UIColor clearColor];
+        self.userInteractionEnabled = NO;
+    }
+    return self;
+}
+- (void)drawRect:(CGRect)rect {
+    if (self.drawBlock) {
+        CGContextRef ctx = UIGraphicsGetCurrentContext();
+        if (ctx) self.drawBlock(ctx, self.bounds);
+    }
+}
+@end
+
+@implementation NanoIconView {
+  CTFontRef _font;
+  NSString *_fontFamily;
+  CGFloat _fontSize;
+  std::vector<CGGlyph> _glyphs;
+  std::vector<uint32_t> _colors;
+  std::vector<CGColorRef> _cachedCGColors;
+  CGFloat _fitScale;
+  CGPoint _baselinePosition;
+  BOOL _metricsValid;
+  NanoIconDrawingView *_drawingView;
+}
+
+- (instancetype)initWithFrame:(CGRect)frame {
+  if (self = [super initWithFrame:frame]) {
+    static const auto defaultProps = std::make_shared<const NanoIconViewProps>();
+    _props = defaultProps;
+    self.opaque = NO;
+    self.backgroundColor = [UIColor clearColor];
+    self.clipsToBounds = NO;
+
+    _fitScale = 1.0;
+    _baselinePosition = CGPointZero;
+
+    _drawingView = [[NanoIconDrawingView alloc] initWithFrame:self.bounds];
+    __weak __typeof(self) weakSelf = self;
+    _drawingView.drawBlock = ^(CGContextRef context, CGRect bounds) {
+      [weakSelf _drawIconInContext:context bounds:bounds];
+    };
+    [self addSubview:_drawingView];
+  }
+  return self;
+}
+
++ (ComponentDescriptorProvider)componentDescriptorProvider {
+  return concreteComponentDescriptorProvider<NanoIconViewComponentDescriptor>();
+}
+
+- (void)updateClippedSubviewsWithClipRect:(__unused CGRect)clipRect
+                           relativeToView:(__unused UIView *)clipView {}
+
+#pragma mark - Metrics
+
+// Scale factor to fit the icon font's em square into the view height,
+// and the CoreText baseline origin used for all glyph draws.
+- (void)_updateMetrics {
+  if (!_font) {
+    _metricsValid = NO;
+    return;
+  }
+  CGFloat ascent = CTFontGetAscent(_font);
+  CGFloat descent = CTFontGetDescent(_font);
+  CGFloat totalHeight = ascent + descent;
+  _fitScale = (totalHeight > 0) ? (self.bounds.size.height / totalHeight) : 1.0;
+  _baselinePosition = CGPointMake(0, descent);
+  _metricsValid = YES;
+}
+
+// Distance from this view's bottom edge to the parent text baseline.
+// Returns 0 when standalone or when the icon is taller than the text line.
+- (CGFloat)_inlineBaselineOffset {
+  UIView *current = self.superview;
+  NSAttributedString *attrStr = nil;
+  while (current) {
+    if ([current respondsToSelector:@selector(attributedText)]) {
+      attrStr = [current performSelector:@selector(attributedText)];
+      if (attrStr.length > 0) break;
+    }
+    current = current.superview;
+  }
+  if (!attrStr) return 0;
+
+  UIFont *f = [attrStr attribute:NSFontAttributeName atIndex:0 effectiveRange:nil];
+  if (!f) return 0;
+
+  NSParagraphStyle *style = [attrStr attribute:NSParagraphStyleAttributeName
+                                       atIndex:0 effectiveRange:nil];
+  CGFloat lineHeight = (style && style.maximumLineHeight > 0)
+                     ? style.maximumLineHeight : f.lineHeight;
+
+  NSNumber *bOff = [attrStr attribute:NSBaselineOffsetAttributeName
+                              atIndex:0 effectiveRange:nil];
+  CGFloat baselineFromLineTop = f.ascender - (bOff ? bOff.doubleValue : 0);
+
+  CGFloat frameBottom = self.frame.origin.y + self.frame.size.height;
+  CGFloat posInLine = fmod(frameBottom, lineHeight);
+  if (posInLine < 0.01) posInLine = lineHeight;
+
+  return MAX(0, posInLine - baselineFromLineTop);
+}
+
+#pragma mark - Layout
+
+- (void)layoutSubviews {
+  [super layoutSubviews];
+  if (!_metricsValid) [self _updateMetrics];
+
+  CGFloat offset = [self _inlineBaselineOffset];
+  _drawingView.frame = CGRectMake(0, -offset,
+                                  self.bounds.size.width, self.bounds.size.height);
+}
+
+#pragma mark - Drawing
+
+// Render multi-color icons by drawing each color layer glyph at the same
+// position. Layers stack via painter's order to compose the final icon.
+- (void)_drawIconInContext:(CGContextRef)context bounds:(CGRect)bounds {
+  if (!_font || _glyphs.empty()) return;
+  if (!_metricsValid) [self _updateMetrics];
+
+  CGContextSaveGState(context);
+  // Flip to CoreText coordinates (Y-up) and apply fit scale.
+  CGContextTranslateCTM(context, 0, bounds.size.height);
+  CGContextScaleCTM(context, 1.0, -1.0);
+  CGContextScaleCTM(context, _fitScale, _fitScale);
+
+  size_t i = 0;
+  while (i < _glyphs.size()) {
+    if (_glyphs[i] == 0) { i++; continue; }
+
+    CGColorRef color = (i < _cachedCGColors.size()) ? _cachedCGColors[i] : NULL;
+    if (!color) {
+      static CGColorRef sBlack = CGColorCreateSRGB(0, 0, 0, 1);
+      color = sBlack;
+    }
+    CGContextSetFillColorWithColor(context, color);
+
+    // Batch consecutive same-color glyphs.
+    size_t batchStart = i;
+    size_t batchCount = 0;
+    CGPoint posBuf[16];
+    CGGlyph glyphBuf[16];
+
+    while (i < _glyphs.size()) {
+      if (_glyphs[i] == 0) { i++; continue; }
+      CGColorRef next = (i < _cachedCGColors.size()) ? _cachedCGColors[i] : NULL;
+      if (i > batchStart && next != color) break;
+      if (batchCount < 16) {
+        posBuf[batchCount] = _baselinePosition;
+        glyphBuf[batchCount] = _glyphs[i];
+      }
+      batchCount++;
+      i++;
+    }
+
+    CGPoint *positions = posBuf;
+    CGGlyph *glyphs = glyphBuf;
+    if (batchCount > 16) {
+      positions = (CGPoint *)malloc(batchCount * sizeof(CGPoint));
+      glyphs = (CGGlyph *)malloc(batchCount * sizeof(CGGlyph));
+      size_t idx = 0;
+      for (size_t j = batchStart; j < i; j++) {
+        if (_glyphs[j] == 0) continue;
+        positions[idx] = _baselinePosition;
+        glyphs[idx] = _glyphs[j];
+        idx++;
+      }
+    }
+
+    CTFontDrawGlyphs(_font, glyphs, positions, batchCount, context);
+
+    if (batchCount > 16) {
+      free(positions);
+      free(glyphs);
+    }
+  }
+
+  CGContextRestoreGState(context);
+}
+
+#pragma mark - Props
+
+- (void)_releaseCachedColors {
+  for (CGColorRef c : _cachedCGColors) CGColorRelease(c);
+  _cachedCGColors.clear();
+}
+
+// Convert ARGB uint32 color values into cached CGColorRefs.
+- (void)_rebuildCachedColors {
+  [self _releaseCachedColors];
+  _cachedCGColors.resize(_colors.size());
+  for (size_t i = 0; i < _colors.size(); i++) {
+    uint32_t ci = _colors[i];
+    _cachedCGColors[i] = CGColorCreateSRGB(
+        ((ci >> 16) & 0xFF) / 255.0,
+        ((ci >> 8)  & 0xFF) / 255.0,
+        ( ci        & 0xFF) / 255.0,
+        ((ci >> 24) & 0xFF) / 255.0);
+  }
+}
+
+- (void)updateProps:(const Props::Shared &)props oldProps:(const Props::Shared &)oldProps {
+  const auto &oldViewProps = static_cast<const NanoIconViewProps &>(*_props);
+  const auto &newViewProps = static_cast<const NanoIconViewProps &>(*props);
+
+  BOOL fontChanged = NO;
+  BOOL needsRedraw = NO;
+
+  if (oldViewProps.fontFamily != newViewProps.fontFamily ||
+      oldViewProps.fontSize  != newViewProps.fontSize) {
+    if (_font) { CFRelease(_font); _font = NULL; }
+    _fontFamily = [NSString stringWithUTF8String:newViewProps.fontFamily.c_str()];
+    _fontSize = newViewProps.fontSize;
+    _font = CTFontCreateWithName((__bridge CFStringRef)_fontFamily, _fontSize, NULL);
+    _metricsValid = NO;
+    fontChanged = YES;
+    needsRedraw = YES;
+  }
+
+  // Map Unicode codepoints to font glyph IDs, handling surrogate pairs for codepoints > 0xFFFF.
+  if (fontChanged || oldViewProps.codepoints != newViewProps.codepoints) {
+    const auto &codepoints = newViewProps.codepoints;
+    _glyphs.resize(codepoints.size());
+    for (size_t i = 0; i < codepoints.size(); i++) {
+      int32_t cp = codepoints[i];
+      if (cp <= 0xFFFF) {
+        UniChar ch = (UniChar)cp;
+        CTFontGetGlyphsForCharacters(_font, &ch, &_glyphs[i], 1);
+      } else {
+        UniChar surr[2] = {
+          (UniChar)(0xD800 + ((cp - 0x10000) >> 10)),
+          (UniChar)(0xDC00 + ((cp - 0x10000) & 0x3FF))
+        };
+        CGGlyph pair[2] = {0, 0};
+        CTFontGetGlyphsForCharacters(_font, surr, pair, 2);
+        _glyphs[i] = pair[0];
+      }
+    }
+    needsRedraw = YES;
+  }
+
+  if (oldViewProps.colors != newViewProps.colors) {
+    const auto &colors = newViewProps.colors;
+    _colors.resize(colors.size());
+    for (size_t i = 0; i < colors.size(); i++) {
+      _colors[i] = (uint32_t)colors[i];
+    }
+    [self _rebuildCachedColors];
+    needsRedraw = YES;
+  }
+
+  [super updateProps:props oldProps:oldProps];
+  if (needsRedraw) [_drawingView setNeedsDisplay];
+}
+
+- (void)dealloc {
+  if (_font) CFRelease(_font);
+  [self _releaseCachedColors];
+}
+
+@end
+
+Class<RCTComponentViewProtocol> NanoIconViewCls(void) {
+  return NanoIconView.class;
+}

package/lib/commonjs/cli/build.js

@@ -20,7 +20,7 @@ function shouldSkipGeneration(inputHash, outputDir, fontFamily, logger) {
         return false;
     }
     const glyphmap = JSON.parse(fs_1.default.readFileSync(glyphmapPath, 'utf8'));
-    const storedHash = glyphmap?.meta?.hash;
+    const storedHash = glyphmap?.m?.h;
     if (storedHash && storedHash === inputHash) {
         logger?.info(`${fontFamily}: SVG fingerprint unchanged, skipping build.`);
         return true;

package/lib/commonjs/cli/config.d.ts

@@ -3,7 +3,7 @@ export type NanoIconsConfig = {
     iconSets: IconSetConfig[];
 };
 /**
- * Load .nanoicons.json from the project root.
+ * Load .nanoicons.json from the given directory.
  * Throws with a helpful message if the file is missing or malformed.
  */
-export declare function loadNanoIconsConfig(projectRoot: string): NanoIconsConfig;
+export declare function loadNanoIconsConfig(configRoot: string): NanoIconsConfig;

package/lib/commonjs/cli/config.js

@@ -7,19 +7,20 @@ exports.loadNanoIconsConfig = loadNanoIconsConfig;
 const node_fs_1 = __importDefault(require("node:fs"));
 const node_path_1 = __importDefault(require("node:path"));
 /**
- * Load .nanoicons.json from the project root.
+ * Load .nanoicons.json from the given directory.
  * Throws with a helpful message if the file is missing or malformed.
  */
-function loadNanoIconsConfig(projectRoot) {
-    const configPath = node_path_1.default.join(projectRoot, '.nanoicons.json');
+function loadNanoIconsConfig(configRoot) {
+    const configPath = node_path_1.default.join(configRoot, '.nanoicons.json');
     if (!node_fs_1.default.existsSync(configPath)) {
-        throw new Error(`[react-native-nano-icons] No .nanoicons.json found at project root (${projectRoot}).\n` +
-            `Create one with: { "iconSets": [{ "inputDir": "assets/icons", "fontFamily": "MyIcons" }] }`);
+        throw new Error(`🔬❌ [react-native-nano-icons] No .nanoicons.json found at (${configRoot}).\n` +
+            `Create one with: { "iconSets": [{ "inputDir": "assets/icons", "fontFamily": "MyIcons" }] } \n` +
+            `Or run with --path <dir> to specify a different directory.`);
     }
     const raw = node_fs_1.default.readFileSync(configPath, 'utf8');
     const config = JSON.parse(raw);
     if (!config?.iconSets?.length) {
-        throw new Error(`[react-native-nano-icons] .nanoicons.json must contain an "iconSets" array with at least one entry.`);
+        throw new Error(`🔬❌ [react-native-nano-icons] .nanoicons.json must contain an "iconSets" array with at least one entry.`);
     }
     return config;
 }

package/lib/commonjs/scripts/cli.js

@@ -1,25 +1,35 @@
 #!/usr/bin/env node
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 /**
  * Bare React Native workflow: build icon fonts and link them into the native project.
  *
- * Run from your app root: npx react-native-nano-icons [--verbose]
+ * Run from your app root: npx react-native-nano-icons [--verbose] [--path <dir>]
  *
  * Reads .nanoicons.json (same shape as Expo plugin options) so Expo and bare apps
  * share one config format.
  *
  * Flags:
- *   --verbose   Show per-SVG processing details and pipeline timing
+ *   --verbose        Show per-SVG processing details and pipeline timing
+ *   --path <dir>     Directory containing .nanoicons.json (default: cwd)
  */
+const node_path_1 = __importDefault(require("node:path"));
 const index_js_1 = require("../cli/index.js");
 async function main() {
     const verbose = process.argv.includes('--verbose');
     const level = verbose ? 'verbose' : 'normal';
+    const pathIdx = process.argv.indexOf('--path');
+    const projectRoot = process.cwd();
+    const configRoot = pathIdx !== -1 && process.argv[pathIdx + 1]
+        ? node_path_1.default.resolve(projectRoot, process.argv[pathIdx + 1])
+        : projectRoot;
     const logger = await (0, index_js_1.createOraLogger)(level);
-    const config = (0, index_js_1.loadNanoIconsConfig)(process.cwd());
-    const built = await (0, index_js_1.buildAllFonts)(config.iconSets, process.cwd(), { logger });
-    await (0, index_js_1.linkBare)(process.cwd(), built, logger);
+    const config = (0, index_js_1.loadNanoIconsConfig)(configRoot);
+    const built = await (0, index_js_1.buildAllFonts)(config.iconSets, projectRoot, { logger });
+    await (0, index_js_1.linkBare)(projectRoot, built, logger);
 }
 main().catch((err) => {
     const message = err instanceof Error ? err.message : String(err);

package/lib/commonjs/src/core/font/compile.d.ts

@@ -1,5 +1,16 @@
-export declare function compileTtfFromGlyphSVGs(opts: {
-    glyphDir: string;
+export type FontGlyph = {
+    codepoint: number;
+    advanceWidth: number;
+    /** Path data already in font coordinates (Y-up, placement applied). */
+    d: string;
+};
+export declare function parseCompileTtfFromGlyphsError(err: unknown, codepointToIcon: Map<number, string>): void;
+/**
+ * Compile a TTF font from pre-transformed glyph data.
+ * Builds SVG font XML directly (no intermediate files), then converts via svg2ttf.
+ */
+export declare function compileTtfFromGlyphs(opts: {
+    glyphs: FontGlyph[];
     outTtfPath: string;
     fontName: string;
     upm: number;

package/lib/commonjs/src/core/font/compile.js

@@ -3,63 +3,66 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.compileTtfFromGlyphSVGs = compileTtfFromGlyphSVGs;
+exports.parseCompileTtfFromGlyphsError = parseCompileTtfFromGlyphsError;
+exports.compileTtfFromGlyphs = compileTtfFromGlyphs;
 const node_fs_1 = __importDefault(require("node:fs"));
 const node_path_1 = __importDefault(require("node:path"));
-const node_events_1 = require("node:events");
 const metrics_js_1 = require("./metrics.js");
 const svg2ttf_1 = __importDefault(require("svg2ttf"));
-const parse_js_1 = require("../../utils/parse.js");
-async function writeGlyphStreamToFont(fontStream, svgPath, filename) {
-    const codepoint = (0, parse_js_1.parseCodepointFromFilename)(filename);
-    const name = node_path_1.default.basename(filename, '.svg');
-    return new Promise((resolve, reject) => {
-        const glyphStream = node_fs_1.default.createReadStream(svgPath);
-        glyphStream.metadata = {
-            name,
-            unicode: [String.fromCodePoint(codepoint)],
-        };
-        glyphStream.on('error', reject);
-        // Do not add fontStream.on("error", reject) here — one per glyph would exceed
-        // Node's default MaxListeners (10). Font stream errors are handled once below.
-        fontStream.write(glyphStream);
-        glyphStream.on('end', resolve);
+function escapeXml(s) {
+    return s.replace(/&/g, '&').replace(/"/g, '"');
+}
+/**
+ * Build an SVG font XML string from pre-transformed glyph data.
+ */
+function buildSvgFontXml(opts) {
+    const { fontName, glyphs, upm, ascent, descent } = opts;
+    const glyphLines = glyphs.map((g) => {
+        const hex = g.codepoint.toString(16);
+        const name = `u${hex.padStart(4, '0')}`;
+        return `<glyph glyph-name="${name}" unicode="&#x${hex};" horiz-adv-x="${g.advanceWidth}" d="${escapeXml(g.d)}"/>`;
     });
+    return `<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg xmlns="http://www.w3.org/2000/svg">
+<defs>
+<font id="${escapeXml(fontName)}" horiz-adv-x="${upm}">
+<font-face font-family="${escapeXml(fontName)}" units-per-em="${upm}" ascent="${ascent}" descent="${-Math.abs(descent)}"/>
+<missing-glyph horiz-adv-x="0"/>
+${glyphLines.join('\n')}
+</font>
+</defs>
+</svg>`;
+}
+function parseCompileTtfFromGlyphsError(err, codepointToIcon) {
+    const msg = err instanceof Error ? err.message : String(err);
+    const cpMatch = msg.match(/glyph\s+"u([0-9a-fA-F]+)"/);
+    if (cpMatch) {
+        const cp = parseInt(cpMatch[1], 16);
+        const iconName = codepointToIcon.get(cp);
+        const detail = iconName
+            ? `icon "${iconName}" (codepoint u${cpMatch[1]})`
+            : `codepoint u${cpMatch[1]}`;
+        throw new Error(`Font compilation failed for ${detail}: ${msg}`);
+    }
+    throw err;
 }
-async function compileTtfFromGlyphSVGs(opts) {
-    const { SVGIcons2SVGFontStream } = await import('svgicons2svgfont');
-    const { glyphDir, outTtfPath, fontName, upm, ascent, descent } = opts;
+/**
+ * Compile a TTF font from pre-transformed glyph data.
+ * Builds SVG font XML directly (no intermediate files), then converts via svg2ttf.
+ */
+async function compileTtfFromGlyphs(opts) {
+    const { glyphs, outTtfPath, fontName, upm, ascent, descent } = opts;
     const lineGap = opts.lineGap ?? 0;
-    const files = node_fs_1.default
-        .readdirSync(glyphDir)
-        .filter((f) => /^u[0-9a-fA-F]+\.svg$/.test(f))
-        .sort((a, b) => (0, parse_js_1.parseCodepointFromFilename)(a) - (0, parse_js_1.parseCodepointFromFilename)(b));
-    if (files.length === 0)
-        throw new Error(`No glyph SVGs found in: ${glyphDir}`);
-    const fontStream = new SVGIcons2SVGFontStream({
+    if (glyphs.length === 0)
+        throw new Error('No glyphs to compile');
+    const svgFontString = buildSvgFontXml({
         fontName,
-        fontHeight: upm,
-        normalize: false,
+        glyphs,
+        upm,
         ascent,
         descent,
     });
-    const svgFontChunks = [];
-    fontStream.on('data', (c) => svgFontChunks.push(Buffer.isBuffer(c) ? c : Buffer.from(c)));
-    // Single error listener for the font stream; per-glyph errors are handled in writeGlyphStreamToFont.
-    let fontStreamReject;
-    const fontStreamErrorPromise = new Promise((_, rej) => {
-        fontStreamReject = rej;
-    });
-    fontStream.on('error', (err) => fontStreamReject(err));
-    for (const f of files) {
-        await Promise.race([
-            writeGlyphStreamToFont(fontStream, node_path_1.default.join(glyphDir, f), f),
-            fontStreamErrorPromise,
-        ]);
-    }
-    fontStream.end();
-    await (0, node_events_1.once)(fontStream, 'end');
-    const svgFontString = Buffer.concat(svgFontChunks).toString('utf8');
     const ttfRaw = (0, svg2ttf_1.default)(svgFontString);
     const rawBuf = Buffer.from(ttfRaw.buffer);
     const fixedBuf = (0, metrics_js_1.forceTtfMetrics)(rawBuf, upm, ascent, descent, lineGap);

package/lib/commonjs/src/core/pipeline/managers.js

@@ -56,14 +56,30 @@ class PyodideManager {
         const pathopsPy = await promises_1.default.readFile(pathopsPyPath, 'utf8');
         py.FS.writeFile('/pathops.py', pathopsPy);
         await py.loadPackage(['micropip', 'lxml'], { messageCallback: () => { } });
+        // Resolve local picosvg wheel path for offline-first installation.
+        const picosvgWhlDir = node_path_1.default.join(getPackageRoot(), 'src', 'core', 'shims');
+        const picosvgWhl = (await promises_1.default.readdir(picosvgWhlDir))
+            .find((f) => f.startsWith('picosvg-') && f.endsWith('.whl'));
+        const localWhlUrl = picosvgWhl
+            ? `file://${node_path_1.default.join(picosvgWhlDir, picosvgWhl)}`
+            : null;
+        py.globals.set('_picosvg_local_whl', localWhlUrl);
         await py.runPythonAsync(`
       import sys
       if "/" not in sys.path:
           sys.path.insert(0, "/")
-          
+
       import micropip
-      await micropip.install("picosvg", deps=False)
-          
+
+      _whl = _picosvg_local_whl
+      if _whl:
+          try:
+              await micropip.install(_whl, deps=False)
+          except Exception:
+              await micropip.install("picosvg", deps=False)
+      else:
+          await micropip.install("picosvg", deps=False)
+
       import pathops
       import picosvg
     `);