উপাদান প্রতীক নির্দেশিকা

উপাদান প্রতীক কি?

ম্যাটেরিয়াল সিম্বল হল আমাদের নতুন আইকন, একটি একক ফন্ট ফাইলে 2,500 টিরও বেশি গ্লিফ একত্রিত করে ডিজাইনের বৈচিত্রের বিস্তৃত পরিসরে। চিহ্নগুলি তিনটি শৈলী এবং চারটি সামঞ্জস্যযোগ্য পরিবর্তনশীল ফন্ট অক্ষে পাওয়া যায় (পূর্ণ, ওজন, গ্রেড এবং অপটিক্যাল আকার)। ম্যাটেরিয়াল সিম্বল লাইব্রেরিতে ম্যাটেরিয়াল সিম্বলের সম্পূর্ণ সেট দেখুন।

অক্ষ FILL

ফিল আপনাকে ডিফল্ট আইকন শৈলী পরিবর্তন করার ক্ষমতা দেয়। একটি একক আইকন অপূর্ণ এবং ভরা উভয় অবস্থাই রেন্ডার করতে পারে।

একটি রাষ্ট্রীয় রূপান্তর জানাতে, অ্যানিমেশন বা মিথস্ক্রিয়া জন্য পূরণ অক্ষ ব্যবহার করুন. মানগুলি ডিফল্টের জন্য 0 বা সম্পূর্ণরূপে পূরণ করার জন্য 1। ওজন অক্ষের পাশাপাশি, ভরাট আইকনের চেহারাকেও প্রভাবিত করে।

wght অক্ষ

ওজন পাতলা (100) এবং গাঢ় (700) এর মধ্যে ওজনের একটি পরিসীমা সহ প্রতীকের স্ট্রোকের ওজনকে সংজ্ঞায়িত করে। ওজন প্রতীকের সামগ্রিক আকারকেও প্রভাবিত করতে পারে।

GRAD অক্ষ

গ্রেড অক্ষ ভিজ্যুয়ালাইজেশন

ওজন এবং গ্রেড একটি প্রতীকের বেধকে প্রভাবিত করে। গ্রেডের সামঞ্জস্যগুলি ওজনের সামঞ্জস্যের চেয়ে বেশি দানাদার এবং প্রতীকের আকারের উপর একটি ছোট প্রভাব ফেলে।

কিছু টেক্সট ফন্টেও গ্রেড পাওয়া যায়। আপনি একটি সুরেলা ভিজ্যুয়াল এফেক্টের জন্য পাঠ্য এবং চিহ্নগুলির মধ্যে গ্রেড স্তরগুলি মেলাতে পারেন৷ উদাহরণস্বরূপ, যদি টেক্সট ফন্টের একটি -25 গ্রেড মান থাকে, তাহলে প্রতীকগুলি এটিকে একটি উপযুক্ত মানের সাথে মেলাতে পারে, বলুন -25৷

আপনি বিভিন্ন প্রয়োজনের জন্য গ্রেড ব্যবহার করতে পারেন:

কম জোর (যেমন -25 গ্রেড): একটি অন্ধকার পটভূমিতে একটি হালকা প্রতীকের জন্য একদৃষ্টি কমাতে, একটি নিম্ন গ্রেড ব্যবহার করুন।

উচ্চ জোর (যেমন 200 গ্রেড): একটি প্রতীক হাইলাইট করতে, ইতিবাচক গ্রেড বাড়ান।

opsz অক্ষ

অপটিক্যাল মাপ 20dp থেকে 48dp পর্যন্ত।

চিত্রটিকে বিভিন্ন আকারে একই দেখতে, আইকনের আকারের স্কেল হিসাবে স্ট্রোকের ওজন (বেধ) পরিবর্তিত হয়। অপটিক্যাল আকার স্বয়ংক্রিয়ভাবে স্ট্রোকের ওজন সামঞ্জস্য করার একটি উপায় প্রস্তাব করে যখন আপনি প্রতীকের আকার বাড়ান বা হ্রাস করেন।

