iconvault-native 🎨

A lightweight, zero-dependency SVG icon library for React Native that automatically converts your SVG files into ready-to-use React components. Works seamlessly across iOS, Android, and Web.

🔍 To search and download icons, visit: IconVault Website

✨ Features

• 🔷 TypeScript Ready — Full autocomplete support for all your icons
• 📦 Zero Extra Dependencies — Only requires react-native-svg as peer
• 🚀 Simple API - Just <IconVault name="home" /> and you're done
• 🎯 Tree Shakeable - Only load icons you actually use
• 🖌️ Customizable - Change size, color, stroke on the fly
• 📱 Cross-Platform - Works on iOS, Android, and Web

🌐 Platform Compatibility

| Platform | Minimum Version | |----------|----------------| | ✅ iOS | React Native 0.70+ | | ✅ Android | React Native 0.70+ | | ✅ Web | React Web 0.18+ | | ✅ Expo | SDK 48+ |

📦 Installation

React Native

npm install iconvault-native react-native-svg
# or
yarn add iconvault-native react-native-svg
# or
pnpm add iconvault-native react-native-svg

React Web

npm install iconvault-native
# or
yarn add iconvault-native
# or
pnpm add iconvault-native

🖼️ Live Icon Preview & Browser

The website includes:

• 🔍 Icon search and filtering
• 🎨 Live color/size preview
• 📋 Copy code (JSX/TSX) with one click
• 📖 Complete API reference
• 📱 Mobile-friendly design

📱 Usage (React Native)

import { IconVault } from 'iconvault-native';

// Simple icon with default size (24x24)
<IconVault name="heart" fill="red" />

// Custom size and color
<IconVault name="star" fill="gold" width={40} height={40} />

// With stroke
<IconVault name="check" fill="green" stroke="darkgreen" strokeWidth={2} />

Example: Tab Bar

import { IconVault } from 'iconvault-native';

const TabBar = ({ activeTab, setActiveTab }) => {
  const tabs = [
    { key: 'home', icon: 'home' },
    { key: 'search', icon: 'search' },
    { key: 'profile', icon: 'user' }
  ];

  return (
    <View style={styles.tabBar}>
      {tabs.map(tab => (
        <TouchableOpacity key={tab.key} onPress={() => setActiveTab(tab.key)}>
          <IconVault 
            name={tab.icon}
            fill={activeTab === tab.key ? '#007AFF' : '#8E8E93'}
            width={24}
            height={24}
          />
        </TouchableOpacity>
      ))}
    </View>
  );
};

🌐 Usage (React.js)

import React from 'react';
import { IconVault } from 'iconvault-native';

function App() {
  return (
    <div style={{ padding: 20 }}>
      <h3>React Web Icons</h3>

      <IconVault name="heart" fill="red" width={32} height={32} />
      <IconVault name="star" fill="gold" width={32} height={32} />
    </div>
  );
}
export default App;

🎨 Icon Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | name | string | Required | Icon name from your vault | | width | number | 24 | Icon width in pixels | | height | number | 24 | Icon height in pixels | | fill | string | currentColor | Fill color | | stroke | string | none | Stroke color | | strokeWidth | number | 1 | Stroke width | | opacity | number | 1 | Icon opacity (0 to 1) | | rotate | number / string | 0 | Rotation in degrees |

📚 Documentation

Includes:
🔍 Icon search
🎨 Live preview
📋 Copy code feature
📖 API reference

⚙️ How It Works
Add SVG files
Run build script
Icons auto convert
Use via <IconVault />

📄 License

MIT License