איך יצרתי מערכת אייקונים ממאפייני CSS מותאמים אישית

SVG הוא הפורמט הטוב ביותר עבור אייקונים באתר, יש אין ספק על זה. זה מאפשר לך לקבל סמלים חדים ללא קשר לצפיפות הפיקסלים של המסך, אתה יכול לשנות את הסגנונות של ה-SVG על ריחוף ואפילו אתה יכול להנפיש את הסמלים עם CSS או JavaScript.

ישנן דרכים רבות לכלול SVG בדף ולכל טכניקה יש יתרונות וחסרונות משלה. במשך השנים האחרונות, השתמשתי בפונקציית Sass כדי לייבא ישירות את הסמלים שלי ל-CSS שלי ולהימנע מהצורך לקלקל את סימון ה-HTML שלי.

יש לי רשימת Sass עם כל קודי המקור של הסמלים שלי. לאחר מכן כל אייקון מקודד לתוך URI נתונים עם פונקציית Sass ומאוחסן ב-a נכס מותאם אישית בשורש העמוד.

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

הַדגָמָה

מבנה 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);
}		

לטכניקה זו יש יתרונות וחסרונות, אז אנא קח אותם בחשבון לפני יישום פתרון זה בפרויקט שלך:

Pros

• אין בקשות 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 שלך. הכלי האהוב עליי הוא של ג'ייק ארצ'יבלד SVGOMG - פשוט גרור את הקובץ שלך לשם והעתק את הקוד שהופק.

בונוס: עדכון הסמל ברחף

בטכניקה זו, איננו יכולים לבחור עם CSS חלקים ספציפיים של ה-SVG. לדוגמה, אין דרך לשנות את fill צבע הסמל כאשר המשתמש מרחף על הלחצן. אבל יש כמה טריקים שאנחנו יכולים להשתמש בהם עם CSS כדי שעדיין נוכל לשנות את המראה של הסמל שלנו.

לדוגמה, אם יש לך סמל שחור ואתה רוצה שיהיה לבן על ריחוף, אתה יכול להשתמש ב- invert() מסנן CSS. אנחנו יכולים גם לשחק עם hue-rotate() לְסַנֵן.

זהו זה!

אני מקווה שתמצא את פונקציית העזר הקטנה הזו שימושית בפרויקטים שלך. תן לי לדעת מה אתה חושב על הגישה - אשמח לדעת איך תוכל לשפר את זה או להתמודד עם זה אחרת!