huspy-icons 0.1.1 → 0.1.3

package/README.md

@@ -1,157 +1,125 @@
 # huspy-icons
 
-A cross-platform icon package generated from raw SVGs. Ships separate builds for **web (React / Next.js)** and **native (Expo / React Native)** with a consistent API and first-class tree-shaking.
+A cross-platform icon package generated from raw SVGs. Ships separate builds for **web (React / Next.js)** with **SVG icons** and **native (Expo / React Native)** with **font-based icons** for optimal performance.
 
 ---
 
 ## ✨ Features
 
 * **Single source of truth**: raw SVGs → codegen → typed components
-* **Two targets**: `huspy-icons/react` (web) and `huspy-icons/native` (expo)
-* **Tree-shakable** per-icon files for optimal bundle size
-* **Theming ready**: `color="currentColor"` by default; size tokens
-* **A11y** for web (`title`, `aria-hidden`) and native (`accessibilityLabel`)
-* **Scales** to hundreds of icons with auto-generated exports and types
+* **Two rendering strategies**:
+  - **Web**: Inline SVG (tree-shakable, full styling control)
+  - **Native**: Font-based icons (better performance, smaller bundle)
+* **Unified API**: Same `<Icon name="..." />` syntax for both platforms
+* **TypeScript-first**: Auto-generated types with full autocomplete
+* **Theming ready**: `color` and `size` props on all icons
+* **A11y**: Proper accessibility labels for both platforms
+* **Scales**: Hundreds of icons with auto-generated exports
 
 ---
 
-## 📦 Install
+## 📦 Installation
 
-> Publish this package to your registry (npm/GitHub Packages) and install in each app.
-
-**Next.js (web):**
+**Next.js / React (Web):**
 
 ```bash
 npm install huspy-icons
 ```
 
-**Expo (native):**
+**Expo / React Native:**
 
 ```bash
-npx expo install react-native-svg
 npm install huspy-icons
 ```
 
-> `react` build has no extra peer deps. `native` build peers `react-native-svg`.
+> **Note**: Native build uses custom fonts - no need for `react-native-svg`!  
+> See [FONT_SETUP.md](./FONT_SETUP.md) for font installation instructions.
 
 ---
 
 ## 🚀 Quick Start
 
-**Web (React / Next.js)**
+### Web (React / Next.js)
 
 ```tsx
-import { ArrowLeft } from 'huspy-icons/react';
+import { Icon } from 'huspy-icons/react';
 
 export default function Example() {
   return (
-    <div style={{ color: '#111' }}>
-      <ArrowLeft size="md" />
+    <div>
+      <Icon name="arrow-left" size={24} color="#000" />
+      <Icon name="arrow-up-right" size={32} color="#6b7280" />
     </div>
   );
 }
 ```
 
-**Expo (React Native)**
-
-```tsx
-import { ArrowLeft } from 'huspy-icons/native';
-
-export default function Example() {
-  return <ArrowLeft size={20} color="#111" accessibilityLabel="Back" />;
-}
-```
-
----
+### Expo / React Native
 
-## 🗂️ Repo Structure (package)
+**1. First, set up the font** (one-time setup):
 
-```
-packages/huspy-icons/
-  icons-src/          # raw .svg files (single source of truth)
-  src/
-    react/            # generated TSX for web
-    native/           # generated TSX for expo
-    shared/           # helper types/utilities (createIcon, resolveSize)
-  scripts/            # codegen utilities (svgr, registry, typedefs)
-  svgo.config.js
-  package.json
-  tsconfig.json
-```
+See [FONT_SETUP.md](./FONT_SETUP.md) for detailed instructions.
 
----
+**2. Use the icons:**
 
