@iconweuse

A cross-platform React and React Native icon library by IconWeUse featuring the full Breeze Regular icon set. Designed with premium performance and dynamic project plan verification.

Features

• Cross-Platform Compatibility: Full support for both React (web) and React Native / Expo out of the box.
• Project Plan Verification: Automatic verification of project plan key via an elegant license provider.
• TypeScript Autocomplete: Full typings provided with explicit size, color, width, and height prop suggestions.
• Tree-shakable subpaths: Supports named imports or direct individual file imports for minimal bundle sizes.

1. Installation

Install the package via your package manager:

# npm
npm install @iconweuse

# yarn
yarn add @iconweuse

# pnpm
pnpm add @iconweuse

2. Configuration & Getting a Project ID

To render any icon from the library, you need a valid Project ID from the IconWeUse dashboard:

1. 1

   Log in to the IconWeUse Dashboard.

2. 2

   Go to your Projects page and click Create New Project.

3. 3

   Configure your project details (including allowed domains or IP addresses for security).

4. 4

   Once created, copy the generated Project ID (e.g. k4z9rm2tq1).

3. Adding the License Provider

Wrap your application inside the IconWeUseProvider at your root entrypoint (such as App.tsx or index.tsx) to verify your project status. If the provider is missing or the project ID is invalid, the icons will not render.

import React from 'react';
import { IconWeUseProvider } from '@iconweuse';
import MainApplication from './MainApplication';

function App() {
  return (
    <IconWeUseProvider projectId="YOUR_PROJECT_ID_FROM_DASHBOARD">
      <MainApplication />
    </IconWeUseProvider>
  );
}

export default App;

4. Importing and Using Icons

A. Named Exports (Recommended)

Import icons directly from the Breeze Regular set:

import React from 'react';
import { Activity } from '@iconweuse/iwu-breeze-regular';

function Header() {
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
      <Activity size={24} color="#00ff00" />
      <span>Activity Feed</span>
    </div>
  );
}

B. Direct Subpath Imports (Optimized)

Import specific components individually for absolute control over bundle size:

import React from 'react';
import Activity from '@iconweuse/iwu-breeze-regular/Activity';

function Header() {
  return (
    <div>
      <Activity size={24} color="#00ff00" />
    </div>
  );
}

C. Hook Usage (Advanced)

Check the validation status manually in your custom components:

import React from 'react';
import { useIconWeUse } from '@iconweuse';

function StatusIndicator() {
  const { isVerified, projectId } = useIconWeUse();

  return (
    <div>
      License status: {isVerified ? 'Active ✅' : 'Inactive ❌'}
    </div>
  );
}

License

ISC License. Supported by the IconWeUse platform.