মূল বিষয়ে যান
বিভাগসমূহ
ভাষা, এখন বাংলা
Rastrillo ডিজাইন সিস্টেম

আইকন

12টি slug, ইনলাইন SVG হিসেবে সরবরাহ করা এবং বাইনারিতে কম্পাইল করা: কোনও বিল্ড স্টেপ নেই, দ্বিতীয় কোনও অরিজিন নেই, আর নেটওয়ার্ক ছাড়াই চলে। প্রতিটির মাপ পাশের লেখা থেকে আসে tokens.css-এর নিজস্ব .icon নিয়ম মেনে — এখানে আপনি ঠিক সেই মাপই দেখছেন। যে slug-এর কোনও উত্তর নেই সেটি কিছুই আঁকে না, তাই একটি টাইপোর দাম একটি অনুপস্থিত আইকন, উত্তরের মাঝপথে মরা পেজ নয়।

  • alert-triangle{{icon "alert-triangle"}}lucide.dev/icons/triangle-alert
  • check{{icon "check"}}lucide.dev/icons/check
  • check-circle{{icon "check-circle"}}lucide.dev/icons/circle-check
  • chevron-down{{icon "chevron-down"}}lucide.dev/icons/chevron-down
  • help-circle{{icon "help-circle"}}lucide.dev/icons/circle-help
  • info{{icon "info"}}lucide.dev/icons/info
  • kebab{{icon "kebab"}}lucide.dev/icons/ellipsis-vertical
  • menu{{icon "menu"}}lucide.dev/icons/menu
  • plus{{icon "plus"}}lucide.dev/icons/plus
  • x{{icon "x"}}lucide.dev/icons/x
  • x-circle{{icon "x-circle"}}lucide.dev/icons/circle-x

নামগুলি rastrillo-র নিজের

12টির মধ্যে 5টি lucide.dev-এর প্রকাশিত নাম থেকে আলাদা, তাই Lucide সেটও নিজের একটি অনুবাদ বহন করে। কোনও আইকনের নিচের শেষ লাইনটি যদি তার নাম না-ই বলে, সেটিই তাদের একটি। লাভ হল: অ্যাপ যে সেটই স্ক্যাফোল্ড করুক, একই কল একই গ্লিফ বোঝায়, আর সরবরাহ করা partial সেট বদলালেও বদলায় না।

kebab আর menu — এই জোড়াটি গুলিয়ে না ফেলাই ভালো: kebab হল তিনটি বিন্দু, যার মানে «এই সারিতে আরও কাজ», আর menu হল তিনটি রেখা, যার মানে নেভিগেশন। শেলগুলি গুটিয়ে যাওয়ার সময় menu ব্যবহার করে।

গ্লিফগুলি কোথা থেকে আসে

Lucide, ISC লাইসেন্সে সরবরাহ করা এবং সোর্সে পিন করা — রানটাইমে আনা হয় না। rastrillo new --icons=font-awesome তার বদলে Font Awesome Free স্ক্যাফোল্ড করে: সেটি এমন একটি উৎস যা থেকে অ্যাপ নিতে পারে, এই ফ্রেমওয়ার্কের নির্ভরতা নয়। এখানে কিছুই সেটি আনে না, আর Pro একটি সবেতন পণ্য যা rastrillo আপনার হয়ে সরবরাহ করতে পারে না।

সম্পূর্ণ সেটটি lucide.dev (নতুন ট্যাবে খোলে)-এ আছে।

ফ্রেমওয়ার্ক যে আইকন দেয় না

rastrillo new যে icons প্যাকেজটি লেখে সেটি অ্যাপের নিজস্ব সোর্স: গ্লিফটি সেখানেই যোগ করুন আর অন্য যে কোনওটির মতোই কল করুন। এর Icon আর Assets-কে ui.Pages-এ icon আর iconAssets হিসেবে পাস করুন, তাহলে আপনার সেট ফ্রেমওয়ার্কের নিজের সেটের আগে থাকবে।

Funcs: template.FuncMap{"icon": icons.Icon, "iconAssets": icons.Assets, "asset": assets.Path},

সব সময় দুটোই পাস করুন। শুধু icon দিলে iconAssets ফ্রেমওয়ার্কের ডিফল্টেই থেকে যায়, আর cdn বা js ডেলিভারি কোনও ত্রুটি ছাড়াই ভেঙে যায়।