میں نے سی ایس ایس کسٹم پراپرٹیز سے آئکن سسٹم کیسے بنایا

SVG ویب سائٹ پر شبیہیں کے لیے بہترین فارمیٹ ہے، وہاں موجود ہے۔ اس کے بارے میں کوئی شک نہیں. یہ آپ کو اسکرین پکسل کی کثافت سے قطع نظر تیز آئیکنز رکھنے کی اجازت دیتا ہے، آپ ہوور پر SVG کی طرزیں تبدیل کر سکتے ہیں اور آپ CSS یا JavaScript کے ساتھ آئیکنز کو متحرک بھی کر سکتے ہیں۔

صفحہ پر SVG کو شامل کرنے کے بہت سے طریقے ہیں اور ہر تکنیک کے اپنے فوائد اور نقصانات ہیں۔ پچھلے دو سالوں سے، میں اپنے سی ایس ایس میں اپنے آئیکنز کو براہ راست درآمد کرنے اور اپنے ایچ ٹی ایم ایل مارک اپ کو خراب کرنے سے بچنے کے لیے ایک Sass فنکشن استعمال کر رہا ہوں۔

میرے پاس اپنے شبیہیں کے تمام سورس کوڈز کے ساتھ ایک Sass فہرست ہے۔ ہر آئیکن کو پھر ڈیٹا URI میں Sass فنکشن کے ساتھ انکوڈ کیا جاتا ہے اور a میں محفوظ کیا جاتا ہے۔ اپنی مرضی کے مطابق جائیداد صفحہ کی جڑ پر۔

TL؛ ڈاکٹر

میرے پاس آپ کے لیے یہاں ایک Sass فنکشن ہے جو آپ کے CSS میں براہ راست SVG آئیکن لائبریری بناتا ہے۔

SVG سورس کوڈ Sass فنکشن کے ساتھ مرتب کیا گیا ہے جو انہیں ڈیٹا URI میں انکوڈ کرتا ہے اور پھر آئیکنز کو CSS حسب ضرورت خصوصیات میں اسٹور کرتا ہے۔ اس کے بعد آپ اپنے CSS میں کہیں بھی کسی بھی آئیکن کو استعمال کر سکتے ہیں جیسے کہ یہ کوئی بیرونی تصویر ہو۔

یہ ایک مثال ہے جو براہ راست میری ذاتی سائٹ کے کوڈ سے نکالی گئی ہے:

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

ڈیمو

ساس ساخت

