কিভাবে আমি CSS কাস্টম বৈশিষ্ট্য থেকে একটি আইকন সিস্টেম তৈরি করেছি

SVG হল একটি ওয়েবসাইটে আইকনগুলির জন্য সেরা বিন্যাস, সেখানে আছে এই ব্যাপারে কোন সন্দেহ নেই. এটি আপনাকে স্ক্রিনের পিক্সেলের ঘনত্ব যাই হোক না কেন তীক্ষ্ণ আইকন রাখতে দেয়, আপনি হোভারে SVG-এর স্টাইল পরিবর্তন করতে পারেন এবং এমনকি আপনি CSS বা JavaScript দিয়ে আইকনগুলিকে অ্যানিমেট করতে পারেন।

একটি পৃষ্ঠায় একটি SVG অন্তর্ভুক্ত করার অনেক উপায় রয়েছে এবং প্রতিটি কৌশলের নিজস্ব সুবিধা এবং অসুবিধা রয়েছে৷ গত কয়েক বছর ধরে, আমি আমার সিএসএস-এ সরাসরি আমার আইকন আমদানি করতে এবং আমার এইচটিএমএল মার্কআপ এড়াতে একটি Sass ফাংশন ব্যবহার করছি।

আমার আইকনগুলির সমস্ত উত্স কোড সহ আমার কাছে একটি Sass তালিকা রয়েছে। প্রতিটি আইকন তারপর একটি Sass ফাংশন সহ একটি ডেটা URI-তে এনকোড করা হয় এবং a তে সংরক্ষণ করা হয় কাস্টম সম্পত্তি পৃষ্ঠার মূলে।

TL; ডিআর

এখানে আপনার জন্য আমার কাছে একটি Sass ফাংশন রয়েছে যা সরাসরি আপনার CSS-এ একটি SVG আইকন লাইব্রেরি তৈরি করে।

SVG সোর্স কোড Sass ফাংশনের সাথে কম্পাইল করা হয় যা সেগুলিকে ডেটা URI-তে এনকোড করে এবং তারপরে আইকনগুলিকে CSS কাস্টম বৈশিষ্ট্যে সংরক্ষণ করে। তারপরে আপনি আপনার সিএসএস-এর যে কোনও জায়গায় যে কোনও আইকন ব্যবহার করতে পারেন যেন এটি একটি বাহ্যিক চিত্র।

এটি আমার ব্যক্তিগত সাইটের কোড থেকে সরাসরি টানা একটি উদাহরণ:

.c-filters__summary h2:after {
  content: var(--svg-down-arrow);
  position: relative;
  top: 2px;
  margin-left: auto;
  animation: closeSummary .25s ease-out;
}

ডেমো

Sass গঠন

/* All the icons source codes */
$svg-icons: (
  burger: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0...'
);

/* Sass function to encode the icons */
@function svg($name) {
  @return url('data:image/svg+xml, #{$encodedSVG} ');
}

/* Store each icon into a custom property */
:root {
  @each $name, $code in $svg-icons {
    --svg-#{$name}: #{svg($name)};
  }
}

/* Append a burger icon in my button */
.menu::after {
  content: var(--svg-burger);
}		

এই কৌশলটির সুবিধা এবং অসুবিধা উভয়ই রয়েছে, তাই আপনার প্রকল্পে এই সমাধানটি বাস্তবায়ন করার আগে অনুগ্রহ করে সেগুলি বিবেচনা করুন:

ভালো দিক

• SVG ফাইলগুলির জন্য কোনও HTTP অনুরোধ নেই৷
• সমস্ত আইকন এক জায়গায় সংরক্ষণ করা হয়.
• আপনি যদি একটি আইকন আপডেট করতে চান, তাহলে আপনাকে প্রতিটি HTML টেমপ্লেট ফাইলের উপর যেতে হবে না।
• আইকনগুলি আপনার সিএসএসের সাথে ক্যাশে করা হয়।
• আপনি ম্যানুয়ালি আইকনগুলির সোর্স কোড সম্পাদনা করতে পারেন।
• এটি অতিরিক্ত মার্কআপ যোগ করে আপনার HTML কে দূষিত করে না।
• আপনি এখনও CSS দিয়ে আইকনের রঙ বা কিছু দিক পরিবর্তন করতে পারেন।

মন্দ দিক

• আপনি CSS দিয়ে SVG-এর একটি নির্দিষ্ট অংশকে অ্যানিমেট বা আপডেট করতে পারবেন না।
• আপনার কাছে যত বেশি আইকন থাকবে, আপনার CSS কম্পাইল করা ফাইল তত ভারী হবে।