-## ⚙️ Scripts
+```tsx
+import { Icon } from 'huspy-icons/native';
 
-```json
-{
-  "scripts": {
-    "svgo": "svgo -f icons-src -o icons-src --config=svgo.config.js",
-    "gen:react": "svgr icons-src -d src/react --ext tsx --typescript --icon",
-    "gen:native": "svgr --native icons-src -d src/native --ext tsx --typescript --icon",
-    "gen": "npm run svgo && npm run gen:react && npm run gen:native",
-    "build": "tsup src/**/index.ts --format esm,cjs --dts --out-dir dist --clean",
-    "prepare": "npm run gen && npm run build"
-  }
+export default function Example() {
+  return (
+    <>
+      <Icon name="arrow-left" size={24} color="#000" />
+      <Icon name="arrow-up-right" size={32} color="#6b7280" />
+    </>
+  );
 }
 ```
 
-* **`svgo`**: normalize SVGs (remove width/height, hardcoded colors).
-* **`gen:*`**: generate typed components for each target using SVGR.
-* **`build`**: bundle per-target outputs with types.
-
 ---
 
-## 🔁 Usage Patterns
+## 🎨 API
 
-### Named components (preferred)
+Both platforms use the same API:
 
 ```tsx
-import { ArrowLeft, ArrowUpRight } from 'huspy-icons/react';
-<ArrowLeft size="lg" />
-<ArrowUpRight size={20} color="#6b7280" />
+<Icon 
+  name="arrow-left"    // Icon name (TypeScript autocomplete available)
+  size={24}            // Size in pixels (default: 16)
+  color="#000"         // Any valid color (default: 'currentColor' for web, '#000' for native)
+/>
 ```
 
-* Best **tree-shaking**, great DX, no runtime lookup.
-
----
-
-## 🎨 Props & Theming
-
-All icons share a consistent API:
+### Available Icons
 
-* `size`: `number | 'xs' | 'sm' | 'md' | 'lg' | 'xl'` (defaults to `lg` ≈ 20)
-* `color`: any CSS color (web) or string color (native), defaults to `currentColor`
-* Web a11y: `title?`, `aria-hidden?` (decorative by default)
-* Native a11y: `accessibilityLabel?`
-
-> Because paths default to `currentColor`, icons inherit text color out of the box. Style a parent `color` (web) or pass `color` directly.
+TypeScript will autocomplete available icon names. Current icons:
+- `arrow-left`
+- `arrow-up-right`
+- `icon-slot`
 
 ---
 
-## ↔️ RTL & Logical Directions
-
-Icons are designed with logical naming. For RTL support:
+## 🏗️ Architecture
 
-```tsx
-// web
-<div dir="rtl">
-  <ArrowLeft />
-</div>
-
-// native
-<View style={{ transform: [{ scaleX: I18nManager.isRTL ? -1 : 1 }] }}>
-  <ArrowLeft />
-</View>
-```
+### Web (SVG-based)
+- Individual SVG components generated from source files
+- Tree-shakable - only icons you use are bundled
+- Full CSS styling support
+- Color inherits from parent by default (`currentColor`)
 
-You can also add a `rtlFlip` prop or generate RTL variants if your design system requires them.
+### Native (Font-based)
+- Custom font generated from SVG files
+- Single font file for all icons
+- Better performance than SVG rendering
+- Smaller bundle size for large icon sets
+- Uses React Native `Text` component
 
 ---
 
-## 🧩 Adding Icons
+## 🔧 Development
 
-1. Drop raw SVGs into `icons-src/` (use 24×24 viewBox if possible).
+### Adding New Icons
+
+1. Drop SVG files into `icons-src/` (24×24 viewBox recommended)
 
 2. Run codegen:
 
@@ -159,53 +127,139 @@ You can also add a `rtlFlip` prop or generate RTL variants if your design system
 npm run gen
 ```
 
-3. Commit, version, and publish:
+This will:
+- Optimize SVGs with SVGO
+- Generate React components (web)
+- Generate icon font + glyph map (native)
+- Generate TypeScript types
+
+3. Build the package:
 
 ```bash
-npm version minor
-npm publish --access public
+npm run build
 ```
 
-> Filenames become component names: `arrow-left.svg` → `ArrowLeft.tsx`.
+4. Publish:
 
+```bash
+npm version minor
+npm publish
+```
 
-## 🧰 Troubleshooting
-
-### Next.js
+### Project Structure
 
-* If using the **prebuilt** components (recommended), you **don't** need SVGR in the app.
-* Ensure the package exports are ESM/CJS as shipped by `tsup`. If you see "Cannot use import statement outside a module", align your Next.js transpilation or stick to ESM imports.
+```
+huspy-icons/
+├── icons-src/              # Source SVG files (single source of truth)
+├── src/
+│   ├── react/             # Generated web components (SVG)
+│   ├── native/            # Native Icon component (font-based)
+│   └── shared/            # Shared types and utilities
+├── dist/
+│   ├── fonts/             # Generated font files (TTF, WOFF, etc.)
+│   ├── react/             # Built web components
+│   └── native/            # Built native component
+├── scripts/
+│   ├── generate-font.js   # Font generation script (Fantasticon)
+│   ├── generate-types.js  # TypeScript type generation
+│   └── add-size-prop.js   # Post-processing for SVGR output
+└── package.json
+```
 
-### Expo
+### Available Scripts
 
-* Ensure `react-native-svg` is installed via `npx expo install react-native-svg`.
-* If tree-shaking seems off in web builds via Expo Router, prefer the `react` entry for web.
+```json
+{
+  "svgo": "Optimize SVG files",
+  "gen:react": "Generate React/SVG components",
+  "gen:native": "Generate icon font and glyph map",
+  "gen:types": "Generate TypeScript types",
+  "gen": "Run all generation scripts",
+  "build": "Build TypeScript to JavaScript",
+  "prepare": "Full build (runs on npm install)"
+}
+```
 
 ---
 
-## 📦 Exports
+## 📦 Package Exports
 
 ```json
 {
   "exports": {
-    "./react": "./dist/react/index.js",
-    "./native": "./dist/native/index.js"
+    "./react": {
+      "import": "./dist/react/index.mjs",
+      "require": "./dist/react/index.js",
+      "types": "./dist/react/index.d.ts"
+    },
+    "./native": {
+      "require": "./dist/native/index.js",
+      "types": "./dist/native/index.d.ts"
+    }
   }
 }
 ```
 
-* Web: `import { ArrowLeft, ArrowUpRight } from 'huspy-icons/react'`
-* Native: `import { ArrowLeft, ArrowUpRight } from 'huspy-icons/native'`
+Usage:
+```tsx
+// Web
+import { Icon } from 'huspy-icons/react';
+
+// Native
+import { Icon } from 'huspy-icons/native';
+```
 
 ---
 
 ## 🔒 Versioning
 
-* **Patch**: path tweaks, metadata fixes
-* **Minor**: new icons, non-breaking props
-* **Major**: removals/renames, breaking prop changes
+* **Patch**: Path tweaks, bug fixes, metadata changes
+* **Minor**: New icons, non-breaking API additions
+* **Major**: Icon removals/renames, breaking API changes
+
+---
+
+## 🐛 Troubleshooting
+
+### Native: Font Not Loading
+
+See [FONT_SETUP.md](./FONT_SETUP.md) for detailed setup instructions.
+
+Common issues:
+- Font file not copied to correct location
+- Font not registered in app config
+- App not restarted after adding font
 
-Use Changesets or Conventional Commits to automate changelog and release tags.
+### Web: Icons Not Showing
+
+- Ensure you're importing from `huspy-icons/react`
+- Check that the icon name is correct (TypeScript will help)
+- Verify the package is installed and built
+
+### TypeScript Errors
+
+If you see type errors after adding new icons:
+1. Run `npm run gen` to regenerate types
+2. Restart your TypeScript server
+3. Check that the built files in `dist/` are up to date
+
+---
+
+## 🎯 Why This Architecture?
+
+### Web uses SVG because:
+- ✅ Tree-shakable (only bundle icons you use)
+- ✅ Full CSS styling support
+- ✅ Can animate individual paths
+- ✅ No font loading required
+- ✅ Modern browsers handle SVG efficiently
+
+### Native uses Fonts because:
+- ✅ Better performance at scale
+- ✅ Smaller bundle size for large icon sets
+- ✅ Native text rendering (faster than SVG)
+- ✅ Single font file vs. many SVG components
+- ✅ Consistent with native icon patterns
 
 ---
 
@@ -215,9 +269,19 @@ MIT © Huspy
 
 ---
 
-## 💡 Notes
+## 💡 Best Practices
+
+* Keep `icons-src/` clean and consistent (same viewBox, stroke width)
+* Use descriptive, kebab-case filenames (`arrow-left.svg`, not `arrow.svg`)
+* Default to outline style; namespace filled variants if needed
+* Test icons on both platforms before publishing
+* Document any platform-specific differences
+* Consider publishing a Storybook for visual reference
+
+---
 
-* Keep `icons-src/` clean and consistent (same stroke width family, grid).
-* Default to outlines; if you ship `filled` variants, namespace as `HomeIcon` / `HomeFilledIcon` or `HomeIcon` with a `variant="filled"` prop (generated).
-* Consider publishing a Storybook or gallery page in your web app to preview all icons.
+## 🔗 Related Docs
 
+- [FONT_SETUP.md](./FONT_SETUP.md) - React Native font setup guide
+- [USAGE.md](./USAGE.md) - Detailed usage examples
+- [PROJECT_SUMMARY.md](./PROJECT_SUMMARY.md) - Technical architecture

package/dist/fonts/HuspyIcons.css

@@ -0,0 +1,28 @@
+@font-face {
+    font-family: "HuspyIcons";
+    src: url(".//HuspyIcons.ttf?25d92884ac0b766c69d414744c2ffbc2") format("truetype"),
+url(".//HuspyIcons.woff?25d92884ac0b766c69d414744c2ffbc2") format("woff"),
+url(".//HuspyIcons.woff2?25d92884ac0b766c69d414744c2ffbc2") format("woff2"),
+url(".//HuspyIcons.eot?25d92884ac0b766c69d414744c2ffbc2#iefix") format("embedded-opentype");
+}
+
+.icon:before {
+    font-family: HuspyIcons !important;
+    font-style: normal;
+    font-weight: normal !important;
+    font-variant: normal;
+    text-transform: none;
+    line-height: 1;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+}
+
+.icon.huspy-icon-icon-slot:before {
+    content: "\f101";
+}
+.icon.huspy-icon-arrow-up-right:before {
+    content: "\f102";
+}
+.icon.huspy-icon-arrow-left:before {
+    content: "\f103";
+}

package/dist/fonts/HuspyIcons.json

@@ -0,0 +1,5 @@
+{
+  "icon-slot": 61697,
+  "arrow-up-right": 61698,
+  "arrow-left": 61699
+}

package/dist/fonts/HuspyIcons.ts

@@ -0,0 +1,16 @@
+export type HuspyIconsId =
+  | "icon-slot"
+  | "arrow-up-right"
+  | "arrow-left";
+
+export enum HuspyIcons {
+  IconSlot = "icon-slot",
+  ArrowUpRight = "arrow-up-right",
+  ArrowLeft = "arrow-left",
+}
+
+export const HUSPY_ICONS_CODEPOINTS: { [key in HuspyIcons]: string } = {
+  [HuspyIcons.IconSlot]: "61697",
+  [HuspyIcons.ArrowUpRight]: "61698",
+  [HuspyIcons.ArrowLeft]: "61699",
+};

package/dist/native/index.d.ts

@@ -1,63 +1,47 @@
 import * as React from 'react';
+import { TextProps } from 'react-native';
 
-type IconSize = number | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 /**
- * Icon size presets
+ * Available icon names in the HuspyIcons font
  */
-declare const ICON_SIZES: {
-    readonly xs: 8;
-    readonly sm: 12;
-    readonly md: 16;
-    readonly lg: 20;
-    readonly xl: 24;
-};
+type IconName = 'icon-slot' | 'arrow-up-right' | 'arrow-left';
 /**
- * Icon size token type
+ * Mapping of icon names to unicode codepoints
+ * Used by the Icon component to render the correct glyph
  */
-type IconSizeToken = keyof typeof ICON_SIZES;
+declare const glyphMap: Record<IconName, number>;
 /**
- * Props for React Native icons
+ * Font family name for React Native
  */
-interface NativeIconProps {
-    size?: IconSize;
-    width?: number;
-    height?: number;
-    color?: string;
-    style?: any;
-}
-/**
- * Resolves an icon size to a numeric value
- * @param size - Size value or token
- * @returns Numeric size in pixels
- */
-declare function resolveSize(size?: IconSize): number;
-
-declare const SvgArrowLeft: ({ size, ...props }: NativeIconProps) => React.JSX.Element;
-
-declare const SvgArrowUpRight: ({ size, ...props }: NativeIconProps) => React.JSX.Element;
+declare const fontFamily = "HuspyIcons";
 
-declare const SvgIconSlot: ({ size, ...props }: NativeIconProps) => React.JSX.Element;
-
-/**
- * Icon imports - using dynamic imports for tree-shaking
- * Auto-generated - do not edit manually
- */
-/**
- * Available icon names
- */
-type IconName = 'arrow-left' | 'arrow-up-right' | 'icon-slot';
 /**
- * Props for the unified Icon component (React Native)
+ * Props for the Icon component (React Native)
  */
-interface IconProps extends Omit<NativeIconProps, 'size'> {
+interface IconProps extends Omit<TextProps, 'children'> {
+    /**
+     * Name of the icon to display
+     */
     name: IconName;
-    size?: NativeIconProps['size'];
+    /**
+     * Size of the icon (default: 16)
+     */
+    size?: number;
+    /**
+     * Color of the icon (default: inherits from parent or 'black')
+     */
     color?: string;
 }
 /**
- * Unified Icon component that renders icons by name (React Native)
- * Uses dynamic imports for tree-shaking support
+ * Icon component for React Native
+ *
+ * Renders icons using a custom font (HuspyIcons)
+ *
+ * @example
+ * ```tsx
+ * <Icon name="arrow-left" size={24} color="#000" />
+ * ```
  */
-declare const Icon: ({ name, size, color, ...props }: IconProps) => React.JSX.Element | null;
+declare const Icon: ({ name, size, color, style, ...props }: IconProps) => React.JSX.Element | null;
 
-export { SvgArrowLeft as ArrowLeft, SvgArrowUpRight as ArrowUpRight, ICON_SIZES, Icon, type IconName, type IconProps, type IconSize, type IconSizeToken, SvgIconSlot as IconSlot, type NativeIconProps, resolveSize };
+export { Icon, type IconName, type IconProps, fontFamily, glyphMap };

package/dist/native/index.js

@@ -5,9 +5,6 @@ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
 var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __esm = (fn, res) => function __init() {
-  return fn && (res = (0, fn[__getOwnPropNames(fn)[0]])(fn = 0)), res;
-};
 var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
@@ -30,189 +27,64 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 ));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
-// src/shared/types.ts
-function resolveSize(size = "lg") {
-  if (typeof size === "number") {
-    return size;
-  }
-  return ICON_SIZES[size] ?? ICON_SIZES.lg;
-}
-var ICON_SIZES;
-var init_types = __esm({
-  "src/shared/types.ts"() {
-    "use strict";
-    ICON_SIZES = {
-      xs: 8,
-      sm: 12,
-      md: 16,
-      lg: 20,
-      xl: 24
-    };
-  }
-});
-
-// src/native/ArrowLeft.tsx
-var ArrowLeft_exports = {};
-__export(ArrowLeft_exports, {
-  default: () => ArrowLeft_default
-});
-var React, import_react_native_svg, SvgArrowLeft, ArrowLeft_default;
-var init_ArrowLeft = __esm({
-  "src/native/ArrowLeft.tsx"() {
-    "use strict";
-    React = __toESM(require("react"));
-    import_react_native_svg = __toESM(require("react-native-svg"));
-    init_types();
-    SvgArrowLeft = ({ size = 16, ...props }) => {
-      const sizeValue = resolveSize(size);
-      return /* @__PURE__ */ React.createElement(import_react_native_svg.default, { width: sizeValue, height: sizeValue, viewBox: "0 0 24 24", fill: "none", ...props }, /* @__PURE__ */ React.createElement(
-        import_react_native_svg.Path,
-        {
-          fillRule: "evenodd",
-          clipRule: "evenodd",
-          d: "M12.7071 4.29289C13.0976 4.68342 13.0976 5.31658 12.7071 5.70711L6.41421 12L12.7071 18.2929C13.0976 18.6834 13.0976 19.3166 12.7071 19.7071C12.3166 20.0976 11.6834 20.0976 11.2929 19.7071L4.29289 12.7071C3.90237 12.3166 3.90237 11.6834 4.29289 11.2929L11.2929 4.29289C11.6834 3.90237 12.3166 3.90237 12.7071 4.29289Z",
-          fill: "currentColor"
-        }
-      ), /* @__PURE__ */ React.createElement(
-        import_react_native_svg.Path,
-        {
-          fillRule: "evenodd",
-          clipRule: "evenodd",
-          d: "M4 12C4 11.4477 4.44772 11 5 11H19C19.5523 11 20 11.4477 20 12C20 12.5523 19.5523 13 19 13H5C4.44772 13 4 12.5523 4 12Z",
-          fill: "currentColor"
-        }
-      ));
-    };
-    ArrowLeft_default = SvgArrowLeft;
-  }
-});
-
-// src/native/ArrowUpRight.tsx
-var ArrowUpRight_exports = {};
-__export(ArrowUpRight_exports, {
-  default: () => ArrowUpRight_default
-});
-var React2, import_react_native_svg2, SvgArrowUpRight, ArrowUpRight_default;
-var init_ArrowUpRight = __esm({
-  "src/native/ArrowUpRight.tsx"() {
-    "use strict";
-    React2 = __toESM(require("react"));
-    import_react_native_svg2 = __toESM(require("react-native-svg"));
-    init_types();
-    SvgArrowUpRight = ({ size = 16, ...props }) => {
-      const sizeValue = resolveSize(size);
-      return /* @__PURE__ */ React2.createElement(import_react_native_svg2.default, { width: sizeValue, height: sizeValue, viewBox: "0 0 24 24", fill: "none", ...props }, /* @__PURE__ */ React2.createElement(
-        import_react_native_svg2.Path,
-        {
-          fillRule: "evenodd",
-          clipRule: "evenodd",
-          d: "M6 7C6 6.44772 6.44772 6 7 6H17C17.5523 6 18 6.44772 18 7V17C18 17.5523 17.5523 18 17 18C16.4477 18 16 17.5523 16 17V8H7C6.44772 8 6 7.55228 6 7Z",
-          fill: "currentColor"
-        }
-      ), /* @__PURE__ */ React2.createElement(
-        import_react_native_svg2.Path,
-        {
-          fillRule: "evenodd",
-          clipRule: "evenodd",
-          d: "M17.7071 6.29289C18.0976 6.68342 18.0976 7.31658 17.7071 7.70711L7.70711 17.7071C7.31658 18.0976 6.68342 18.0976 6.29289 17.7071C5.90237 17.3166 5.90237 16.6834 6.29289 16.2929L16.2929 6.29289C16.6834 5.90237 17.3166 5.90237 17.7071 6.29289Z",
-          fill: "currentColor"
-        }
-      ));
-    };
-    ArrowUpRight_default = SvgArrowUpRight;
-  }
-});
-
-// src/native/IconSlot.tsx
-var IconSlot_exports = {};
-__export(IconSlot_exports, {
-  default: () => IconSlot_default
-});
-var React3, import_react_native_svg3, SvgIconSlot, IconSlot_default;
-var init_IconSlot = __esm({
-  "src/native/IconSlot.tsx"() {
-    "use strict";
-    React3 = __toESM(require("react"));
-    import_react_native_svg3 = __toESM(require("react-native-svg"));
-    init_types();
-    SvgIconSlot = ({ size = 16, ...props }) => {
-      const sizeValue = resolveSize(size);
-      return /* @__PURE__ */ React3.createElement(import_react_native_svg3.default, { width: sizeValue, height: sizeValue, viewBox: "0 0 15 15", fill: "none", ...props }, /* @__PURE__ */ React3.createElement(
-        import_react_native_svg3.Path,
-        {
-          d: "M13.3333 7.33333C13.3333 4.01962 10.647 1.33333 7.33333 1.33333C4.01962 1.33333 1.33333 4.01962 1.33333 7.33333C1.33333 10.647 4.01962 13.3333 7.33333 13.3333C10.647 13.3333 13.3333 10.647 13.3333 7.33333ZM14.6667 7.33333C14.6667 11.3834 11.3834 14.6667 7.33333 14.6667C3.28325 14.6667 0 11.3834 0 7.33333C0 3.28325 3.28325 0 7.33333 0C11.3834 0 14.6667 3.28325 14.6667 7.33333Z",
-          fill: "currentColor"
-        }
-      ));
-    };
-    IconSlot_default = SvgIconSlot;
-  }
-});
-
 // src/native/index.ts
 var native_exports = {};
 __export(native_exports, {
-  ArrowLeft: () => ArrowLeft_default,
-  ArrowUpRight: () => ArrowUpRight_default,
-  ICON_SIZES: () => ICON_SIZES,
   Icon: () => Icon_default,
-  IconSlot: () => IconSlot_default,
-  resolveSize: () => resolveSize
+  fontFamily: () => fontFamily,
+  glyphMap: () => glyphMap
 });
 module.exports = __toCommonJS(native_exports);
