كيف صنعت نظام أيقونات من خصائص CSS المخصصة

SVG هو أفضل تنسيق للرموز على موقع الويب لا شك في ذلك. يتيح لك الحصول على رموز حادة بغض النظر عن كثافة بكسل الشاشة ، ويمكنك تغيير أنماط SVG عند التمرير ويمكنك حتى تحريك الرموز باستخدام CSS أو JavaScript.

هناك العديد من الطرق لتضمين SVG في الصفحة ولكل أسلوب مزاياه وعيوبه. على مدار العامين الماضيين ، كنت أستخدم وظيفة Sass لاستيراد أيقوناتي مباشرة في CSS وتجنب الاضطرار إلى إفساد ترميز HTML الخاص بي.

لدي قائمة Sass تحتوي على جميع أكواد مصدر أيقوناتي. يتم بعد ذلك ترميز كل رمز في معرّف بيانات URI بوظيفة Sass ويتم تخزينه في ملف خاصية مخصصة في جذر الصفحة.

TL؛ DR

ما لدي من أجلك هنا هو وظيفة Sass التي تنشئ مكتبة أيقونات SVG مباشرة في CSS الخاص بك.

يتم تجميع التعليمات البرمجية المصدر لـ 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);
}		

هذه التقنية لها إيجابيات وسلبيات ، لذا يرجى أخذها في الاعتبار قبل تنفيذ هذا الحل في مشروعك:

الايجابيات

• لا توجد طلبات HTTP لملفات SVG.
• يتم تخزين جميع الرموز في مكان واحد.
• إذا كنت بحاجة إلى تحديث رمز ، فلا يتعين عليك مراجعة كل ملف من ملفات قوالب HTML.
• يتم تخزين الرموز مؤقتًا مع CSS الخاص بك.
• يمكنك تحرير التعليمات البرمجية المصدر للرموز يدويًا.
• لا يلوث HTML الخاص بك عن طريق إضافة المزيد من الترميز.
• لا يزال بإمكانك تغيير اللون أو بعض جوانب الرمز باستخدام CSS.

سلبيات

• لا يمكنك تحريك أو تحديث جزء معين من SVG باستخدام CSS.
• كلما زاد عدد الرموز لديك ، زاد حجم ملف CSS المترجم.

أنا أستخدم هذه التقنية في الغالب للأيقونات بدلاً من الشعارات أو الرسوم التوضيحية. سيكون ملف SVG المشفر دائمًا أثقل من ملفه الأصلي ، لذلك ما زلت أحمل ملف SVG المعقد بملف خارجي إما باستخدام علامة أو في CSS الخاص بي مع url(path/to/file.svg).

ترميز SVG في بيانات URI

ترميز SVG الخاص بك كعناوين URI للبيانات ليس جديدًا. في الواقع كتب كريس كويير منشورًا حول هذا الموضوع منذ أكثر من 10 سنوات لشرح كيفية استخدام هذه التقنية ولماذا يجب (أو لا يجب) استخدامها.

هناك طريقتان لاستخدام SVG في CSS مع عنوان URI للبيانات:

• كصورة خارجية (باستخدام background-image,صورة الحدود,قائمة نمط الصورة ، ...)
• كمحتوى لعنصر زائف (على سبيل المثال ::before or ::after)

فيما يلي مثال أساسي يوضح كيفية استخدام هاتين الطريقتين:

تكمن المشكلة الرئيسية في هذا التنفيذ المعين في أنه يتعين عليك تحويل SVG يدويًا في كل مرة تحتاج فيها إلى رمز جديد وليس من الجيد حقًا أن يكون لديك هذه السلسلة الطويلة من التعليمات البرمجية غير القابلة للقراءة في CSS.

هذا هو المكان الذي يأتي فيه ساس لإنقاذ!

باستخدام وظيفة Sass

باستخدام Sass ، يمكننا أن نجعل حياتنا أكثر بساطة عن طريق نسخ الكود المصدري الخاص بـ SVG مباشرة في قاعدة الكود لدينا ، مما يسمح لـ Sass بترميزها بشكل صحيح لتجنب أي خطأ في المتصفح.

هذا الحل مستوحى في الغالب من وظيفة موجودة تم تطويرها بواسطة Threespot Media ومتاحة في مستودعهم.

فيما يلي الخطوات الأربع لهذه التقنية:

• قم بإنشاء متغير مع سرد جميع رموز 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);
  }
}

إذا اتبعت هذه الخطوات ، فيجب على 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 واستخدم مرجعًا للمتغير بدلاً من إخراج 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 بشكل صحيح. أداتي المفضلة هي Jake Archibald SVGOMG - ببساطة اسحب ملفك هناك وانسخ الكود الناتج.

المكافأة: تحديث الرمز عند التمرير

باستخدام هذه التقنية ، لا يمكننا الاختيار باستخدام أجزاء معينة من CSS من SVG. على سبيل المثال ، لا توجد طريقة لتغيير ملف fill لون الرمز عندما يمرر المستخدم الماوس. ولكن هناك بعض الحيل التي يمكننا استخدامها مع CSS حتى نبقى قادرين على تعديل مظهر الرمز الخاص بنا.

على سبيل المثال ، إذا كان لديك رمز أسود وتريد أن يكون أبيض عند التحويم ، فيمكنك استخدام invert() مرشح CSS. يمكننا أيضًا اللعب مع hue-rotate() منقي.

هذا هو!

آمل أن تجد هذه الوظيفة المساعدة الصغيرة في متناول يديك في مشاريعك الخاصة. اسمحوا لي أن أعرف ما هو رأيك في النهج - سأكون مهتمًا بمعرفة كيف يمكنك تحسين ذلك أو التعامل معه بشكل مختلف!