আমি বেশিরভাগই লোগো বা চিত্রের পরিবর্তে আইকনগুলির জন্য এই কৌশলটি ব্যবহার করি। একটি এনকোড করা SVG সর্বদা তার আসল ফাইলের চেয়ে ভারী হতে চলেছে, তাই আমি এখনও আমার জটিল SVG একটি বহিরাগত ফাইলের সাথে লোড করি ট্যাগ বা আমার সিএসএস এর সাথে url(path/to/file.svg).

ডেটা URI-তে SVG এনকোডিং

ডেটা URI হিসাবে আপনার SVG এনকোড করা নতুন নয়৷ আসলে Chris Coyier একটি পোস্ট লিখেছেন এই কৌশলটি কীভাবে ব্যবহার করবেন এবং কেন এটি ব্যবহার করা উচিত (বা উচিত নয়) তা ব্যাখ্যা করার জন্য 10 বছর আগে এটি সম্পর্কে।

ডেটা URI সহ আপনার CSS-এ SVG ব্যবহার করার দুটি উপায় রয়েছে:

• একটি বাহ্যিক চিত্র হিসাবে (ব্যবহার করে background-image,সীমান্ত-চিত্র,তালিকা-শৈলী-চিত্র,…)
• একটি ছদ্ম উপাদানের বিষয়বস্তু হিসাবে (যেমন ::before or ::after)

এখানে একটি মৌলিক উদাহরণ দেখানো হয়েছে যে আপনি কীভাবে এই দুটি পদ্ধতি ব্যবহার করবেন:

এই বিশেষ বাস্তবায়নের প্রধান সমস্যা হল যে প্রতিবার আপনার একটি নতুন আইকন প্রয়োজন হলে আপনাকে SVG ম্যানুয়ালি রূপান্তর করতে হবে এবং আপনার CSS-এ অপঠিত কোডের এই দীর্ঘ স্ট্রিং থাকা সত্যিই সুখকর নয়।

এই যেখানে Sass উদ্ধার আসে!

একটি Sass ফাংশন ব্যবহার করে

Sass ব্যবহার করে, আমরা আমাদের কোডবেসে সরাসরি আমাদের SVG-এর সোর্স কোড কপি করে আমাদের জীবনকে সহজ করে তুলতে পারি, ব্রাউজার ত্রুটি এড়াতে Sass-কে সঠিকভাবে এনকোড করতে দিয়ে।

এই সমাধানটি বেশিরভাগই থ্রিস্পট মিডিয়া দ্বারা তৈরি এবং উপলব্ধ একটি বিদ্যমান ফাংশন দ্বারা অনুপ্রাণিত তাদের ভান্ডার.

এখানে এই কৌশলটির চারটি ধাপ রয়েছে:

• আপনার তালিকাভুক্ত সমস্ত SVG আইকনগুলির সাথে একটি ভেরিয়েবল তৈরি করুন৷
• ডেটা URI-এর জন্য যে সমস্ত অক্ষরগুলি এড়িয়ে যেতে হবে তার তালিকা করুন৷
• একটি ডেটা URI ফরম্যাটে SVG এনকোড করার জন্য একটি ফাংশন প্রয়োগ করুন।
• আপনার কোড আপনার ফাংশন ব্যবহার করুন.

1. আইকন তালিকা

/**
* Add all the icons of your project in this Sass list
*/
$svg-icons: (
  burger: ''
);

2. পালিয়ে যাওয়া অক্ষরের তালিকা

