Vue Pro Package

The Boxicons Pro Vue package delivers 50,000+ icon variations as native Vue 3 components. Built with high performance in mind, it supports full tree-shaking and deep TypeScript integration.

Installation

To access the Pro registry, configure your .npmrc file with your API key. You can find your key in your Account Settings .

Add the following to your .npmrc:


@boxicons-pro:registry=https://npm.boxicons.com/
//npm.boxicons.com/:_authToken=YOUR_API_KEY

Ensure your API key remains secure. Avoid committing it directly to public repositories; consider using environment variables for CI/CD environments.

Install the main package:


# Using npm
npm install @boxicons-pro/vue
 
# Using yarn
yarn add @boxicons-pro/vue
 
# Using pnpm
pnpm add @boxicons-pro/vue

Peer Dependencies

Ensure you are using Vue 3.0.0 or higher:


npm install vue@^3.0.0

Quick Start


<script setup>
import { Alarm, Home, User } from '@boxicons-pro/vue';
</script>
 
<template>
  <div class="flex gap-4">
    <Alarm size="lg" />
    <Home fill="#3b82f6" weight="thin" />
    <User pack="filled" style="sharp" />
  </div>
</template>

Performance & Optimization

Boxicons Pro Vue is designed to keep your application fast and lean.

Method 1: Named Imports (Best DX)

Standard usage with script setup. Modern build tools like Vite will automatically tree-shake unused icons from your production bundle.


import { Alarm, Home } from '@boxicons-pro/vue';

Method 2: Granular Packages (Maximum Efficiency)

For projects with strict bundle size requirements, you can install specific variants to completely avoid unused code paths.


import { Alarm } from '@boxicons-pro/vue-basic-regular-bold';

Icon Packs

Boxicons Pro includes multiple icon packs:

Pack	Description
`basic`	Simple line icons (default)
`filled`	Solid filled icons
`duotone`	Two-tone icons with primary and secondary colors
`duotone-mix`	Duotone icons with mixed styling
`duotone-solid`	Duotone icons with solid styling
`brands`	Brand and logo icons


<Alarm pack="basic" />
<Alarm pack="filled" />
<Alarm pack="duotone" />
<Alarm pack="duotone-mix" />
<Alarm pack="duotone-solid" />

Styles

Each pack (except brands) supports three styles:

Style	Description
`regular`	Default rounded corners
`rounded`	More pronounced rounded corners
`sharp`	Sharp, angular corners


<Alarm style="regular" />
<Alarm style="rounded" />
<Alarm style="sharp" />

Weights

Icons come in three weights:

Weight	Name	Description
200	`thin`	Light, thin strokes
400	`normal`	Default weight (no suffix needed)
700	`bold`	Heavy, bold strokes


<!-- Using weight names -->
<Alarm weight="thin" />
<Alarm weight="normal" />  <!-- default -->
<Alarm weight="bold" />
 
<!-- Using numeric values -->
<Alarm :weight="200" />
<Alarm :weight="400" />
<Alarm :weight="700" />

Duotone Icons

Duotone icons support separate colors and opacities for primary and secondary layers:


<Alarm 
  pack="duotone"
  primaryFill="#3b82f6"
  :primaryOpacity="1"
  secondaryFill="#93c5fd"
  :secondaryOpacity="0.4"
/>

Props Reference

Common Props

Prop	Type	Default	Description
`pack`	`'basic' \| 'filled' \| 'duotone' \| 'duotone-mix' \| 'duotone-solid' \| 'brands'`	`'basic'`	Icon pack to use
`style`	`'regular' \| 'rounded' \| 'sharp'`	`'regular'`	Icon style variant
`weight`	`'thin' \| 'normal' \| 'bold' \| 200 \| 400 \| 700`	`'normal'`	Icon stroke weight
`size`	`IconSize`	`'base'`	Preset size
`width`	`number \| string`	-	Custom width (overrides size)
`height`	`number \| string`	-	Custom height (overrides size)
`fill`	`string`	`'currentColor'`	Fill color
`opacity`	`number \| string`	-	Overall opacity (0-1)
`flip`	`'horizontal' \| 'vertical'`	-	Flip direction
`rotate`	`number \| string`	-	Rotation in degrees
`removePadding`	`boolean`	`false`	Remove icon padding by adjusting viewBox

Duotone-specific Props

Prop	Type	Default	Description
`primaryFill`	`string`	`'currentColor'`	Primary layer fill color
`primaryOpacity`	`number \| string`	`1`	Primary layer opacity
`secondaryFill`	`string`	`'currentColor'`	Secondary layer fill color
`secondaryOpacity`	`number \| string`	`0.4`	Secondary layer opacity

Testing

Test your Pro icon integration:


<script setup>
import { describe, it, expect } from 'vitest';
import { mount } from '@testing-library/vue';
import { Alarm } from '@boxicons-pro/vue';
 
describe('Boxicons Pro Vue Integration', () => {
  it('should support all packs', () => {
    const basic = mount(Alarm, { props: { pack: 'basic' } });
    const filled = mount(Alarm, { props: { pack: 'filled' } });
    const duotone = mount(Alarm, { props: { pack: 'duotone' } });
    
    expect(basic.find('svg').exists()).toBe(true);
    expect(filled.find('svg').exists()).toBe(true);
    expect(duotone.find('svg').exists()).toBe(true);
  });
 
  it('should support styles and weights', () => {
    const { container } = mount(Alarm, {
      props: {
        style: 'rounded',
        weight: 'bold'
      }
    });
    
    expect(container.querySelector('svg')).toBeTruthy();
  });
 
  it('should support duotone colors', () => {
    const { container } = mount(Alarm, {
      props: {
        pack: 'duotone',
        primaryFill: '#3b82f6',
        secondaryFill: '#93c5fd'
      }
    });
    
    const svg = container.querySelector('svg');
    expect(svg).toBeTruthy();
  });
});
</script>

Best Practices

Composition API

Leverage Vue 3’s Composition API for dynamic icon selection:


<script setup>
import { computed } from 'vue';
import { Alarm, Home, Menu } from '@boxicons-pro/vue';
 
const props = defineProps(['iconName', 'pack', 'style', 'weight']);
 
const icons = { Alarm, Home, Menu };
const currentIcon = computed(() => icons[props.iconName]);
</script>
 
<template>
  <component 
    :is="currentIcon" 
    :pack="pack"
    :style="style"
    :weight="weight"
  />
</template>