Custom SVG icon'larni o'zim qanday ishlatganman shu paytgacha?

Har xil yo'llari bilan qilib ko'rganman, quyida shular haqida qisqacha yozaman.

1. Oddiy <img /> teg orqali ishlatish. Qulay va oson. Bundle size'ni yaxshilaydi. Ammo, SVG'ni stillash mumkin emas. Masalan, currentColor orqali rang o'zgartirib bo'lmaydi.

2. O'zini HTML'da chaqirish, stillash mumkin, oson. Ammo, kodni dabdala qiladi. O'qish qiyinlashadi va Bundle size oshadi.

3. SVG loader'lar orqali ishlatish (Shundan foydalanaman). Bunda bir faylga hamma SVG'ni yozasiz yoki har biriga alohida SVG fayl turaveradi. Chaqirishga kelganda alohida component ichida SVG'ni load qilib olib, Component'ning template'iga tiqib yuboriladi. Bunda ishlatish osonlashadi, Bundle size yaxshilanadi (HTTP so'rov bo'lgani uchun) va eng asosiysi SVG'ni stillash xususiyati yo'qolmaydi. Xohishingizga ko'ra Fallback/default icon ham ulasangiz bo'ladi.
P.s: Bu uchun alohida kutubxonalar ham mavjud.

#svgIcon

@JoshDeveloper