উপাদান প্রতীক পাওয়া

উপাদান চিহ্নগুলি বিভিন্ন ফর্ম্যাটে উপলব্ধ এবং বিভিন্ন ধরণের প্রকল্প এবং প্ল্যাটফর্মের জন্য উপযুক্ত, উভয়ই তাদের অ্যাপে বিকাশকারীদের জন্য এবং তাদের মকআপ বা প্রোটোটাইপের ডিজাইনারদের জন্য।

লাইসেন্সিং

উপাদান চিহ্নগুলি Apache লাইসেন্স সংস্করণ 2.0 এর অধীনে উপলব্ধ।

পৃথক আইকন ব্রাউজিং এবং ডাউনলোড করা

বস্তুগত প্রতীকগুলির সম্পূর্ণ সেটগুলি SVG বা PNG ফর্ম্যাটে উপাদান প্রতীক লাইব্রেরি থেকে উপলব্ধ। এগুলি ওয়েব, অ্যান্ড্রয়েড, এবং আইওএস বা যেকোনো ডিজাইনার টুলের জন্য উপযুক্ত।

গিট সংগ্রহস্থল

গিট রিপোজিটরিতে SVG ফরম্যাটে ম্যাটেরিয়াল সিম্বলের সম্পূর্ণ সেট রয়েছে।

$ git clone https://github.com/google/material-design-icons

উপাদান প্রতীক ব্যবহার করে

ওয়েবে ব্যবহার করুন

ম্যাটেরিয়াল সিম্বল ফন্ট হল ওয়েব প্রোজেক্টে মেটেরিয়াল সিম্বলগুলিকে একত্রিত করার সবচেয়ে সহজ উপায়।

আইকনগুলিকে একটি একক ফন্টে প্যাকেজ করা হয় যাতে ওয়েব ডেভেলপাররা এই আইকনগুলিকে শুধুমাত্র কয়েকটি লাইনের কোড সহ সহজেই অন্তর্ভুক্ত করতে পারে৷

গুগল ফন্টের সাথে স্ট্যাটিক ফন্ট

যেকোনো ওয়েব পেজে ব্যবহারের জন্য আইকন ফন্ট সেট আপ করার সবচেয়ে সহজ উপায় হল Google Fonts এর মাধ্যমে। HTML এর এই একক লাইন অন্তর্ভুক্ত করুন:

<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" rel="stylesheet" />

উপরের স্নিপেটে প্রতিটি অক্ষের জন্য ডিফল্ট কনফিগারেশন রয়েছে, যার ওজন 400, অপটিক্যাল আকার 48, গ্রেড 0 এবং পূরণ (এছাড়াও 0।)

বিভিন্ন অক্ষ মান কনফিগার করতে Fonts CSS API ব্যবহার করুন। নিম্নলিখিত উদাহরণগুলি দেখুন:

Google ফন্টের সাথে পরিবর্তনশীল ফন্ট

আপনি যদি CSS এর মাধ্যমে আইকন অ্যানিমেটিং করেন, বা আইকন বৈশিষ্ট্যগুলির উপর সূক্ষ্ম নিয়ন্ত্রণ চান, Google Symbols পরিবর্তনশীল ফন্ট ব্যবহার করুন। রেঞ্জ ব্যবহার করে, নম্বর বিন্যাসে number..number , আমরা সম্পূর্ণ ভেরিয়েবল ফন্ট লোড করতে পারি। আপনার ব্যবহারকারীরা ভেরিয়েবল ফন্ট লোড করতে সক্ষম হবে কিনা তা বোঝার জন্য আমি কি পরিবর্তনশীল ফন্ট সমর্থন ব্যবহার করতে পারি তা দেখুন, সম্ভবত তারা। এখানে কিছু উদাহরণ আছে:

বা এমনকি তাদের অ্যানিমেট!

