Getting Started

Official Persona icon pack installation guide

Installation

yarn add @privyid/persona-icon

Usage

Using as SVG

To use original svg file, you can manually import from @privyid/persona-icon/svg/[icon-name]/[size].svg

preview

<template>
  <img class="dark:invert" :src="IconURL" />
</template>

<script setup lang="ts">
import IconURL from '@privyid/persona-icon/svg/persona/32.svg'
</script>

Using as Vue Component

To use original svg file, you can manually import from @privyid/persona-icon/svg/[icon-name]/[size].svg

preview

<template>
  <IconPersona />
</template>

<script setup lang="ts">
import IconPersona from '@privyid/persona-icon/vue/persona/32.vue'
</script>

Using as Fonticon

To use as font icon, you need include the css @privyid/persona-icon/font/persona-icon.css.

Hello World

preview

<template>
  <p><i class="pi-persona" /> Hello World</p>
</template>

<script setup lang="ts">
import '@privyid/persona-icon/font/persona-icon.css'
</script>

Sizing

There are 4 avaiables size for all icons: 16, 20, 24, and 32. It work for both vue or svg version.

preview

<template>
  <img class="dark:invert" :src="Icon16" />
  <img class="dark:invert" :src="Icon20" />
  <img class="dark:invert" :src="Icon24" />
  <img class="dark:invert" :src="Icon32" />
</template>

<script setup lang="ts">
import Icon16 from '@privyid/persona-icon/svg/persona/16.svg'
import Icon20 from '@privyid/persona-icon/svg/persona/20.svg'
import Icon24 from '@privyid/persona-icon/svg/persona/24.svg'
import Icon32 from '@privyid/persona-icon/svg/persona/32.svg'
</script>

Nuxt 3

Add this to your nuxt.config.ts

export default defineNuxtConfig({
  modules: [
    '@privyid/persona-icon'
  ]
})

All icons will auto-imported with format pi-[icon-name]-[size]

preview

<template>
  <pi-broom-32 />
  <pi-document-check-16 />
  <pi-banned-solid-16 />
</template>

Enable Fonticon

We not recommended to use fonticon because cannot be tree-shaking. But if you want to enable, set fonticon: true in your nuxt.config.ts.

export default defineNuxtConfig({
  modules: [
    '@privyid/persona-icon'
  ],
  personaIcon: {        
    fonticon: true
  },                    
})