راه های زیادی برای استفاده وجود دارد svg icons در پروژه های زاویه ای
img برچسب زدن
می توانید از یک استفاده کنید img برچسب:
با این راه حل، دیگر svg نیست، بلکه یک svg است img. بنابراین ما به صورت رایگان کش داریم اما شما برای مثال برای تغییر رنگ، استایل را از دست می دهید.
mat-icon
گزینه دوم، شما می توانید استفاده کنید mat-icon یا چیزی شبیه به درون خطی svg. به خوبی کار می کند، اما برای من، پیچیدگی بیشتری مانند تماس http را برای درون خط کردن نماد svg اضافه می کند. همچنین شما svg خود را با عنصر اضافی بسته بندی می کنید و هر چه بیشتر از svgs استفاده می کنید، عناصر اضافی بیشتری اضافه می کنید.
قالب زاویه ای
گزینه سوم این است که فقط نماد svg خود را در قالب کپی کنید و مانند جادو کار می کند. من این روش را بهترین روش یافتم اما هنوز مشکلاتی دارد:
کدام نماد svg؟
اگر آیکون svg را در قالب ببینیم، نمی توانیم تصویری آن را بشناسیم و از آن اطلاعی نداریم. برای ارتباط تصویری با کد باید بازرسی کنیم.
تکرار کد
اگر می خواهید از یک svg در بیش از یک مکان استفاده کنید، با تکرار کد کار را به پایان می رسانید.
هر دوی این مشکلات را می توانیم با ایجاد یک جزء حل کنیم.
یک راه حل، اما
با ایجاد یک کامپوننت، می‌توانیم یک نام را به این فایل svg مرتبط کنیم و می‌توانیم از آن در همه جا استفاده کنیم. و اگر دیگر از این کامپوننت استفاده نکنیم به لطف تکان دادن درخت توسط زاویه ای برای اضافه نشدن آن به باندل.
عالی، ما به یک راه حل خوب نزدیک هستیم..
راه حل نهایی
اما هنوز یک مشکل داریم، عنصر میزبان. عنصر میزبان، استایل دادن به svg را سخت می کند و باید آن را دور بزنید. اگر بخواهیم svg خود را از کانتینر والد استایل کنیم، باید توجه داشته باشیم که svg فرزند مستقیم نیست و فرزند مستقیم عنصر میزبان است.
برای حذف استفاده از عنصر میزبان در زاویه ای می توانیم استفاده کنیم attribute selector. بنابراین می توانیم svg را به این صورت اضافه کنیم:
این راه حل، سادگی قرار دادن فایل های svgs در قالب زاویه ای و امکان استایل دادن به آن با css را آسان تر می کند.
اما ما باید برای هر svg یک کامپوننت زاویه ای ایجاد کنیم که سخت و زمان بر است…
@semantic-icons
همانطور که گفتم، در حال آماده سازی آیکون های svg برای استفاده attribute selector نیاز به زمان و آماده سازی دارد. خبر خوب من قبلاً این کار را در مخزن GitHub خود انجام دادم:https://github.com/khalilou88/semantic-icons، برای بسیاری از فایل های svg مانند lucide-icons، heroicon، tabler-icons، …
من مجموعه ای از آیکون های رایگان و متن باز را برای استفاده در پروژه های زاویه ای شما ایجاد کردم. فقط باید نام svg را بدانید و پسوند و پیشوند را اضافه کنید.
نماد پرنده از Lucid از https://lucide.dev/icons/bird، می تواند به این صورت در قالب شما اضافه شود:
ممنون که خواندید و دفعه بعد می بینمت.