-init_ArrowLeft();
-init_ArrowUpRight();
-init_IconSlot();
 
 // src/native/Icon.tsx
-var React4 = __toESM(require("react"));
-function loadIcon(name) {
-  switch (name) {
-    case "arrow-left":
-      return Promise.resolve().then(() => (init_ArrowLeft(), ArrowLeft_exports)).then((m) => m.default);
-    case "arrow-up-right":
-      return Promise.resolve().then(() => (init_ArrowUpRight(), ArrowUpRight_exports)).then((m) => m.default);
-    case "icon-slot":
-      return Promise.resolve().then(() => (init_IconSlot(), IconSlot_exports)).then((m) => m.default);
-    default:
-      return Promise.reject(new Error(`Icon "${name}" not found`));
-  }
-}
-var Icon = ({ name, size = 16, color, ...props }) => {
-  const [IconComponent, setIconComponent] = React4.useState(null);
-  const [loading, setLoading] = React4.useState(true);
-  const [error, setError] = React4.useState(null);
-  React4.useEffect(() => {
-    setLoading(true);
-    setError(null);
-    loadIcon(name).then((Component) => {
-      setIconComponent(() => Component);
-      setLoading(false);
-    }).catch((err) => {
-      console.warn(err.message);
-      setError(err.message);
-      setLoading(false);
-    });
-  }, [name]);
-  if (loading) {
-    return null;
-  }
-  if (error || !IconComponent) {
+var React = __toESM(require("react"));
+var import_react_native = require("react-native");
+
+// src/native/glyphMap.ts
+var glyphMap = {
+  "icon-slot": 61697,
+  "arrow-up-right": 61698,
+  "arrow-left": 61699
+};
+var fontFamily = "HuspyIcons";
+
+// src/native/Icon.tsx
+var Icon = ({ name, size = 16, color = "#000", style, ...props }) => {
+  const codepoint = glyphMap[name];
+  if (!codepoint) {
+    if (__DEV__) {
+      console.warn(`Icon "${name}" not found in HuspyIcons font`);
+    }
     return null;
   }
-  return /* @__PURE__ */ React4.createElement(IconComponent, { size, color, ...props });
+  const glyph = String.fromCharCode(codepoint);
+  return /* @__PURE__ */ React.createElement(
+    import_react_native.Text,
+    {
+      ...props,
+      style: [
+        {
+          fontFamily,
+          fontSize: size,
+          color,
+          // Ensure icon doesn't inherit text styles
+          fontWeight: "normal",
+          fontStyle: "normal"
+        },
+        style
+      ],
+      accessible: true,
+      accessibilityLabel: props.accessibilityLabel || name,
+      accessibilityRole: "image"
+    },
+    glyph
+  );
 };
 var Icon_default = Icon;
-
-// src/native/index.ts
-init_types();
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  ArrowLeft,
-  ArrowUpRight,
-  ICON_SIZES,
   Icon,
-  IconSlot,
-  resolveSize
+  fontFamily,
+  glyphMap
 });
 //# sourceMappingURL=index.js.map

