DEV Community

Cover image for Introducing Flexible Icon Library for Vue 3 🚀
AhmedFM
AhmedFM

Posted on • Edited on

Introducing Flexible Icon Library for Vue 3 🚀

#webdev #javascript #icons #vue

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
Enter fullscreen mode Exit fullscreen mode

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)
Enter fullscreen mode Exit fullscreen mode

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')
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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; }
Enter fullscreen mode Exit fullscreen mode

Animation

Add spinning animation to your icon:

<CrstIcon name="loading" class="css-icon--spin" />
Enter fullscreen mode Exit fullscreen mode

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! 🚀

Top comments (0)