Installation

Install Zappicon in your project by following the instructions for your specific framework below.

React

Install Zappicon in your React project

Free version

npm install @zappicon/react

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-pro

Read the full Docs.

Vue

Install Zappicon in your Vue project

Free version

npm install @zappicon/vue

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/vue-pro

Read the full Docs.

React Native

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

Read the full Docs.

Tailwind CSS

Install Zappicon in your Tailwind CSS project

Free version

npm install @zappicon/tailwind

Configuration

For Tailwind CSS v3.x, add the plugin to your tailwind.config.js file:

tailwind.config.js
const { zappicon } = require('@zappicon/tailwind')

module.exports = {
  plugins: [
    zappicon({
      prefix: 'za',
      size: '1em',
      color: 'orange'
    })
  ]
}

For Tailwind CSS v4.x, add the plugin directly to your css file:

styles.css
/* with default options */
@plugin '@zappicon/tailwind';

/* with custom options */
@plugin '@zappicon/tailwind' {
  prefix: 'za';
  size: '1em';
  color: 'orange';
}

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/tailwind-pro

Configuration

For Tailwind CSS v3.x, add the plugin to your tailwind.config.js file:

tailwind.config.js
const { zappicon } = require('@zappicon/tailwind-pro')

module.exports = {
  plugins: [
    zappicon({
      prefix: 'za',
      size: '1em',
      color: 'orange'
    })
  ]
}

For Tailwind CSS v4.x, add the plugin directly to your css file:

styles.css
/* with default options */
@plugin '@zappicon/tailwind-pro';

/* with custom options */
@plugin '@zappicon/tailwind-pro' {
  prefix: 'za';
  size: '1em';
  color: 'orange';
}

Read the full Docs.