برای شخصی‌سازی و بهبود زیبایی ابزارک‌های Elementor، استفاده از آیکون‌های SVG سفارشی انتخاب خوبی است. این آیکون‌ها با فراهم کردن قابلیت تغییرات در مقیاس و رنگ، به شما آزادی بیشتری برای طراحی می‌دهند. در اینجا به روش هایی که می‌توانید این آیکون‌ها را در Elementor به کار ببرید می پردازیم.
ابتدا باید بدانید که یکی از ساده‌ترین راه‌ها استفاده از بخش icon library است که به شما این امکان را می‌دهد که آیکون‌های SVG را مستقیماً اضافه کنید. اما اگر بخواهید از SVGهای سفارشی خود استفاده کنید، نیاز به چند مرحله اضافی خواهید داشت.
شما می‌توانید SVG خود را با استفاده از تگ <img> یا <svg> مستقیماً در ویرایشگر HTML ابزارک قرار دهید. این روش به شما اجازه می‌دهد تا مستقیماً به ویرایش‌های CSS برای تغییرات بیشتر دسترسی داشته باشید.
راهکار دیگر به کارگیری ویژگی Custom CSS در Elementor می‌باشد که از طریق آن می‌توانید کدهای CSS اختصاصی برای قالب‌بندی و استایل‌دهی به SVG اضافه کنید. این قابلیت به شما امکان کنترل کامل بر روی ظاهر آیکون‌هایتان را می‌دهد.
در نهایت، با استفاده از ابزارک HTML و جاوا اسکریپت، می‌توانید آیکون‌های SVG خود را با انیمیشن و تأثیرات ویژه همراه کنید. این باعث می‌شود که تصاویر شما در وب‌سایت زنده و پویا به نظر برسند.
در زیر مثالی از استفاده از آیکون‌های SVG با استفاده از HTML ارائه شده است:
<!-- نمونه کد ساده برای وارد کردن SVG به یک ابزارک HTML -->
<div class="custom-svg-icon">
<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
</svg>
</div>
حالا بیایید این کد را خط به خط مرور کنیم:
<div class="custom-svg-icon">
یک div جدید با کلاس custom-svg-icon ایجاد می‌کند تا بتوان به راحتی به این المان با CSS دسترسی داشت.
<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
ایجاد یک المان svg با عرض و ارتفاع 100 پیکسل. دو فضای نام نیز برای اطمینان از سازگاری کامل در نظر گرفته شده‌اند.
<circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
اضافه کردن یک دایره به svg با مرکز در مختصات (50,50) و شعاع 40 پیکسل. این دایره یک خط حاشیه سیاه با عرض 3 پیکسل و رنگ داخلی قرمز دارد.
</svg>
پایان تگ svg.
</div>
پایان div.