React Native

Installation

Install Zappicon in your React Native project.

Free Version

npm install @zappicon/react-native

Pro version

Create a .npmrc file in the root of your project and add the following lines:

.npmrc
@zappicon:registry=https://npm.pkg.github.com
//npm.pkg.github.com/:_authToken=YOUR_AUTH_TOKEN

replace YOUR_AUTH_TOKEN with your actual personal access token.

Then, install the pro version:

npm install @zappicon/react-native-pro

How to use

Zappicon uses ES Modules for full tree-shaking, so your bundle only includes the icons you import.

import { Star } from '@zappicon/react-native'

// usage
function App() {
  return (
    <div>
      <Star />
    </div>
  )
}

Props

Zappicon icons accept the following props:

Variant

Zappicon offers multiple icon variants to suit different design needs:

Example

// One Variant
import { Star } from '@zappicon/react-native'

function IconShowcase() {
  return (
    <div>
      <Star variant="regular" />
    </div>
  )
}

// Different Variants
import { Star } from '@zappicon/react-native'

function IconShowcase() {
  return (
    <div>
      <Star variant="light" />
      <Star variant="regular" />
      <Star variant="filled" />
      <Star variant="duotone" />
      <Star variant="duotone-line" />
    </div>
  )
}

Size

You can adjust the size of the icons using the size prop. The value can be any valid CSS size unit (e.g., pixels, ems, rems).

Example

import { Star } from '@zappicon/react-native'

function IconShowcase() {
  return (
    <div>
      <Star size={16} />
      <Star size={24} />
      <Star size={32} />
      <Star size={48} />
    </div>
  )
}

Color

You can change the color of the icons using the color prop. The value can be any valid CSS color (e.g., hex, rgb, color names).

Example

import { Star } from '@zappicon/react-native'

function IconShowcase() {
  return (
    <div>
      <Star color="red" />
      <Star color="#00ff00" />
      <Star color="rgb(0, 0, 255)" />
      <Star color="currentColor" />
    </div>
  )
}

Class Name

This allows you to apply Tailwind CSS utilities or your own custom CSS classes for size, color, and other effects.

Example

// Tailwind CSS
<Star variant="regular" className="w-8 h-8 text-blue-500" />

// Custom CSS
<Star variant="regular" className="my-icon" />