Vue

Installation

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

How to use

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

<script setup>
import { Star } from '@zappicon/vue'
</script>

<template>
  <div>
    <Star />
  </div>
</template>

Props

Zappicon icons accept the following props:

Variant

Zappicon offers multiple icon variants to suit different design needs:

Example

<script setup>
import { Star } from '@zappicon/vue'
</script>

<template>
  <div>
    <Star variant="light" />
    <Star variant="regular" />
    <Star variant="filled" />
    <Star variant="duotone" />
    <Star variant="duotone-line" />
  </div>
</template>

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

<script setup>
import { Star } from '@zappicon/vue'
</script>

<template>
  <div>
    <Star :size="16" />
    <Star :size="24" />
    <Star :size="32" />
    <Star :size="48" />
  </div>
</template>

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

<script setup>
import { Star } from '@zappicon/vue'
</script>

<template>
  <div>
    <Star color="red" />
    <Star color="#00ff00" />
    <Star color="rgb(0, 0, 255)" />
    <Star color="currentColor" />
  </div>
</template>

Class

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

Example

<script setup>
import { Star } from '@zappicon/vue'
</script>

<template>
  <div>
    <Star class="h-8 w-8 text-red-500" />
    <Star class="h-12 w-12 text-green-500" />
    <Star class="h-16 w-16 text-blue-500" />
  </div>
</template>