मैंने सीएसएस कस्टम गुणों से एक आइकन सिस्टम कैसे बनाया

एसवीजी वेबसाइट पर आइकन के लिए सबसे अच्छा प्रारूप है, वहाँ है उसके बारे मे कोई शक नहीं. यह आपको स्क्रीन पिक्सेल घनत्व से कोई फर्क नहीं पड़ता है, आप तेज आइकन रखने की अनुमति देते हैं, आप होवर पर एसवीजी की शैलियों को बदल सकते हैं और आप सीएसएस या जावास्क्रिप्ट के साथ आइकन भी एनिमेट कर सकते हैं।

किसी पृष्ठ पर SVG को शामिल करने के कई तरीके हैं और प्रत्येक तकनीक के अपने फायदे और नुकसान हैं। पिछले कुछ वर्षों से, मैं अपने सीएसएस में सीधे अपने आइकन आयात करने और अपने एचटीएमएल मार्कअप को गड़बड़ करने से बचने के लिए एक सैस फ़ंक्शन का उपयोग कर रहा हूं।

मेरे पास मेरे आइकन के सभी स्रोत कोड के साथ एक Sass सूची है। प्रत्येक आइकन को तब डेटा URI में एक Sass फ़ंक्शन के साथ एन्कोड किया जाता है और 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;
}

डेमो

सास संरचना

/* 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 के साथ SVG के किसी विशिष्ट भाग को चेतन या अद्यतन नहीं कर सकते।
• आपके पास जितने अधिक आइकन होंगे, आपकी सीएसएस संकलित फ़ाइल उतनी ही भारी होगी।

मैं ज्यादातर इस तकनीक का उपयोग लोगो या चित्र के बजाय आइकन के लिए करता हूं। एक एन्कोडेड एसवीजी हमेशा अपनी मूल फ़ाइल से भारी होने वाला है, इसलिए मैं अभी भी अपने जटिल एसवीजी को बाहरी फाइल के साथ या तो एक के साथ लोड करता हूं टैग या मेरे सीएसएस में url(path/to/file.svg).

डेटा यूआरआई में एसवीजी एन्कोडिंग

अपने एसवीजी को डेटा यूआरआई के रूप में एन्कोड करना कोई नई बात नहीं है। वास्तव में Chris Coyier ने एक पोस्ट लिखा इसके बारे में 10 साल पहले यह समझाने के लिए कि इस तकनीक का उपयोग कैसे करें और आपको इसका उपयोग क्यों करना चाहिए (या नहीं करना चाहिए)।

आपके CSS में डेटा URI के साथ SVG का उपयोग करने के दो तरीके हैं:

• बाहरी छवि के रूप में (का उपयोग करके background-image,सीमा-छवि,सूची-शैली-छवि,…)
• एक छद्म तत्व की सामग्री के रूप में (जैसे ::before or ::after)

यहां एक बुनियादी उदाहरण दिया गया है जिसमें दिखाया गया है कि आप उन दो विधियों का उपयोग कैसे करते हैं:

इस विशेष कार्यान्वयन के साथ मुख्य मुद्दा यह है कि आपको हर बार एक नए आइकन की आवश्यकता होने पर एसवीजी को मैन्युअल रूप से परिवर्तित करना होगा और आपके सीएसएस में अपठनीय कोड की यह लंबी स्ट्रिंग होना वास्तव में सुखद नहीं है।

यह वह जगह है जहाँ Sass बचाव के लिए आता है!

Sass फ़ंक्शन का उपयोग करना

Sass का उपयोग करके, हम अपने SVG के स्रोत कोड को सीधे अपने कोडबेस में कॉपी करके अपने जीवन को सरल बना सकते हैं, जिससे Sass किसी भी ब्राउज़र त्रुटि से बचने के लिए उन्हें ठीक से एन्कोड कर सकता है।

यह समाधान ज्यादातर थ्रीस्पॉट मीडिया द्वारा विकसित और उपलब्ध मौजूदा फ़ंक्शन से प्रेरित है उनका भंडार.

इस तकनीक के चार चरण इस प्रकार हैं:

• सूचीबद्ध अपने सभी एसवीजी आइकन के साथ एक वैरिएबल बनाएं।
• डेटा यूआरआई के लिए छोड़े जाने वाले सभी वर्णों की सूची बनाएं।
• एसवीजी को डेटा यूआरआई प्रारूप में एन्कोड करने के लिए एक फ़ंक्शन कार्यान्वित करें।
• अपने कोड में अपने फ़ंक्शन का प्रयोग करें।

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. अपने पेज में एक एसवीजी जोड़ें

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 फ़ाइल का वजन बहुत बढ़ा सकता है!

इससे बचने के लिए हम अपने सभी आइकॉन को में स्टोर कर सकते हैं सीएसएस चर और हर बार एन्कोडेड यूआरआई को आउटपुट करने के बजाय वेरिएबल के संदर्भ का उपयोग करें।

हम वही कोड रखेंगे जो हमारे पास पहले था, लेकिन इस बार हम सबसे पहले 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);
}

अपने एसवीजी का अनुकूलन

यह तकनीक आपके द्वारा उपयोग किए जा रहे एसवीजी के स्रोत कोड पर कोई अनुकूलन प्रदान नहीं करती है। सुनिश्चित करें कि आप अनावश्यक कोड नहीं छोड़ते हैं; अन्यथा वे भी एन्कोडेड हो जाएंगे और आपकी सीएसएस फ़ाइल का आकार बढ़ा देंगे।

आप देख सकते हैं यह महान सूची अपने एसवीजी को ठीक से अनुकूलित करने के तरीके के बारे में उपकरण और जानकारी। मेरा पसंदीदा उपकरण जेक आर्चीबाल्ड है एसवीजीओएमजी - बस अपनी फाइल को वहां खींचें और आउटपुट कोड को कॉपी करें।

बोनस: होवर पर आइकन अपडेट करना

इस तकनीक के साथ, हम एसवीजी के सीएसएस विशिष्ट भागों के साथ चयन नहीं कर सकते हैं। उदाहरण के लिए, इसे बदलने का कोई तरीका नहीं है fill जब उपयोगकर्ता बटन पर होवर करता है तो आइकन का रंग। लेकिन कुछ तरकीबें हैं जिनका उपयोग हम सीएसएस के साथ कर सकते हैं ताकि हम अभी भी अपने आइकन के रूप को संशोधित कर सकें।

उदाहरण के लिए, यदि आपके पास एक काला आइकन है और आप इसे होवर पर सफेद रखना चाहते हैं, तो आप इसका उपयोग कर सकते हैं invert() सीएसएस फ़िल्टर। हम के साथ भी खेल सकते हैं hue-rotate() फिल्टर।

बस!

मुझे आशा है कि आप इस छोटे से सहायक कार्य को अपनी परियोजनाओं में आसान पाएंगे। मुझे बताएं कि आप इस दृष्टिकोण के बारे में क्या सोचते हैं - मुझे यह जानने में दिलचस्पी होगी कि आप इसे कैसे बेहतर बनाएंगे या इससे अलग तरीके से निपटेंगे!