আইকন ফন্ট অপ্টিমাইজ করুন

  1. &icon_names ক্যোয়ারী প্যারামিটার ব্যবহার করে শুধুমাত্র আপনার অ্যাপ্লিকেশানের জন্য প্রাসঙ্গিক আইকনগুলিকে অন্তর্ভুক্ত করতে ফন্টটিকে সাবসেট করুন, আইকন নামের একটি বর্ণানুক্রমিকভাবে সাজানো কমা দ্বারা পৃথক করা তালিকা ব্যবহার করে (লিগ্যাচার।)

    প্রস্তাবিত নয় — ডিফল্ট সেটিংস ব্যবহার করে সমস্ত 3,800+ আইকন লোড হয়৷ ফন্ট পেলোড: 295 KB

    https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined

    প্রস্তাবিত — শুধুমাত্র প্রয়োজনীয় আইকন লোড করতে আইকনের নাম উল্লেখ করা। ফন্ট পেলোড: 1.7 KB

    https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined&icon_names=home,palette,settings&display=block

  2. পরিবর্তনশীল ফন্ট অক্ষগুলি শুধুমাত্র আপনার অ্যাপ্লিকেশন ব্যবহার করবে অন্তর্ভুক্ত করার জন্য উদাহরণ করুন। বেশিরভাগ অ্যাপ্লিকেশনের অক্ষের কয়েকটি বৈচিত্র প্রয়োজন।

    প্রস্তাবিত নয় — অক্ষ কনফিগারেশন মিস করা ডিফল্ট স্ট্যাটিক ফন্ট লোড করে (ওজন 400, অপটিক্যাল আকার 24, রাউন্ড 50, গ্রেড 0, 0 পূরণ করুন)। সমস্ত পরিবর্তনশীল ফন্ট অক্ষ সম্পূর্ণরূপে অন্তর্ভুক্ত করা সাধারণত অপ্রয়োজনীয় এবং পেলোড বৃদ্ধি করে। ফন্ট পেলোড: 7.9 MB

    https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined
https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD,ROND@20..48,100..700,0..1,-50..200,0..100

    প্রস্তাবিত — অক্ষগুলির একটি নির্দিষ্ট সংমিশ্রণ ব্যবহার করা হয়। একটি উদাহরণ হিসাবে, সম্পূর্ণ 'FILL' অক্ষ রাজ্যগুলির মধ্যে CSS রূপান্তর প্রদান করে এবং 'ROND' 100 হল নির্বাচিত নকশা। ফন্ট পেলোড: 2.6 KB

    https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:FILL,ROND@0..1,100&icon_names=home,palette,settings&display=block

ফন্ট স্ব-হোস্টিং

সম্পদটি কখন আপডেট করবেন তা নির্ধারণ করতে আপনার নিয়ন্ত্রণ করা একটি অবস্থানে আইকন ফন্ট হোস্ট করুন। উদাহরণস্বরূপ যদি URLটি https://example.com/material-symbols.woff হয়, তাহলে নিম্নলিখিত CSS নিয়ম যোগ করুন:

@font-face {
  font-family: 'Material Symbols Outlined';
  font-style: normal;
  src: url(https://example.com/material-symbols.woff) format('woff');
}

সঠিকভাবে ফন্ট রেন্ডার করতে, আইকন রেন্ডার করার জন্য CSS নিয়ম ঘোষণা করুন। এই নিয়মগুলি সাধারণত Google Fonts API স্টাইলশীটের অংশ হিসাবে পরিবেশন করা হয়, কিন্তু স্ব-হোস্টিং করার সময় আপনার প্রকল্পগুলিতে ম্যানুয়ালি অন্তর্ভুক্ত করা প্রয়োজন:

.material-symbols-outlined {
  font-family: 'Material Symbols Outlined';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;  /* Preferred icon size */
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;
}

HTML এ আইকন ব্যবহার করা

উপরে প্রদত্ত উদাহরণগুলি ligatures নামক একটি টাইপোগ্রাফিক বৈশিষ্ট্য ব্যবহার করে, যা একটি আইকন গ্লিফকে এর পাঠ্য নাম ব্যবহার করে রেন্ডার করার অনুমতি দেয়। ওয়েব ব্রাউজার স্বয়ংক্রিয়ভাবে টেক্সট লিগ্যাচারটিকে আইকন ভেক্টর দিয়ে প্রতিস্থাপন করে এবং সমতুল্য সংখ্যাসূচক অক্ষর রেফারেন্সের চেয়ে আরও পাঠযোগ্য কোড প্রদান করে। উদাহরণস্বরূপ, আপনার HTML এ আপনার কাছে একটি আইকন প্রতিনিধিত্ব করার জন্য arrow_forward থাকবে, &#xE5C8; . অন্যান্য আইকনের জন্য, আইকনের নামের সাপের কেস ব্যবহার করুন (অর্থাৎ আন্ডারস্কোর দিয়ে স্পেস প্রতিস্থাপন করুন)।

এই বৈশিষ্ট্যটি ডেস্কটপ এবং মোবাইল উভয় ডিভাইসেই বেশিরভাগ আধুনিক ব্রাউজারে সমর্থিত। আপনার ব্যবহারকারীরা লিগ্যাচার প্রক্রিয়া করতে সক্ষম হবে কিনা তা দেখতে আমি কি ব্যবহার করতে পারি এর লিগ্যাচার সমর্থন দেখুন, সম্ভবত তারা করতে পারে।

আপনি যদি লিগ্যাচার সমর্থন করে না এমন ব্রাউজারগুলিকে সমর্থন করতে চান তবে নীচের উদাহরণের মতো সংখ্যাসূচক অক্ষর রেফারেন্স (ওরফে কোডপয়েন্ট) ব্যবহার করে আইকনগুলি নির্দিষ্ট করুন:

যেকোন আইকন নির্বাচন করে এবং আইকন ফন্ট প্যানেলটি খোলার মাধ্যমে উপাদান প্রতীক লাইব্রেরিতে আইকনের নাম এবং কোডপয়েন্ট উভয়ই খুঁজুন। প্রতিটি আইকন ফন্টের Google ফন্ট গিট রিপোজিটরিতে একটি কোডপয়েন্ট ইনডেক্স থাকে যা নাম এবং অক্ষর কোডের সম্পূর্ণ সেট দেখায়।

মেটেরিয়াল ডিজাইনে স্টাইলিং আইকন

এই আইকনগুলি মেটেরিয়াল ডিজাইনের নির্দেশিকা অনুসরণ করার জন্য ডিজাইন করা হয়েছে এবং প্রস্তাবিত আইকনের আকার এবং রঙ ব্যবহার করার সময় এগুলি সবচেয়ে ভাল দেখায়৷ নীচের শৈলীগুলি আমাদের প্রস্তাবিত আকার, রঙ এবং কার্যকলাপের অবস্থাগুলি প্রয়োগ করা সহজ করে তোলে।

অ্যান্ড্রয়েডে ব্যবহার করুন

ম্যাটেরিয়াল সিম্বল লাইব্রেরিতে, সমস্ত আইকন ভেক্টর অঙ্কনযোগ্য বিন্যাসে রয়েছে। আরও জানতে, অ্যান্ড্রয়েড ভেক্টর অ্যাসেট স্টুডিও ডকুমেন্টেশন দেখুন।

iOS এ ব্যবহার করুন

আইকনগুলি অ্যাপল সিম্বল ফরম্যাটেও পাওয়া যায়। তাদের সম্পর্কে আরও জানতে, অফিসিয়াল অ্যাপল সিম্বল ওভারভিউ এবং ব্যবহারের নির্দেশিকা দেখুন।

ফ্লটারে ব্যবহার করুন

উপাদান প্রতীকের জন্য ফ্লটার সমর্থন পরিকল্পনা করা হয়েছে। আপডেটের জন্য সাথে থাকুন।