Icon

<pa-icon> | PaIcon

A flexible icon component that supports both FontAwesome icons and custom SVG icons. The component automatically determines the icon type and renders accordingly with support for different sizes, variants, and states.

Usage

<template>
  <pa-icon icon="check-regular" />
</template>

Examples

Basic Usage

<template>
  <div style="display: flex; gap: 1rem; align-items: center;">
    <pa-icon icon="check-regular" />
    <pa-icon icon="edit-regular" />
    <pa-icon icon="trash-alt-regular" />
    <pa-icon icon="user-regular" />
    <pa-icon icon="cog-regular" />
    <pa-icon icon="search-regular" />
  </div>
</template>

Sizes

Icons support multiple sizes for different use cases.

<template>
  <div style="display: flex; gap: 1rem; align-items: center;">
    <pa-icon icon="star-solid" size="sm" />   <!-- 16x16px -->
    <pa-icon icon="star-solid" />             <!-- 24x24px (default) -->
    <pa-icon icon="star-solid" size="lg" />   <!-- 32x32px -->
    <pa-icon icon="star-solid" size="xl" />   <!-- 48x48px -->
  </div>
</template>

Color Variants

Icons can use semantic color variants to convey meaning.

<template>
  <div style="display: flex; gap: 1rem; align-items: center;">
    <pa-icon icon="info-circle-solid" variant="primary" />
    <pa-icon icon="check-circle-solid" variant="success" />
    <pa-icon icon="exclamation-triangle-solid" variant="warning" />
    <pa-icon icon="times-circle-solid" variant="danger" />
    <pa-icon icon="question-circle-solid" variant="secondary" />
  </div>
</template>

FontAwesome Icon Styles

The component supports FontAwesome Pro Light, Pro Solid, Pro Regular, and Free Brand icons. Icons use kebab-case naming with style suffixes:

Light Style (-light suffix):

Solid Style (-solid suffix):

Regular Style (-regular suffix):

Brand Style (-brand suffix):

<template>
  <div>
    <!-- Light icons -->
    <pa-icon icon="check-light" />
    <pa-icon icon="copy-light" />
    <pa-icon icon="download-light" />
    
    <!-- Solid icons -->
    <pa-icon icon="check-solid" />
    <pa-icon icon="times-solid" />
    <pa-icon icon="star-solid" />
    
    <!-- Regular icons -->
    <pa-icon icon="star-regular" />
    <pa-icon icon="bell-regular" />
    <pa-icon icon="search-regular" />
    
    <!-- Brand icons -->
    <pa-icon icon="cc-mastercard-brand" />
    <pa-icon icon="cc-visa-brand" />
    <pa-icon icon="cc-amex-brand" />
    <pa-icon icon="google-pay-brand" />
  </div>
</template>

Custom Icons

The component supports custom SVG icons alongside FontAwesome icons.

<template>
  <div style="display: flex; gap: 1rem; align-items: center;">
    <pa-icon icon="visa-logo" />
    <pa-icon icon="mastercard-logo" />
    <pa-icon icon="bpay-vertical" />
    <pa-icon icon="credit-card" />
  </div>
</template>

Monochrome Mode

Custom colored icons can be forced to monochrome using the monochrome prop.

Color

Monochrome

<template>
  <div style="display: flex; gap: 1rem; align-items: center;">
    <pa-icon icon="visa-logo" />              <!-- Color version -->
    <pa-icon icon="visa-logo" :monochrome="true" />  <!-- Monochrome version -->
  </div>
</template>

Clickable Icons

Icons can be made interactive by listening to click events. However, when using icons as interactive elements, consider accessibility concerns such as providing appropriate ARIA labels, ensuring sufficient contrast, and offering alternative text for screen readers.

<template>
  <div style="display: flex; gap: 1rem; align-items: center;">
    <pa-icon 
      icon="edit-regular" 
      variant="primary"
      @click="handleEdit"
      role="button"
      tabindex="0"
      aria-label="Edit item"
      style="cursor: pointer;"
    />
  </div>
</template>

<script setup>
const handleEdit = () => console.log('Edit clicked')
</script>

Disabled State

Icons can be shown in a disabled state using the disabled variant.

<template>
  <div style="display: flex; gap: 1rem; align-items: center;">
    <pa-icon icon="user-regular" variant="primary" />   <!-- Normal state -->
    <pa-icon icon="user-regular" variant="disabled" />  <!-- Disabled state -->
  </div>
</template>

Icon Container

For centering icons within parent containers, use the pa-icon-container class provided by the component.

<template>
  <div class="pa-icon-container" style="width: 60px; height: 60px; border: 1px dashed #ccc; border-radius: 5px;">
    <pa-icon icon="star-solid" size="lg" variant="warning" />
  </div>
</template>

Layout tip: Use the pa-icon-container class on the parent element to automatically center icons with flexbox.

Custom PayAdvantage Icons

The component supports custom SVG icons alongside FontAwesome icons. For a complete list of all available custom icons with visual previews, see the "Complete Icon Library Reference" section at the bottom of this page.

Importing

import { PaIcon } from '@payadvantage/ui-components'

Properties

Name	Description	Reflects	Type	Default
icon	The icon name (FontAwesome or custom icon identifier).	no	string	required
variant	Color variant for the icon (primary, secondary, success, danger, warning, info, light, dark, disabled).	no	string	null
size	Size of the icon (sm, md, lg, xl).	no	string	'md'
monochrome	Force custom colored icons to render in monochrome.	no	boolean	false
compatibilityMode	Adds margins for backward compatibility with UI Lib 1.x.	no	boolean	false

Events

Name	Description	Event Detail
click	Emitted when the icon is clicked.	Native click event

Icon System Architecture

The PaIcon component uses a dual-system approach:

FontAwesome Icons

• Naming Convention: Uses kebab-case with style suffixes
  • Regular: icon-name (e.g., star, user)
  • Solid: icon-name-solid (e.g., star-solid, user-solid)
  • Light: icon-name-light (e.g., star-light, user-light)
  • Brand: icon-name-brand (e.g., cc-visa-brand)

Custom SVG Icons

• Monochrome & Color: Many custom icons have both colored and monochrome versions
• Automatic Selection: Color version used by default, monochrome when monochrome prop is true
• Custom Naming: Uses descriptive names like visa-logo, bpay-logo

Dependencies

• @fortawesome/vue-fontawesome: FontAwesome Vue integration
• @fortawesome/fontawesome-svg-core: FontAwesome core library
• Custom SVG Icons: Internal PayAdvantage icon collection

Design Notes

• Default Size: 24x24px for optimal readability
• Responsive Sizes: sm (16px), md (24px), lg (32px), xl (48px)
• Color Variants: Uses CSS custom properties for theming
• Accessibility: Icons are properly sized for touch targets
• Performance: FontAwesome icons are tree-shaken and only loaded icons are bundled

This component is essential for:

• UI consistency across the application
• Semantic meaning through color variants
• Flexible sizing for different contexts
• Payment method identification (custom logos)
• Action indication in buttons and controls

Complete Icon Library Reference

Loading icons...