WELLCOME BACK

Hello guys. How are you all? I hope you are all well. I came again with a post. Let’s go…

তো চলে এলাম আরো একটি নতুন পোস্ট নিয়ে আপনাদের মাঝে। এই পোস্টে আমি Plus Ui v3.2 থিমের Svg icon গুলোর ব্যবহার করবেন যেভাবে সেটা দেখাবো।

Svg icon এই থিমে নরমালি ব্যবহার করা হয়নি তাই এটি একটু কঠিন। ডিরেক্ট Svg icon ব্যবহার করলে থিমের কোড বড় হয়। আর থিমে যেভাবে দেওয়া আছে সেটি করলে সেই Svg icon এর কোড একবার বসালে যেখানে ইচ্ছে দেখাতে পারবেন। আর অনেকেই Svg icon সেট করতেও জানেন না সেটাও শিখে জাবেন এর সাথে। তো চলুন শুরু করা যাক।

Svg icon এই থিমে বেশির ভাগ ব্যবহার করা হয় Sidebar এ। তবে এই থিমে Icon কিভাবে ব্যবহার হচ্ছে বুঝতে পারবেন না। সব Icon এ শুরু <include name='svg.sms-edit'/> এমন দেখায়। তবে অন্য নাম দিলে আপনার হয় না কেনো?

আসলে আপনার প্রথমে Svg icon টি যুক্ত করতে হবে তারপর ই কাজ করবে। তো কিভাবে তো বুঝিয়ে দেই!

Svg Icons

এই থিমের Svg Icon আলাদা তাই এখানে থেকে যেটা ইচ্ছে কোড কপি করে নিন!

তো প্রথমে ব্লগারে যান। তারপর এখানে ক্লিক করে Theme এ ক্লিক করুন!

এখন Customize এ পরে arrow তে ক্লিক করে Html এ ক্লিক করুন!

এখন থিমের কোডের ভেতর 4292 লাইনে গেলে সব Svg Icon এর কোড সেট করা দেখতে পাবেন। এখানেই যেটা লাগবে সেটা যুক্ত করবেন!


<!--[ svg | Name.. ]-->
    <b:includable id='svg.Name>
    Svg Icon code..
    </b:includable>

Svg Icon code এ Svg Icon কোডটি দিয়ে নিচের মতো বসাবেন।
includable id=”svg.Name” এখানের id তে আপার ইচ্ছে মতো icon টির নাম বসাবেন।
উদাহরণঃ


<!--[ svg | Instagram ]-->
    <b:includable id='svg.instagram'>
      <svg viewBox='0 0 32 32'#gt;<path d='M22,3H10a7,7,0,0,0-7,7V22a7,7,0,0,0,7,7H22a7,7,0,0,0,7-7V10A7,7,0,0,0,22,3Zm5,19a5,5,0,0,1-5,5H10a5,5,0,0,1-5-5V10a5,5,0,0,svg-5H22a5,5,0,0,1,5,5Z'/><path class='c' d='M16,9.5A6.5,6.5,0,1,0,22.5,16,6.51,6.51,0,0,0,16,9.5Zm0,11A4.5,4.5,0,1,1,20.5,16,4.51,4.51,0,0,1,16,20.5Z'/><circle class='c' cx='23' cy='9' r='1'/></svg>
    </b:includable>

এভাবে নিচের মতে বসায় দিবেন আগে!