/**
* Characters to escape from SVGs
* This list allows you to have inline CSS in your SVG code as well
*/
$fs-escape-chars: (
  ' ': '%20',
  ''': '%22',
  '"': '%27',
  '#': '%23',
  '/': '%2F',
  ':': '%3A',
  '(': '%28',
  ')': '%29',
  '%': '%25',
  '': '%3E',
  '': '%5C',
  '^': '%5E',
  '{': '%7B',
  '|': '%7C',
  '}': '%7D',
);

3. এনকোড ফাংশন

/**
* You can call this function by using `svg(nameOfTheSVG)`
*/
@function svg($name) {
  // Check if icon exists
  @if not map-has-key($svg-icons, $name) {
    @error 'icon “#{$name}” does not exists in $svg-icons map';
    @return false;
  }

  // Get icon data
  $icon-map: map-get($svg-icons, $name);

  $escaped-string: '';
  $unquote-icon: unquote($icon-map);
  // Loop through each character in string
  @for $i from 1 through str-length($unquote-icon) {
    $char: str-slice($unquote-icon, $i, $i);

    // Check if character is in symbol map
    $char-lookup: map-get($fs-escape-chars, $char);

    // If it is, use escaped version
    @if $char-lookup != null {
        $char: $char-lookup;
    }

    // Append character to escaped string
    $escaped-string: $escaped-string + $char;
  }

  // Return inline SVG data
  @return url('data:image/svg+xml, #{$escaped-string} ');
}		

4. আপনার পৃষ্ঠায় একটি SVG যোগ করুন

button {
  &::after {
    /* Import inline SVG */
    content: svg(burger);
  }
}

আপনি যদি এই পদক্ষেপগুলি অনুসরণ করেন, Sass আপনার কোডটি সঠিকভাবে কম্পাইল করুন এবং নিম্নলিখিতগুলি আউটপুট করুন:

button::after {
  content: url("data:image/svg+xml, %3Csvg%20xmlns=%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox=%270%200%2024.8%2018.92%27%20width=%2724.8%27%20height=%2718.92%27%3E%3Cpath%20d=%27M23.8,9.46H1m22.8,8.46H1M23.8,1H1%27%20fill=%27none%27%20stroke=%27%23000%27%20stroke-linecap=%27round%27%20stroke-width=%272%27%2F%3E%3C%2Fsvg%3E ");
}		

কাস্টম বৈশিষ্ট্য

এখন বাস্তবায়িত Sass svg() ফাংশন মহান কাজ করে। কিন্তু এর সবচেয়ে বড় ত্রুটি হল আপনার কোডের একাধিক জায়গায় প্রয়োজন এমন একটি আইকন ডুপ্লিকেট করা হবে এবং আপনার কম্পাইল করা CSS ফাইলের ওজন অনেক বাড়িয়ে দিতে পারে!

এটি এড়াতে, আমরা আমাদের সমস্ত আইকন সংরক্ষণ করতে পারি CSS ভেরিয়েবল এবং প্রতিবার এনকোড করা ইউআরআই আউটপুট করার পরিবর্তে ভেরিয়েবলের একটি রেফারেন্স ব্যবহার করুন।

আমরা আগের কোডটি রাখব, তবে এবার আমরা প্রথমে Sass তালিকা থেকে আমাদের ওয়েবপৃষ্ঠার রুটে সমস্ত আইকন আউটপুট করব:

/**
  * Convert all icons into custom properties
  * They will be available to any HTML tag since they are attached to the :root
  */

:root {
  @each $name, $code in $svg-icons {
    --svg-#{$name}: #{svg($name)};
  }
}

এখন, পরিবর্তে কল svg() ফাংশন যখনই আমাদের একটি আইকনের প্রয়োজন হয়, তখন আমাদের ভেরিয়েবলটি ব্যবহার করতে হবে যা দিয়ে তৈরি করা হয়েছিল --svg উপসর্গ

button::after {
  /* Import inline SVG */
  content: var(--svg-burger);
}

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

আপনি যে SVG ব্যবহার করছেন তার সোর্স কোডে এই কৌশলটি কোনো অপ্টিমাইজেশন প্রদান করে না। নিশ্চিত করুন যে আপনি অপ্রয়োজনীয় কোড ত্যাগ করবেন না; অন্যথায় সেগুলিও এনকোড করা হবে এবং আপনার CSS ফাইলের আকার বৃদ্ধি করবে।

তুমি পরীক্ষা করে দেখতে পারো এই মহান তালিকা কিভাবে আপনার SVG সঠিকভাবে অপ্টিমাইজ করা যায় তার টুল এবং তথ্য। আমার প্রিয় টুল জ্যাক আর্চিবল্ডস এসভিজিওএমজি - কেবল সেখানে আপনার ফাইলটি টেনে আনুন এবং আউটপুট কোডটি অনুলিপি করুন।

বোনাস: হোভারে আইকন আপডেট করা হচ্ছে

এই কৌশলের সাহায্যে, আমরা SVG-এর CSS নির্দিষ্ট অংশগুলির সাথে নির্বাচন করতে পারি না। উদাহরণস্বরূপ, পরিবর্তন করার কোন উপায় নেই fill ব্যবহারকারী যখন বোতামটি ঘোরায় তখন আইকনের রঙ। কিন্তু কিছু কৌশল রয়েছে যা আমরা CSS এর সাথে ব্যবহার করতে পারি যা এখনও আমাদের আইকনের চেহারা পরিবর্তন করতে সক্ষম হতে পারে।

উদাহরণস্বরূপ, যদি আপনার একটি কালো আইকন থাকে এবং আপনি এটি হোভারে সাদা রাখতে চান, আপনি ব্যবহার করতে পারেন invert() CSS ফিল্টার। আমরা এর সাথেও খেলতে পারি hue-rotate() ছাঁকনি.

এটাই!

আমি আশা করি আপনি এই সামান্য সহায়ক ফাংশনটি আপনার নিজের প্রকল্পগুলিতে সহজে পাবেন। আপনি পদ্ধতি সম্পর্কে কি মনে করেন তা আমাকে জানান — আপনি কীভাবে এটিকে আরও ভাল করবেন বা এটিকে ভিন্নভাবে মোকাবেলা করবেন তা জানতে আগ্রহী হব!