UIPackage
Vue React

Icon Box

Vue data-display
Edit on GitHub

Small framed icon used inside cards, list items, and stat tiles. Three variants (`primary`, `muted`, `custom`), two shapes (`rounded`, `circle`), and three sizes. Drop a Lucide icon in, get a polished badge.

Also available for React ->

Installation

$ npx shadcn-vue@latest add https://uipkge.dev/r/vue/icon-box.json

Or with the named registry: npx shadcn-vue@latest add @uipkge/icon-box

Examples

Props

Name Type / Values Default Required
icon Component — required
variant
'primary''muted''custom'
'primary' optional
shape
'rounded''circle'
'rounded' optional
size
'sm''md''lg'
'md' optional
class string — optional
iconClass string — optional

Used by

quick-actions

Files (2)

  • app/components/ui/icon-box/IconBox.vue 1 kB 
    <script setup lang="ts">
import type { Component } from 'vue'
import { cn } from '@/lib/utils'

const props = withDefaults(
  defineProps<{
    icon: Component
    variant?: 'primary' | 'muted' | 'custom'
    shape?: 'rounded' | 'circle'
    size?: 'sm' | 'md' | 'lg'
    class?: string
    iconClass?: string
  }>(),
  {
    variant: 'primary',
    shape: 'rounded',
    size: 'md',
  },
)

const variantClasses: Record<string, string> = {
  primary: 'bg-primary/10 text-primary',
  muted: 'bg-muted text-muted-foreground',
  custom: '',
}

const shapeClasses: Record<string, string> = {
  rounded: 'rounded-lg',
  circle: 'rounded-full',
}

const sizeClasses: Record<string, string> = {
  sm: 'p-1.5',
  md: 'p-2',
  lg: 'p-3',
}

const iconSizes: Record<string, string> = {
  sm: 'size-3.5',
  md: 'size-4',
  lg: 'size-6',
}
</script>

<template>
  <div :class="cn('shrink-0', variantClasses[variant], shapeClasses[shape], sizeClasses[size], props.class)">
    <component :is="icon" :class="cn(iconSizes[size], props.iconClass)" />
  </div>
</template>
  • app/components/ui/icon-box/index.ts 0 kB 
    export { default as IconBox } from './IconBox.vue'

Raw manifest: https://uipkge.dev/r/vue/icon-box.json