VueIconify

Lightweight Vue 3 icon library with a single generic VueIconify wrapper.

The current direction is solid-first: new icons are created and refined as solid, while the small existing regular layer is kept as an experimental secondary style.

Installation

npm install @codemonster-ru/vueiconify

Peer dependency:

npm install vue

Minimum supported Vue version: 3.5.0.

Usage

Generic icon component:

<script setup lang="ts">
import { VueIconify, icons } from '@codemonster-ru/vueiconify';
</script>

<template>
    <VueIconify :icon="icons.calendar" />
    <VueIconify :icon="icons.shield" :size="24" />
    <VueIconify :icon="icons.circleNotch" spin />
    <VueIconify icon="warning" width="24" height="24" aria-label="Warning" />
</template>

Category-oriented example:

<script setup lang="ts">
import { VueIconify, icons } from '@codemonster-ru/vueiconify';
</script>

<template>
    <VueIconify :icon="icons.arrowLeft" />
    <VueIconify :icon="icons.copy" />
    <VueIconify :icon="icons.folder" />
    <VueIconify :icon="icons.info" />
</template>

API

VueIconify

Props:

• icon: string - icon name or imported token from icons (recommended). Invalid values fall back to moon.
• style: 'solid' | 'regular' - visual variant for icons that provide a regular version. Falls back to solid when the requested variant is unavailable.
• size: string | number - sets both width and height. Default: 16.
• spin: boolean - applies continuous rotation animation.

Existing dual-style icons:

• bars
• check
• xmark
• calendar
• bell
• mail
• message
• user
• lock
• gear

Attributes:

• Standard Vue attributes are forwarded to the rendered SVG component, including class, style, width, height, role, and aria-*.
• Explicit width and height attributes can still be used when you need non-square sizing.

Supported icon names:

• Movement: 17 icons
• Editing And Commands: 21 icons
• Interface Objects: 42 icons
• Status And Messaging: 19 icons

Movement:

• arrowDown
• arrowLeft
• arrowRight
• arrowUp
• bars
• caretDown
• caretLeft
• caretRight
• caretUp
• chevronDown
• chevronLeft
• chevronRight
• chevronUp
• collapse
• columns
• expand
• grid

Editing And Commands:

• check
• clipboard
• copy
• download
• ellipsis
• externalLink
• filter
• funnelX
• link
• logIn
• logOut
• minus
• pencil
• plus
• refresh
• send
• sliders
• sort
• trash
• upload
• xmark

Interface Objects:

• archive
• bell
• bookmark
• briefcase
• building
• calendar
• chartBar
• cloud
• code
• cpu
• creditCard
• database
• file
• fileText
• folder
• folderOpen
• gear
• globe
• hardDrive
• heart
• house
• inbox
• key
• layers
• lock
• magnifyingGlass
• mail
• message
• phone
• plug
• receipt
• server
• star
• terminal
• unlock
• user
• userCheck
• userMinus
• userPlus
• users
• share
• wallet

Status And Messaging:

• activity
• alertCircle
• ban
• checkCircle
• circleHalf
• circleNotch
• clock
• eye
• eyeSlash
• history
• info
• moon
• question
• rotateRight
• shield
• sparkles
• sun
• warning
• xCircle

Available Exports

Primary exports:

• VueIconify
• icons

Design Principles

• Icons follow a custom UI-solid style built for compact product interfaces.
• Shapes use soft geometry, large negative space, and readable silhouettes at 16px and 20px.
• The set avoids tracing or reproducing third-party icon paths and keeps its own proportions and corner treatment.
• New icons should be checked for optical balance, consistent thickness, and clear meaning before merge.

Core Set

• The preferred starter set for product UIs is defined in src/lib/iconCore.json.
• It is intentionally smaller than the full pack and biased toward SaaS/admin dashboards, forms, tables, auth, billing, messaging, and infrastructure views.
• Semantic guidance for near-duplicates lives in docs/icon-audit.md.

The public API intentionally uses a single rendering entry point:

• use VueIconify for rendering
• pass icon tokens from icons to the icon prop

Development

npm ci
npm run create-icon -- alertTriangle feedback
npm run generate
npm run validate-icons
npm run lint
npm run typecheck
npm run build
npm run smoke
npm run render

npm run create-icon -- <iconName> <categoryId> scaffolds a new solid icon component, registers it in src/lib/iconMeta.json, and seeds title/keyword metadata in src/lib/iconCatalog.json.

npm run validate-icons fails if metadata, catalog entries, generated exports, icons.json, or README blocks are out of sync.

npm run render mounts a few public icons through Vue SSR to catch runtime regressions in the published bundle.

Releases

• Create a changeset with npm run changeset for every user-facing change.
• Merge changesets into main and let the release workflow open or update the version PR.
• When the version PR is merged, Changesets publishes to npm and creates the GitHub Release automatically.

Showcase

• npm run dev starts the local showcase.
• npm run build:showcase builds the demo app.
• The showcase is local-only for now and can later be embedded into your own site.

License

MIT