Introducing Flexible Icon Library for Vue 3 🚀

Hey everyone! I’m excited to share crst-icon, a Vue 3 icon component library designed to make managing icons in your Vue applications effortless. If you’re looking for a solution that is lightweight, highly customizable, and tree-shakeable, then read on!

What Is crst-icon?

crst-icon is a Vue 3 library that provides a smart, efficient way to manage icons in your applications. It comes with a set of default icons and supports adding your own custom icons with ease. With full TypeScript support and accessibility in mind, crst-icon ensures that your UI not only looks great but works seamlessly for everyone.

Key Features

• 🚀 Vue 3 Support: Built from the ground up for Vue 3.
• 📦 Built-in Default Icons: Get started quickly with a rich set of essential icons.
• 🎨 Custom Icon Support: Easily add your own icons to the mix.
• 🔧 Easy Configuration: Straightforward setup with auto-registration.
• 💪 TypeScript Support: Full TypeScript declarations for robust development.
• 🎯 Tree-shakeable: Import only what you need for optimal performance.
• 🎭 Customizable Styling: Predefined size and color classes along with support for custom CSS variables.
• ♿ Accessibility: Designed with accessibility best practices in mind.

Quick Start Guide

Installation

npm install @codetab/crst-icon

Setting Up Your Project

1. Register Your Icons Create an icons registry file (e.g., src/icons/index.ts):

// src/icons/index.ts
import { registerIcons } from '@codetab/crst-icon'

const icons = import.meta.glob('./*.vue')
console.log('Icon files found:', icons)

registerIcons(icons)

2.Configure Your Main Application
Import and register the component and styles in your main file:

// main.ts
import { createApp } from 'vue'
import App from './App.vue'
import './icons' // This registers your icons
import { CrstIcon } from '@codetab/crst-icon'
import '@codetab/crst-icon/style.css'

const app = createApp(App)
app.component('CrstIcon', CrstIcon)
app.mount('#app')

3.Use in Your Components
Now you can easily use the icon component in your templates:

<template>
  <div>
    <CrstIcon name="home" size="md" color="primary" />
    <CrstIcon name="menu" size="lg" />
  </div>
</template>

Styling & Customization

Customize icon sizes using built-in classes:

• xs = 1rem
• sm = 1.5rem
• md = 2rem
• up to 10xl = 12rem

Colors

Change icon colors with predefined variants (primary, secondary, success, warning, error, info) or override them with CSS variables:

:root {
  --icon-primary-color: #your-color;
  --icon-secondary-color: #your-color;
  --icon-success-color: #your-color;
  --icon-warning-color: #your-color;
  --icon-error-color: #your-color;
  --icon-info-color: #your-color;
  --icon-focus-color: #your-color;
}

Animation

Add spinning animation to your icon:

<CrstIcon name="loading" class="css-icon--spin" />

Why 328 KB Isn’t That Bad?

For a library featuring 100+ icons, 328 KB is quite moderate! Thanks to tree shaking, only the icons you use will end up in your final bundle. Plus, with modern compression (gzip/Brotli), your actual network payload is much smaller.

Built with ❤️ by codetab.tech.

Happy coding! 🚀