/* 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 کے مخصوص حصے کو متحرک یا اپ ڈیٹ نہیں کر سکتے۔
• آپ کے پاس جتنے زیادہ آئیکنز ہوں گے، آپ کی سی ایس ایس کی مرتب کردہ فائل اتنی ہی بھاری ہوگی۔

میں زیادہ تر اس تکنیک کو لوگو یا عکاسی کے بجائے شبیہیں کے لیے استعمال کرتا ہوں۔ ایک انکوڈ شدہ SVG ہمیشہ اس کی اصل فائل سے زیادہ بھاری ہوتا ہے، اس لیے میں اب بھی اپنے پیچیدہ SVG کو کسی بیرونی فائل کے ساتھ لوڈ کرتا ہوں یا تو ٹیگ کریں یا میرے سی ایس ایس کے ساتھ url(path/to/file.svg).

ڈیٹا URI میں SVG کو انکوڈنگ کرنا

اپنے SVG کو ڈیٹا URIs کے بطور انکوڈ کرنا کوئی نئی بات نہیں ہے۔ حقیقت میں Chris Coyier نے ایک پوسٹ لکھی۔ اس کے بارے میں 10 سال پہلے یہ بتانے کے لیے کہ اس تکنیک کو کیسے استعمال کیا جائے اور آپ کو اسے کیوں استعمال کرنا چاہیے (یا نہیں کرنا چاہیے)۔

ڈیٹا URI کے ساتھ آپ کے CSS میں SVG استعمال کرنے کے دو طریقے ہیں:

• ایک بیرونی تصویر کے طور پر (استعمال کرتے ہوئے background-image,سرحدی تصویر,فہرست طرز کی تصویر،…)
• ایک چھدم عنصر کے مواد کے طور پر (جیسے ::before or ::after)

یہاں ایک بنیادی مثال ہے جس میں دکھایا گیا ہے کہ آپ ان دو طریقوں کو کس طرح استعمال کرتے ہیں:

اس خاص نفاذ کے ساتھ اہم مسئلہ یہ ہے کہ جب بھی آپ کو کسی نئے آئیکن کی ضرورت ہو آپ کو SVG کو دستی طور پر تبدیل کرنا پڑتا ہے اور آپ کے CSS میں ناقابل پڑھے جانے والے کوڈ کی اس لمبی تار کا ہونا واقعی خوشگوار نہیں ہے۔

یہ وہ جگہ ہے جہاں ساس بچاؤ کے لئے آتا ہے!

Sass فنکشن کا استعمال کرنا

Sass کا استعمال کر کے، ہم اپنے SVG کے سورس کوڈ کو براہ راست اپنے کوڈ بیس میں کاپی کر کے اپنی زندگی کو آسان بنا سکتے ہیں، براؤزر کی خرابی سے بچنے کے لیے Sass کو انہیں صحیح طریقے سے انکوڈ کرنے کی اجازت دے سکتے ہیں۔

یہ حل زیادہ تر تھری اسپاٹ میڈیا کے ذریعہ تیار کردہ موجودہ فنکشن سے متاثر ہے اور اس میں دستیاب ہے۔ ان کا ذخیرہ.

اس تکنیک کے چار مراحل یہ ہیں:

• درج کردہ اپنے تمام SVG آئیکنز کے ساتھ ایک متغیر بنائیں۔
• ان تمام حروف کی فہرست بنائیں جنہیں ڈیٹا URI کے لیے چھوڑنے کی ضرورت ہے۔
• SVGs کو ڈیٹا URI فارمیٹ میں انکوڈ کرنے کے لیے ایک فنکشن نافذ کریں۔
• اپنے کوڈ میں اپنے فنکشن کا استعمال کریں۔

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);
  }
}

اگر آپ نے ان اقدامات پر عمل کیا ہے تو، ساس کو آپ کے کوڈ کو صحیح طریقے سے مرتب کرنا چاہیے اور درج ذیل کو آؤٹ پٹ کرنا چاہیے۔

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 ");
}		

کسٹم پراپرٹیز

اب لاگو ہونے والا ساس svg() فنکشن بہت اچھا کام کرتا ہے۔ لیکن اس کی سب سے بڑی خامی یہ ہے کہ ایک آئیکن جس کی آپ کے کوڈ میں متعدد جگہوں پر ضرورت ہے اسے ڈپلیکیٹ کیا جائے گا اور آپ کی مرتب کردہ CSS فائل کا وزن بہت زیادہ بڑھ سکتا ہے!

اس سے بچنے کے لیے، ہم اپنے تمام شبیہیں اس میں محفوظ کر سکتے ہیں۔ سی ایس ایس متغیرات اور ہر بار انکوڈ شدہ URI کو آؤٹ پٹ کرنے کے بجائے متغیر کا حوالہ استعمال کریں۔

ہم وہی کوڈ رکھیں گے جو ہمارے پاس پہلے تھا، لیکن اس بار ہم سب سے پہلے 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() سی ایس ایس فلٹر۔ ہم اس کے ساتھ بھی کھیل سکتے ہیں۔ hue-rotate() فلٹر.

یہی ہے!

مجھے امید ہے کہ آپ کو یہ چھوٹا مددگار فنکشن آپ کے اپنے پروجیکٹس میں کام آئے گا۔ مجھے بتائیں کہ آپ اس نقطہ نظر کے بارے میں کیا سوچتے ہیں — مجھے یہ جاننے میں دلچسپی ہوگی کہ آپ اسے کیسے بہتر بنائیں گے یا اس سے مختلف طریقے سے نمٹیں گے!