سلام به همه! من از به اشتراک گذاشتن CRST-ICON ، یک کتابخانه جزء Icon Vue 3 که برای ساخت نمادهای مدیریت در برنامه های VUE شما بدون دردسر طراحی شده است ، هیجان زده ام. اگر به دنبال راه حلی هستید که سبک ، بسیار قابل تنظیم و قابل لرزش باشد ، سپس بخوانید!
CRST-ICON چیست؟
CRST-ICON یک کتابخانه Vue 3 است که روشی هوشمندانه و کارآمد برای مدیریت نمادها در برنامه های شما ارائه می دهد. این مجموعه با مجموعه ای از نمادهای پیش فرض همراه است و از اضافه کردن نمادهای سفارشی خود با سهولت پشتیبانی می کند. CRST-ICON با توجه به پشتیبانی کامل از نوع و دسترسی در ذهن ، اطمینان حاصل می کند که UI شما نه تنها عالی به نظر می رسد بلکه یکپارچه برای همه کار می کند.
ویژگی های کلیدی
- 🚀 پشتیبانی VUE 3: ساخته شده از زمین برای Vue 3.
- icons آیکون های پیش فرض داخلی: به سرعت با مجموعه ای غنی از نمادهای اساسی شروع به کار کنید.
- support پشتیبانی نماد سفارشی: به راحتی نمادهای خود را به مخلوط اضافه کنید.
- 🔧 پیکربندی آسان: تنظیم مستقیم با ثبت خودکار.
- support پشتیبانی Typescript: اعلامیه های کامل Typescript برای توسعه قوی.
- 🎯 Shakeable Tree: فقط آنچه را که برای عملکرد بهینه نیاز دارید وارد کنید.
- styling یک ظاهر طراحی شده قابل تنظیم: اندازه و کلاسهای از پیش تعریف شده به همراه پشتیبانی از متغیرهای CSS سفارشی.
- ♿ دسترسی: با دسترسی به بهترین روشها در ذهن طراحی شده است.
راهنمای شروع سریع
نصب
npm install @codetab/crst-icon
تنظیم پروژه خود
- ثبت نام نمادهای خود یک پرونده رجیستری آیکون ایجاد کنید
(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. برنامه اصلی خود را پیکربندی کنید
مؤلفه و سبک ها را در پرونده اصلی خود وارد و ثبت کنید:
// 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. از اجزای خود استفاده کنید
اکنون می توانید به راحتی از مؤلفه نماد در قالب های خود استفاده کنید:
<template>
name="home" size="md" color="primary" />
name="menu" size="lg" />
template>
یک ظاهر طراحی و سفارشی سازی
اندازه نماد را با استفاده از کلاسهای داخلی سفارشی کنید:
- xs = 1Rere
- SM = 1.5REM
- MD = 2REM
- حداکثر 10xl = 12REM
رنگ
تغییر رنگهای نماد با انواع از پیش تعریف شده (اولیه ، ثانویه ، موفقیت ، هشدار ، خطا ، اطلاعات) یا آنها را با متغیرهای 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;
}
انیمیشن
انیمیشن ریسندگی را به نماد خود اضافه کنید:
name="loading" class="css-icon--spin" />
چرا 328 کیلوبایت اینقدر بد نیست؟
برای یک کتابخانه با 100+ نماد ، 328 کیلوبایت کاملاً متوسط است! با تشکر از لرزش درخت ، فقط نمادهایی که استفاده می کنید در بسته نهایی شما به پایان می رسد. به علاوه ، با فشرده سازی مدرن (GZIP/Brotli) ، بار واقعی شبکه شما بسیار کوچکتر است.
ساخته شده با ❤ توسط codetab.tech.
برنامه نویسی مبارک! 🚀
