Icons
Less than 1 minute
Icons
Work in Progress
The icons package is being updated for PrimeVue compatibility. The documentation below may not work as expected.
SVG icons based on Material Symbols with Weight 400, Grade 0, Size 24.
Quick Start
<script setup>
import { SearchIcon } from "@bcc-code/icons-vue";
</script>
<template>
<SearchIcon class="h-6 w-6 text-blue-500" />
</template>Installation
npm install @bcc-code/icons-vueUsage
Icons use PascalCase naming with an Icon suffix.
| Icon | Import |
|---|---|
| Search | SearchIcon |
| Home | HomeIcon |
| Menu | MenuIcon |
| Settings | SettingsIcon |
Sizing
Use icon size tokens for consistent sizing:
| Token | Tailwind | CSS | Value |
|---|---|---|---|
icon.size.xs | icon-xs | --icon-size-xs | 16px |
icon.size.sm | icon-sm | --icon-size-sm | 20px |
icon.size.md | icon-md | --icon-size-md | 24px |
icon.size.lg | icon-lg | --icon-size-lg | 32px |
icon.size.xl | icon-xl | --icon-size-xl | 48px |
<SearchIcon class="icon-sm text-subtle" />
<SearchIcon class="icon-md text-default" />
<SearchIcon class="icon-lg text-brand-default" />Browse Available Icons
Raw SVG (Non-Vue Projects)
For projects without Vue, use the base icons package:
npm install @bcc-code/iconsImport SVG files directly or copy from Figma.
Figma
See the design specs in Figma (link coming soon).