crst-icon

A lightweight and flexible icon library for Vue 3 applications.

Introduction

crst-icon is a Vue 3 library that provides an efficient way to manage and use icons in your applications. It includes a set of default icons and allows you to easily add your own custom icons.

For detailed documentation and live examples, visit codetab.tech

Features

- 🚀 Vue 3 Support
- 📦 Built-in Default Icons
- 🎨 Custom Icon Support
- 🔧 Easy Configuration
- 💪 TypeScript Support
- 🎯 Tree-shakeable
- 🎭 Customizable Styling
- ♿ Accessibility Support

Documentation

- 📚 Full Documentation

Installation

``bash
npm install @codetab/crst-icon
`

or

`bash
yarn add @codetab/crst-icon
`

Setup Guide

$3

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

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

const icons = import.meta.glob('./*.vue')

registerIcons(icons)
`

$3

Import and register the component and styles in your main file:

`typescript
// main.ts
import { createApp } from 'vue'
import App from './App.vue'
import './icons' // Import icons registry
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 the icon component in your templates:

`vue

`

Using Default Icons

The library comes with a set of default icons that you can use right away:

`vue

`

Styling Options

$3

The library provides predefined size classes:

- xs - 1rem (16px)
- sm - 1.5rem (24px)
- md - 2rem (32px)
- lg - 2.5rem (40px)
- xl - 3rem (48px)
- 2xl - 4rem (64px)
- 3xl - 5rem (80px)
- 4xl - 6rem (96px)
- 5xl - 7rem (112px)
- 6xl - 8rem (128px)
- 7xl - 9rem (144px)
- 8xl - 10rem (160px)
- 9xl - 11rem (176px)
- 10xl - 12rem (192px)

`vue

`

$3

Built-in color variants:

- primary
- secondary
- success
- warning
- error
- info

`vue

`

$3

You can customize the colors using CSS variables:

`css
: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;
}
`

$3

Add spinning animation to your icon:

`vue

`

Icon Properties

| Prop | Type | Default | Description |
| ------ | ------ | -------------- | ------------------------------ |
| name | String | required | Name of the icon |
| size | String | 'md' | Size of the icon (xs to 10xl) |
| color | String | 'currentColor' | Color class or CSS color value |
| rotate | Number | 0 | Rotation degree |

TypeScript Support

The library includes TypeScript declarations out of the box. No additional setup is required.

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

MIT License © 2024 codetab

Project Setup

`sh
npm install
`

$3

`sh
npm run dev
`

$3

`sh
npm run build
`

$3

`sh
npm run lint
``

---

Built with ❤️ by codetab.tech.