ฉันสร้างระบบไอคอนจากคุณสมบัติที่กำหนดเองของ 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);
}		

เทคนิคนี้มีทั้งข้อดีและข้อเสีย ดังนั้นโปรดพิจารณาก่อนนำโซลูชันนี้ไปใช้ในโครงการของคุณ:

ข้อดี

• ไม่มีคำขอ HTTP สำหรับไฟล์ SVG
• ไอคอนทั้งหมดถูกเก็บไว้ในที่เดียว
• หากคุณต้องการอัปเดตไอคอน คุณไม่จำเป็นต้องดูไฟล์เทมเพลต HTML แต่ละไฟล์
• ไอคอนจะถูกแคชพร้อมกับ CSS ของคุณ
• คุณสามารถแก้ไขซอร์สโค้ดของไอคอนได้ด้วยตนเอง
• ไม่ก่อให้เกิดมลพิษ HTML ของคุณโดยการเพิ่มมาร์กอัปพิเศษ
• คุณยังคงเปลี่ยนสีหรือบางส่วนของไอคอนได้ด้วย CSS

จุดด้อย

• คุณไม่สามารถทำให้เคลื่อนไหวหรืออัปเดตบางส่วนของ SVG ด้วย CSS
• ยิ่งคุณมีไอคอนมาก ไฟล์ที่คอมไพล์ CSS ของคุณก็จะยิ่งหนักขึ้นเท่านั้น

ฉันมักใช้เทคนิคนี้สำหรับไอคอนมากกว่าโลโก้หรือภาพประกอบ SVG ที่เข้ารหัสจะหนักกว่าไฟล์ดั้งเดิมเสมอ ดังนั้นฉันจึงยังคงโหลด SVG ที่ซับซ้อนด้วยไฟล์ภายนอกด้วย แท็กหรือใน CSS ของฉันด้วย url(path/to/file.svg).

การเข้ารหัส SVG ลงใน URI ข้อมูล

การเข้ารหัส SVG ของคุณเป็น URI ข้อมูลไม่ใช่เรื่องใหม่ ในความเป็นจริง Chris Coyier ได้เขียนโพสต์ เกี่ยวกับมันเมื่อกว่า 10 ปีที่แล้วเพื่ออธิบายวิธีการใช้เทคนิคนี้และเหตุผลที่คุณควร (หรือไม่ควร) ใช้

มีสองวิธีในการใช้ SVG ใน CSS ของคุณด้วย data URI:

• เป็นภาพภายนอก (โดยใช้ background-image,เส้นขอบภาพ,รายการสไตล์ภาพ…)
• เป็นเนื้อหาขององค์ประกอบหลอก (เช่น ::before or ::after)

ต่อไปนี้คือตัวอย่างพื้นฐานที่แสดงวิธีการใช้สองวิธีนี้:

ปัญหาหลักของการใช้งานนี้คือ คุณต้องแปลง SVG ด้วยตนเองทุกครั้งที่คุณต้องการไอคอนใหม่ และไม่น่าพอใจที่จะมีโค้ดยาวๆ ของโค้ดที่อ่านไม่ได้ใน CSS ของคุณ

นี่คือที่ที่ Sass เข้ามาช่วยชีวิต!

การใช้ฟังก์ชัน Sass

ด้วยการใช้ Sass เราสามารถทำให้ชีวิตของเราง่ายขึ้นโดยการคัดลอกซอร์สโค้ดของ SVG ของเราโดยตรงใน codebase ของเรา ทำให้ Sass เข้ารหัสอย่างถูกต้องเพื่อหลีกเลี่ยงข้อผิดพลาดของเบราว์เซอร์

โซลูชันนี้ส่วนใหญ่ได้รับแรงบันดาลใจจากฟังก์ชันที่มีอยู่ซึ่งพัฒนาโดย Threespot Media และพร้อมใช้งานใน ที่เก็บของพวกเขา.

นี่คือสี่ขั้นตอนของเทคนิคนี้:

• สร้างตัวแปรที่มีไอคอน SVG ทั้งหมดของคุณอยู่ในรายการ
• ระบุอักขระทั้งหมดที่ต้องข้ามสำหรับ URI ข้อมูล
• ใช้ฟังก์ชันเพื่อเข้ารหัส SVG เป็นรูปแบบ 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);
}

เพิ่มประสิทธิภาพ SVG ของคุณ

เทคนิคนี้ไม่ได้ให้การเพิ่มประสิทธิภาพใดๆ กับซอร์สโค้ดของ SVG ที่คุณกำลังใช้ ตรวจสอบให้แน่ใจว่าคุณไม่ทิ้งรหัสที่ไม่จำเป็น มิฉะนั้นจะถูกเข้ารหัสและจะเพิ่มขนาดไฟล์ CSS ของคุณ

คุณสามารถตรวจสอบ รายการที่ยอดเยี่ยมนี้ ของเครื่องมือและข้อมูลเกี่ยวกับวิธีการเพิ่มประสิทธิภาพ SVG ของคุณอย่างเหมาะสม เครื่องมือที่ฉันชอบคือ Jake Archibald's SVGOMG — เพียงลากไฟล์ของคุณไปที่นั่นแล้วคัดลอกโค้ดที่ส่งออก

โบนัส: การอัปเดตไอคอนเมื่อวางเมาส์เหนือ

ด้วยเทคนิคนี้ เราไม่สามารถเลือกด้วยส่วนเฉพาะ CSS ของ SVG ได้ ตัวอย่างเช่นไม่มีทางที่จะเปลี่ยน fill สีของไอคอนเมื่อผู้ใช้วางเมาส์เหนือปุ่ม แต่มีเทคนิคบางอย่างที่เราสามารถใช้กับ CSS เพื่อให้ยังคงสามารถปรับเปลี่ยนรูปลักษณ์ของไอคอนของเราได้

ตัวอย่างเช่น หากคุณมีไอคอนสีดำและต้องการให้เป็นสีขาวเมื่อวางเมาส์ไว้ คุณสามารถใช้ invert() ตัวกรอง CSS นอกจากนี้เรายังสามารถเล่นกับ hue-rotate() กรอง.

แค่นั้นแหละ!

ฉันหวังว่าคุณจะพบว่าตัวช่วยเล็ก ๆ นี้มีประโยชน์ในโครงการของคุณเอง แจ้งให้เราทราบว่าคุณคิดอย่างไรกับแนวทางนี้ - ฉันสนใจที่จะรู้ว่าคุณจะปรับปรุงให้ดีขึ้นได้อย่างไรหรือจัดการให้แตกต่างออกไป!