package/dist/native/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/shared/types.ts","../../src/native/ArrowLeft.tsx","../../src/native/ArrowUpRight.tsx","../../src/native/IconSlot.tsx","../../src/native/index.ts","../../src/native/Icon.tsx"],"sourcesContent":["export type IconSize = number | 'xs' | 'sm' | 'md' | 'lg' | 'xl';\n\n/**\n * Icon size presets\n */\nexport const ICON_SIZES = {\n  xs: 8,\n  sm: 12,\n  md: 16,\n  lg: 20,\n  xl: 24,\n} as const;\n\n/**\n * Icon size token type\n */\nexport type IconSizeToken = keyof typeof ICON_SIZES;\n\n/**\n * Props for React (web) icons\n */\nexport interface ReactIconProps extends React.SVGProps<SVGSVGElement> {\n  size?: IconSize;\n}\n\n/**\n * Props for React Native icons\n */\nexport interface NativeIconProps {\n  size?: IconSize;\n  width?: number;\n  height?: number;\n  color?: string;\n  style?: any;\n}\n\n/**\n * Resolves an icon size to a numeric value\n * @param size - Size value or token\n * @returns Numeric size in pixels\n */\nexport function resolveSize(size: IconSize = 'lg'): number {\n  if (typeof size === 'number') {\n    return size;\n  }\n  \n  return ICON_SIZES[size] ?? ICON_SIZES.lg;\n}\n","import * as React from 'react';\nimport Svg, { Path } from 'react-native-svg';\nimport type { NativeIconProps } from '../shared/types';\nimport { resolveSize } from '../shared/types';\n\nconst SvgArrowLeft = ({ size = 16, ...props }: NativeIconProps) => {\n  const sizeValue = resolveSize(size);\n  \n  return (\n    <Svg width={sizeValue} height={sizeValue} viewBox=\"0 0 24 24\" fill=\"none\" {...props}>\n    <Path\n      fillRule=\"evenodd\"\n      clipRule=\"evenodd\"\n      d=\"M12.7071 4.29289C13.0976 4.68342 13.0976 5.31658 12.7071 5.70711L6.41421 12L12.7071 18.2929C13.0976 18.6834 13.0976 19.3166 12.7071 19.7071C12.3166 20.0976 11.6834 20.0976 11.2929 19.7071L4.29289 12.7071C3.90237 12.3166 3.90237 11.6834 4.29289 11.2929L11.2929 4.29289C11.6834 3.90237 12.3166 3.90237 12.7071 4.29289Z\"\n      fill=\"currentColor\"\n    />\n    <Path\n      fillRule=\"evenodd\"\n      clipRule=\"evenodd\"\n      d=\"M4 12C4 11.4477 4.44772 11 5 11H19C19.5523 11 20 11.4477 20 12C20 12.5523 19.5523 13 19 13H5C4.44772 13 4 12.5523 4 12Z\"\n      fill=\"currentColor\"\n    />\n  </Svg>\n  );\n};\n\nexport default SvgArrowLeft;\n","import * as React from 'react';\nimport Svg, { Path } from 'react-native-svg';\nimport type { NativeIconProps } from '../shared/types';\nimport { resolveSize } from '../shared/types';\n\nconst SvgArrowUpRight = ({ size = 16, ...props }: NativeIconProps) => {\n  const sizeValue = resolveSize(size);\n  \n  return (\n    <Svg width={sizeValue} height={sizeValue} viewBox=\"0 0 24 24\" fill=\"none\" {...props}>\n    <Path\n      fillRule=\"evenodd\"\n      clipRule=\"evenodd\"\n      d=\"M6 7C6 6.44772 6.44772 6 7 6H17C17.5523 6 18 6.44772 18 7V17C18 17.5523 17.5523 18 17 18C16.4477 18 16 17.5523 16 17V8H7C6.44772 8 6 7.55228 6 7Z\"\n      fill=\"currentColor\"\n    />\n    <Path\n      fillRule=\"evenodd\"\n      clipRule=\"evenodd\"\n      d=\"M17.7071 6.29289C18.0976 6.68342 18.0976 7.31658 17.7071 7.70711L7.70711 17.7071C7.31658 18.0976 6.68342 18.0976 6.29289 17.7071C5.90237 17.3166 5.90237 16.6834 6.29289 16.2929L16.2929 6.29289C16.6834 5.90237 17.3166 5.90237 17.7071 6.29289Z\"\n      fill=\"currentColor\"\n    />\n  </Svg>\n  );\n};\n\nexport default SvgArrowUpRight;\n","import * as React from 'react';\nimport Svg, { Path } from 'react-native-svg';\nimport type { NativeIconProps } from '../shared/types';\nimport { resolveSize } from '../shared/types';\n\nconst SvgIconSlot = ({ size = 16, ...props }: NativeIconProps) => {\n  const sizeValue = resolveSize(size);\n  \n  return (\n    <Svg width={sizeValue} height={sizeValue} viewBox=\"0 0 15 15\" fill=\"none\" {...props}>\n    <Path\n      d=\"M13.3333 7.33333C13.3333 4.01962 10.647 1.33333 7.33333 1.33333C4.01962 1.33333 1.33333 4.01962 1.33333 7.33333C1.33333 10.647 4.01962 13.3333 7.33333 13.3333C10.647 13.3333 13.3333 10.647 13.3333 7.33333ZM14.6667 7.33333C14.6667 11.3834 11.3834 14.6667 7.33333 14.6667C3.28325 14.6667 0 11.3834 0 7.33333C0 3.28325 3.28325 0 7.33333 0C11.3834 0 14.6667 3.28325 14.6667 7.33333Z\"\n      fill=\"currentColor\"\n    />\n  </Svg>\n  );\n};\n\nexport default SvgIconSlot;\n","// Auto-generated exports\nexport { default as ArrowLeft } from './ArrowLeft';\nexport { default as ArrowUpRight } from './ArrowUpRight';\nexport { default as IconSlot } from './IconSlot';\n\n// Unified Icon component\nexport { default as Icon } from './Icon';\nexport type { IconName, IconProps } from './Icon';\n\n// Export types\nexport type {\n  IconSize,\n  IconSizeToken,\n  NativeIconProps,\n} from '../shared/types';\n\nexport { ICON_SIZES, resolveSize } from '../shared/types';\n","import * as React from 'react';\nimport type { NativeIconProps } from '../shared/types';\n\n/**\n * Icon imports - using dynamic imports for tree-shaking\n * Auto-generated - do not edit manually\n */\n// Icon: arrow-left\n// Icon: arrow-up-right\n// Icon: icon-slot\n\n/**\n * Available icon names\n */\nexport type IconName = 'arrow-left' | 'arrow-up-right' | 'icon-slot';\n\n/**\n * Props for the unified Icon component (React Native)\n */\nexport interface IconProps extends Omit<NativeIconProps, 'size'> {\n  name: IconName;\n  size?: NativeIconProps['size'];\n  color?: string;\n}\n\n/**\n * Loads an icon component dynamically\n * This pattern allows bundlers to tree-shake unused icons\n * Note: React Native bundlers may handle this differently\n */\nfunction loadIcon(name: IconName): Promise<React.ComponentType<any>> {\n  switch (name) {\n    case 'arrow-left':\n      return import('./ArrowLeft').then(m => m.default);\n    case 'arrow-up-right':\n      return import('./ArrowUpRight').then(m => m.default);\n    case 'icon-slot':\n      return import('./IconSlot').then(m => m.default);\n    default:\n      return Promise.reject(new Error(`Icon \"${name}\" not found`));\n  }\n}\n\n/**\n * Unified Icon component that renders icons by name (React Native)\n * Uses dynamic imports for tree-shaking support\n */\nconst Icon = ({ name, size = 16, color, ...props }: IconProps) => {\n  const [IconComponent, setIconComponent] = React.useState<React.ComponentType<any> | null>(null);\n  const [loading, setLoading] = React.useState(true);\n  const [error, setError] = React.useState<string | null>(null);\n\n  React.useEffect(() => {\n    setLoading(true);\n    setError(null);\n    \n    loadIcon(name)\n      .then((Component) => {\n        setIconComponent(() => Component);\n        setLoading(false);\n      })\n      .catch((err) => {\n        console.warn(err.message);\n        setError(err.message);\n        setLoading(false);\n      });\n  }, [name]);\n\n  if (loading) {\n    return null;\n  }\n\n  if (error || !IconComponent) {\n    return null;\n  }\n\n  return <IconComponent size={size} color={color} {...props} />;\n};\n\nexport default Icon;"],"mappings":"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","names":["Svg","React","import_react_native_svg","Svg","React","import_react_native_svg","Svg","React"]}
+{"version":3,"sources":["../../src/native/index.ts","../../src/native/Icon.tsx","../../src/native/glyphMap.ts"],"sourcesContent":["/**\n * Huspy Icons - React Native (Font-based)\n * \n * This package provides icon components for React Native using a custom font.\n * \n * @example\n * ```tsx\n * import { Icon } from 'huspy-icons/native';\n * \n * function MyComponent() {\n *   return <Icon name=\"arrow-left\" size={24} color=\"#000\" />;\n * }\n * ```\n */\n\nexport { default as Icon } from './Icon';\nexport type { IconProps, IconName } from './Icon';\nexport { glyphMap, fontFamily } from './glyphMap';\n\n","import * as React from 'react';\nimport { Text, TextProps, Platform } from 'react-native';\nimport { glyphMap, fontFamily, IconName } from './glyphMap';\n\n/**\n * Props for the Icon component (React Native)\n */\nexport interface IconProps extends Omit<TextProps, 'children'> {\n  /**\n   * Name of the icon to display\n   */\n  name: IconName;\n  \n  /**\n   * Size of the icon (default: 16)\n   */\n  size?: number;\n  \n  /**\n   * Color of the icon (default: inherits from parent or 'black')\n   */\n  color?: string;\n}\n\n/**\n * Icon component for React Native\n * \n * Renders icons using a custom font (HuspyIcons)\n * \n * @example\n * ```tsx\n * <Icon name=\"arrow-left\" size={24} color=\"#000\" />\n * ```\n */\nconst Icon = ({ name, size = 16, color = '#000', style, ...props }: IconProps) => {\n  const codepoint = glyphMap[name];\n  \n  if (!codepoint) {\n    if (__DEV__) {\n      console.warn(`Icon \"${name}\" not found in HuspyIcons font`);\n    }\n    return null;\n  }\n  \n  // Convert codepoint to character\n  const glyph = String.fromCharCode(codepoint);\n  \n  return (\n    <Text\n      {...props}\n      style={[\n        {\n          fontFamily: fontFamily,\n          fontSize: size,\n          color: color,\n          // Ensure icon doesn't inherit text styles\n          fontWeight: 'normal',\n          fontStyle: 'normal',\n        },\n        style,\n      ]}\n      // Accessibility\n      accessible\n      accessibilityLabel={props.accessibilityLabel || name}\n      accessibilityRole=\"image\"\n    >\n      {glyph}\n    </Text>\n  );\n};\n\nexport default Icon;\nexport type { IconName };\n\n","// Auto-generated by generate-font.js - do not edit manually\n// Source: icons-src/*.svg → dist/fonts/HuspyIcons.*\n\n/**\n * Available icon names in the HuspyIcons font\n */\nexport type IconName = 'icon-slot' | 'arrow-up-right' | 'arrow-left';\n\n/**\n * Mapping of icon names to unicode codepoints\n * Used by the Icon component to render the correct glyph\n */\nexport const glyphMap: Record<IconName, number> = {\n  \"icon-slot\": 61697,\n  \"arrow-up-right\": 61698,\n  \"arrow-left\": 61699\n};\n\n/**\n * Font family name for React Native\n */\nexport const fontFamily = 'HuspyIcons';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,YAAuB;AACvB,0BAA0C;;;ACWnC,IAAM,WAAqC;AAAA,EAChD,aAAa;AAAA,EACb,kBAAkB;AAAA,EAClB,cAAc;AAChB;AAKO,IAAM,aAAa;;;ADa1B,IAAM,OAAO,CAAC,EAAE,MAAM,OAAO,IAAI,QAAQ,QAAQ,OAAO,GAAG,MAAM,MAAiB;AAChF,QAAM,YAAY,SAAS,IAAI;AAE/B,MAAI,CAAC,WAAW;AACd,QAAI,SAAS;AACX,cAAQ,KAAK,SAAS,IAAI,gCAAgC;AAAA,IAC5D;AACA,WAAO;AAAA,EACT;AAGA,QAAM,QAAQ,OAAO,aAAa,SAAS;AAE3C,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,OAAO;AAAA,QACL;AAAA,UACE;AAAA,UACA,UAAU;AAAA,UACV;AAAA;AAAA,UAEA,YAAY;AAAA,UACZ,WAAW;AAAA,QACb;AAAA,QACA;AAAA,MACF;AAAA,MAEA,YAAU;AAAA,MACV,oBAAoB,MAAM,sBAAsB;AAAA,MAChD,mBAAkB;AAAA;AAAA,IAEjB;AAAA,EACH;AAEJ;AAEA,IAAO,eAAQ;","names":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "huspy-icons",
-  "version": "0.1.1",
+  "version": "0.1.3",
   "description": "Cross-platform icon package for Huspy - React and React Native compatible",
   "author": "Huspy",
   "license": "MIT",
@@ -32,12 +32,14 @@
   },
   "files": [
     "dist",
-    "src"
+    "src",
+    "README.md",
+    "LICENSE"
   ],
   "scripts": {
     "svgo": "svgo -f icons-src -o icons-src --config=svgo.config.js",
     "gen:react": "svgr icons-src -d src/react --ext tsx --typescript --icon && node scripts/add-size-prop.js --react",
-    "gen:native": "svgr --native icons-src -d src/native --ext tsx --typescript --icon && node scripts/add-size-prop.js --native",
+    "gen:native": "node scripts/generate-font.js",
     "gen:types": "node scripts/generate-types.js",
     "gen": "npm run svgo && npm run gen:react && npm run gen:native && npm run gen:types",
     "build": "tsup",
@@ -51,21 +53,18 @@
     "@types/react": "^18.2.48",
     "@types/react-native": "^0.73.0",
     "esbuild": "^0.19.11",
+    "fantasticon": "^3.0.0",
     "svgo": "^3.3.2",
     "tsup": "^8.0.1",
     "typescript": "^5.3.3"
   },
   "peerDependencies": {
     "react": ">=16.8.0",
-    "react-native": ">=0.73.0",
-    "react-native-svg": "^15.14.0"
+    "react-native": ">=0.73.0"
   },
   "peerDependenciesMeta": {
     "react-native": {
       "optional": true
-    },
-    "react-native-svg": {
-      "optional": true
     }
   },
   "publishConfig": {

package/src/native/Icon.tsx

@@ -1,80 +1,74 @@
 import * as React from 'react';
-import type { NativeIconProps } from '../shared/types';
+import { Text, TextProps, Platform } from 'react-native';
+import { glyphMap, fontFamily, IconName } from './glyphMap';
 
 /**
- * Icon imports - using dynamic imports for tree-shaking
- * Auto-generated - do not edit manually
+ * Props for the Icon component (React Native)
  */
-// Icon: arrow-left
-// Icon: arrow-up-right
-// Icon: icon-slot
-
-/**
- * Available icon names
- */
-export type IconName = 'arrow-left' | 'arrow-up-right' | 'icon-slot';
-
-/**
- * Props for the unified Icon component (React Native)
- */
-export interface IconProps extends Omit<NativeIconProps, 'size'> {
+export interface IconProps extends Omit<TextProps, 'children'> {
+  /**
+   * Name of the icon to display
+   */
   name: IconName;
-  size?: NativeIconProps['size'];
+  
+  /**
+   * Size of the icon (default: 16)
+   */
+  size?: number;
+  
+  /**
+   * Color of the icon (default: inherits from parent or 'black')
+   */
   color?: string;
 }
 
 /**
- * Loads an icon component dynamically
- * This pattern allows bundlers to tree-shake unused icons
- * Note: React Native bundlers may handle this differently
- */
-function loadIcon(name: IconName): Promise<React.ComponentType<any>> {
-  switch (name) {
-    case 'arrow-left':
-      return import('./ArrowLeft').then(m => m.default);
-    case 'arrow-up-right':
-      return import('./ArrowUpRight').then(m => m.default);
-    case 'icon-slot':
-      return import('./IconSlot').then(m => m.default);
-    default:
-      return Promise.reject(new Error(`Icon "${name}" not found`));
-  }
-}
-
-/**
- * Unified Icon component that renders icons by name (React Native)
- * Uses dynamic imports for tree-shaking support
+ * Icon component for React Native
+ * 
+ * Renders icons using a custom font (HuspyIcons)
+ * 
+ * @example
+ * ```tsx
+ * <Icon name="arrow-left" size={24} color="#000" />
+ * ```
  */
-const Icon = ({ name, size = 16, color, ...props }: IconProps) => {
-  const [IconComponent, setIconComponent] = React.useState<React.ComponentType<any> | null>(null);
-  const [loading, setLoading] = React.useState(true);
-  const [error, setError] = React.useState<string | null>(null);
-
-  React.useEffect(() => {
-    setLoading(true);
-    setError(null);
-    
-    loadIcon(name)
-      .then((Component) => {
-        setIconComponent(() => Component);
-        setLoading(false);
-      })
-      .catch((err) => {
-        console.warn(err.message);
-        setError(err.message);
-        setLoading(false);
-      });
-  }, [name]);
-
-  if (loading) {
+const Icon = ({ name, size = 16, color = '#000', style, ...props }: IconProps) => {
+  const codepoint = glyphMap[name];
+  
+  if (!codepoint) {
+    if (__DEV__) {
+      console.warn(`Icon "${name}" not found in HuspyIcons font`);
+    }
     return null;
   }
-
-  if (error || !IconComponent) {
-    return null;
-  }
-
-  return <IconComponent size={size} color={color} {...props} />;
+  
+  // Convert codepoint to character
+  const glyph = String.fromCharCode(codepoint);
+  
+  return (
+    <Text
+      {...props}
+      style={[
+        {
+          fontFamily: fontFamily,
+          fontSize: size,
+          color: color,
+          // Ensure icon doesn't inherit text styles
+          fontWeight: 'normal',
+          fontStyle: 'normal',
+        },
+        style,
+      ]}
+      // Accessibility
+      accessible
+      accessibilityLabel={props.accessibilityLabel || name}
+      accessibilityRole="image"
+    >
+      {glyph}
+    </Text>
+  );
 };
 
-export default Icon;
+export default Icon;
+export type { IconName };
+

package/src/native/glyphMap.ts

@@ -0,0 +1,22 @@
+// Auto-generated by generate-font.js - do not edit manually
+// Source: icons-src/*.svg → dist/fonts/HuspyIcons.*
+
+/**
+ * Available icon names in the HuspyIcons font
+ */
+export type IconName = 'icon-slot' | 'arrow-up-right' | 'arrow-left';
+
+/**
+ * Mapping of icon names to unicode codepoints
+ * Used by the Icon component to render the correct glyph
+ */
+export const glyphMap: Record<IconName, number> = {
+  "icon-slot": 61697,
+  "arrow-up-right": 61698,
+  "arrow-left": 61699
+};
+
+/**
+ * Font family name for React Native
+ */
+export const fontFamily = 'HuspyIcons';

package/src/native/index.ts

@@ -1,17 +1,19 @@
-// Auto-generated exports
-export { default as ArrowLeft } from './ArrowLeft';
-export { default as ArrowUpRight } from './ArrowUpRight';
-export { default as IconSlot } from './IconSlot';
+/**
+ * Huspy Icons - React Native (Font-based)
+ * 
+ * This package provides icon components for React Native using a custom font.
+ * 
+ * @example
+ * ```tsx
+ * import { Icon } from 'huspy-icons/native';
+ * 
+ * function MyComponent() {
+ *   return <Icon name="arrow-left" size={24} color="#000" />;
+ * }
+ * ```
+ */
 
-// Unified Icon component
 export { default as Icon } from './Icon';
-export type { IconName, IconProps } from './Icon';
+export type { IconProps, IconName } from './Icon';
+export { glyphMap, fontFamily } from './glyphMap';
 
-// Export types
-export type {
-  IconSize,
-  IconSizeToken,
-  NativeIconProps,
-} from '../shared/types';
-
-export { ICON_SIZES, resolveSize } from '../shared/types';

package/src/native/ArrowLeft.tsx

@@ -1,27 +0,0 @@
-import * as React from 'react';
-import Svg, { Path } from 'react-native-svg';
-import type { NativeIconProps } from '../shared/types';
-import { resolveSize } from '../shared/types';
-
-const SvgArrowLeft = ({ size = 16, ...props }: NativeIconProps) => {
-  const sizeValue = resolveSize(size);
-  
-  return (
-    <Svg width={sizeValue} height={sizeValue} viewBox="0 0 24 24" fill="none" {...props}>
-    <Path
-      fillRule="evenodd"
-      clipRule="evenodd"
-      d="M12.7071 4.29289C13.0976 4.68342 13.0976 5.31658 12.7071 5.70711L6.41421 12L12.7071 18.2929C13.0976 18.6834 13.0976 19.3166 12.7071 19.7071C12.3166 20.0976 11.6834 20.0976 11.2929 19.7071L4.29289 12.7071C3.90237 12.3166 3.90237 11.6834 4.29289 11.2929L11.2929 4.29289C11.6834 3.90237 12.3166 3.90237 12.7071 4.29289Z"
-      fill="currentColor"
-    />
-    <Path
-      fillRule="evenodd"
-      clipRule="evenodd"
-      d="M4 12C4 11.4477 4.44772 11 5 11H19C19.5523 11 20 11.4477 20 12C20 12.5523 19.5523 13 19 13H5C4.44772 13 4 12.5523 4 12Z"
-      fill="currentColor"
-    />
-  </Svg>
-  );
-};
-
-export default SvgArrowLeft;

package/src/native/ArrowUpRight.tsx

@@ -1,27 +0,0 @@
-import * as React from 'react';
-import Svg, { Path } from 'react-native-svg';
-import type { NativeIconProps } from '../shared/types';
-import { resolveSize } from '../shared/types';
-
-const SvgArrowUpRight = ({ size = 16, ...props }: NativeIconProps) => {
-  const sizeValue = resolveSize(size);
-  
-  return (
-    <Svg width={sizeValue} height={sizeValue} viewBox="0 0 24 24" fill="none" {...props}>
-    <Path
-      fillRule="evenodd"
-      clipRule="evenodd"
-      d="M6 7C6 6.44772 6.44772 6 7 6H17C17.5523 6 18 6.44772 18 7V17C18 17.5523 17.5523 18 17 18C16.4477 18 16 17.5523 16 17V8H7C6.44772 8 6 7.55228 6 7Z"
-      fill="currentColor"
-    />
-    <Path
-      fillRule="evenodd"
-      clipRule="evenodd"
-      d="M17.7071 6.29289C18.0976 6.68342 18.0976 7.31658 17.7071 7.70711L7.70711 17.7071C7.31658 18.0976 6.68342 18.0976 6.29289 17.7071C5.90237 17.3166 5.90237 16.6834 6.29289 16.2929L16.2929 6.29289C16.6834 5.90237 17.3166 5.90237 17.7071 6.29289Z"
-      fill="currentColor"
-    />
-  </Svg>
-  );
-};
-
-export default SvgArrowUpRight;

package/src/native/IconSlot.tsx

@@ -1,19 +0,0 @@
-import * as React from 'react';
-import Svg, { Path } from 'react-native-svg';
-import type { NativeIconProps } from '../shared/types';
-import { resolveSize } from '../shared/types';
-
-const SvgIconSlot = ({ size = 16, ...props }: NativeIconProps) => {
-  const sizeValue = resolveSize(size);
-  
-  return (
-    <Svg width={sizeValue} height={sizeValue} viewBox="0 0 15 15" fill="none" {...props}>
-    <Path
-      d="M13.3333 7.33333C13.3333 4.01962 10.647 1.33333 7.33333 1.33333C4.01962 1.33333 1.33333 4.01962 1.33333 7.33333C1.33333 10.647 4.01962 13.3333 7.33333 13.3333C10.647 13.3333 13.3333 10.647 13.3333 7.33333ZM14.6667 7.33333C14.6667 11.3834 11.3834 14.6667 7.33333 14.6667C3.28325 14.6667 0 11.3834 0 7.33333C0 3.28325 3.28325 0 7.33333 0C11.3834 0 14.6667 3.28325 14.6667 7.33333Z"
-      fill="currentColor"
-    />
-  </Svg>
-  );
-};
-
-export default SvgIconSlot;

package/src/native/index.tsx

@@ -1,3 +0,0 @@
-export { default as ArrowLeft } from './ArrowLeft';
-export { default as ArrowUpRight } from './ArrowUpRight';
-export { default as IconSlot } from './IconSlot';