How to use Nuqta Icons in Vue

The Vue package gives you one NuqtaIcon component. You pass it any icon from a core package.

1. Point npm at the Nuqta registry

Create a file called .npmrc in your project root, next to package.json. It works for npm, pnpm and Yarn 1.

@nuqta:registry=https://nuqtaicons.com/npm/

That is all you need for the free Stroke style. For the Pro styles, log in with the email you bought with, copy your access token from the License page, add the token line too, and keep the token itself in an environment variable:

@nuqta:registry=https://nuqtaicons.com/npm/
//nuqtaicons.com/npm/:_authToken=${NUQTA_TOKEN}

export NUQTA_TOKEN=your-access-token

On Vercel, Netlify or any CI, add NUQTA_TOKEN as an environment variable instead. Never paste the token itself into .npmrc.

2. Install a style

Each style and corner shape is its own small package, named @nuqta/icons-<style>-<corner>. Install the component package and the style you want:

npm i @nuqta/vue @nuqta/icons-stroke-round

With pnpm: pnpm add @nuqta/vue @nuqta/icons-stroke-round. With Yarn: yarn add @nuqta/vue @nuqta/icons-stroke-round.

3. Use an icon

<script setup>
import { NuqtaIcon } from '@nuqta/vue';
import { CalendarIcon } from '@nuqta/icons-stroke-round';
</script>

<template>
  <NuqtaIcon :icon="CalendarIcon" :size="24" color="currentColor" />
</template>

Props

icon: the icon to draw, imported from a core package.
size: width and height in pixels. Default 24.
color: the main color.
accent-color: the second color in the Twotone and Shift styles.
stroke-width: line weight. The default is 1.5 on a 24px icon.

Switch style or corners

Change the core package name. Styles: stroke (Stroke), light (Light), bold (Bold), solid (Filled), duotone (Duotone), twotone (Twotone), tint (Tint), shift (Shift). Corners: round, classic, sharp.