Bagaimana Saya Membuat Sistem Ikon Dari Properti Kustom CSS

SVG adalah format terbaik untuk ikon di situs web, ada tidak diragukan lagi. Ini memungkinkan Anda untuk memiliki ikon yang tajam tidak peduli kepadatan piksel layar, Anda dapat mengubah gaya SVG saat mengarahkan kursor dan Anda bahkan dapat menganimasikan ikon dengan CSS atau JavaScript.

Ada banyak cara untuk memasukkan SVG pada halaman dan setiap teknik memiliki kelebihan dan kekurangannya sendiri. Selama beberapa tahun terakhir, saya telah menggunakan fungsi Sass untuk mengimpor langsung ikon saya di CSS saya dan menghindari harus mengacaukan markup HTML saya.

Saya memiliki daftar Sass dengan semua kode sumber ikon saya. Setiap ikon kemudian dikodekan ke dalam URI data dengan fungsi Sass dan disimpan dalam a properti khusus pada akar halaman.

TL; DR

Apa yang saya miliki untuk Anda di sini adalah fungsi Sass yang membuat pustaka ikon SVG langsung di CSS Anda.

Kode sumber SVG dikompilasi dengan fungsi Sass yang mengkodekannya dalam data URI dan kemudian menyimpan ikon di properti kustom CSS. Anda kemudian dapat menggunakan ikon apa saja di CSS Anda seperti seolah-olah itu adalah gambar eksternal.

Ini adalah contoh yang diambil langsung dari kode situs pribadi saya:

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

Demo

Struktur sss

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

Teknik ini memiliki pro dan kontra, jadi harap pertimbangkan sebelum menerapkan solusi ini pada proyek Anda:

Pro

• Tidak ada permintaan HTTP untuk file SVG.
• Semua ikon disimpan di satu tempat.
• Jika Anda perlu memperbarui ikon, Anda tidak perlu memeriksa setiap file template HTML.
• Ikon di-cache bersama dengan CSS Anda.
• Anda dapat mengedit kode sumber ikon secara manual.
• Itu tidak mencemari HTML Anda dengan menambahkan markup tambahan.
• Anda masih dapat mengubah warna atau beberapa aspek ikon dengan CSS.

Kekurangan

• Anda tidak dapat menganimasikan atau memperbarui bagian tertentu dari SVG dengan CSS.
• Semakin banyak ikon yang Anda miliki, semakin berat file kompilasi CSS Anda.

Saya kebanyakan menggunakan teknik ini untuk ikon daripada logo atau ilustrasi. SVG yang disandikan akan selalu lebih berat daripada file aslinya, jadi saya masih memuat SVG kompleks saya dengan file eksternal baik dengan tag atau di CSS saya dengan url(path/to/file.svg).

Encoding SVG ke dalam data URI

Mengkodekan SVG Anda sebagai URI data bukanlah hal baru. Faktanya Chris Coyier menulis kiriman tentang hal itu lebih dari 10 tahun yang lalu untuk menjelaskan bagaimana menggunakan teknik ini dan mengapa Anda harus (atau tidak) menggunakannya.

Ada dua cara untuk menggunakan SVG di CSS Anda dengan URI data:

• Sebagai gambar eksternal (menggunakan background-image,gambar batas,daftar-gaya-gambar,…)
• Sebagai konten elemen semu (mis ::before or ::after)

Berikut adalah contoh dasar yang menunjukkan bagaimana Anda menggunakan kedua metode tersebut:

Masalah utama dengan implementasi khusus ini adalah Anda harus mengonversi SVG secara manual setiap kali Anda membutuhkan ikon baru dan sangat tidak menyenangkan memiliki string panjang kode yang tidak dapat dibaca ini di CSS Anda.

Di sinilah Sass datang untuk menyelamatkan!

Menggunakan fungsi Sass

Dengan menggunakan Sass, kita dapat membuat hidup kita lebih sederhana dengan menyalin kode sumber SVG kita langsung di basis kode kita, membiarkan Sass mengkodekannya dengan benar untuk menghindari kesalahan browser.

Solusi ini sebagian besar terinspirasi oleh fungsi yang sudah ada yang dikembangkan oleh Threespot Media dan tersedia di gudang mereka.

Berikut adalah empat langkah dari teknik ini:

• Buat variabel dengan semua ikon SVG Anda terdaftar.
• Daftar semua karakter yang perlu dilewati untuk URI data.
• Menerapkan fungsi untuk menyandikan SVG ke format URI data.
• Gunakan fungsi Anda dalam kode Anda.

1. Daftar ikon

/**
* Add all the icons of your project in this Sass list
*/
$svg-icons: (
  burger: ''
);

2. Daftar karakter yang lolos

/**
* 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. Fungsi enkode

/**
* 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. Tambahkan SVG di halaman Anda

button {
  &::after {
    /* Import inline SVG */
    content: svg(burger);
  }
}

Jika Anda telah mengikuti langkah-langkah tersebut, Sass harus mengkompilasi kode Anda dengan benar dan menampilkan yang berikut:

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

Properti khusus

Sass yang sekarang diimplementasikan svg() fungsi berfungsi dengan baik. Tetapi kelemahan terbesarnya adalah bahwa ikon yang diperlukan di banyak tempat dalam kode Anda akan diduplikasi dan dapat meningkatkan berat file CSS yang dikompilasi dengan banyak!

Untuk menghindari ini, kami dapat menyimpan semua ikon kami ke dalam variabel CSS dan gunakan referensi ke variabel alih-alih mengeluarkan URI yang disandikan setiap saat.

Kami akan menyimpan kode yang sama seperti sebelumnya, tetapi kali ini pertama-tama kami akan menampilkan semua ikon dari daftar Sass ke root halaman web kami:

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

Sekarang, alih-alih memanggil svg() fungsi setiap kali kita membutuhkan ikon, kita harus menggunakan variabel yang dibuat dengan --svg awalan.

button::after {
  /* Import inline SVG */
  content: var(--svg-burger);
}

Mengoptimalkan SVG Anda

Teknik ini tidak memberikan pengoptimalan apa pun pada kode sumber SVG yang Anda gunakan. Pastikan Anda tidak meninggalkan kode yang tidak perlu; jika tidak, mereka akan dikodekan juga dan akan meningkatkan ukuran file CSS Anda.

Anda dapat memeriksa daftar yang bagus ini alat dan informasi tentang cara mengoptimalkan SVG Anda dengan benar. Alat favorit saya adalah milik Jake Archibald SVGOMG — cukup seret file Anda ke sana dan salin kode yang dihasilkan.

Bonus: Memperbarui ikon di hover

Dengan teknik ini, kita tidak dapat memilih dengan CSS bagian tertentu dari SVG. Misalnya, tidak ada cara untuk mengubah fill warna ikon saat pengguna mengarahkan tombol. Namun ada beberapa trik yang bisa kita gunakan dengan CSS agar tetap bisa memodifikasi tampilan icon kita.

Misalnya, jika Anda memiliki ikon hitam dan Anda ingin membuatnya putih saat mengarahkan kursor, Anda dapat menggunakan invert() Penyaring CSS. Kita juga bisa bermain dengan hue-rotate() menyaring.

Itu dia!

Saya harap Anda menemukan fungsi pembantu kecil ini berguna dalam proyek Anda sendiri. Beri tahu saya pendapat Anda tentang pendekatan ini — saya akan tertarik untuk mengetahui bagaimana Anda membuat ini lebih baik atau menanganinya secara berbeda!