لطفا صبر کنید ...

دستورالعمل Blade SVG در لاراول

الهام غایب

توسط الهام غایب

دیدگاه ها: 0
بازدید ها : 104
رایگان
هدف ما این است که شما، در بالاترین سطح طراحی و توسعه وب باشید.

ثبت نام کنید

در این مقاله کوتاه از لیداوب، استفاده از دستوالعمل Blade SVG در لاراول توضیح داده شده است. در ادامه همراه ما باشید.


استفاده از SVG در طراحی بسیار کارامد است. می‌توان آن‌ها را بدون پیکسل شدن به هر سایزی درآورد و با id به آن‌ها رفرنس داد. همچنین، می‌توان آن‌ها را از طریق CSS یا جاوا اسکریپت اصلاح کنید. یکی از مشکلاتی که در استفاده از فایل‌های SVG در تمپلیت‌ها وجود دارد، رفرنس دادن به آن‌ها است. در حال حاضر، سه روش برای انجام این کار وجود دارد، که شامل رفرنس دادن یک فایل SVG، تعبیه کردن کل آن یا استفاده از یک SVG sprite است. در اینجا، تفاوت ظاهری استایل‌های مختلف که با HTML نوشته می‌شوند را مشاهده می‌کنید:

Image Src

<img src="icon.svg" alt="My SVG Icon">

تعبیه کردن یک SVG

<svg class="icon icon-lg" viewBox="0 0 20 20" xmlns="https://www.w3.org/2000/svg">
        <path d="M3.938 6.497a6.958 6.958 0 0 0-.702 1.694L0 9v2l3.236.809c.16.6.398 1.169.702 1.694l-1.716 2.861 1.414 1.414 2.86-1.716a6.958 6.958 0 0 0 1.695.702L9 20h2l.809-3.236a6.96 6.96 0 0 0 1.694-.702l2.861 1.716 1.414-1.414-1.716-2.86a6.958 6.958 0 0 0 .702-1.695L20 11V9l-3.236-.809a6.958 6.958 0 0 0-.702-1.694l1.716-2.861-1.414-1.414-2.86 1.716a6.958 6.958 0 0 0-1.695-.702L11 0H9l-.809 3.236a6.96 6.96 0 0 0-1.694.702L3.636 2.222 2.222 3.636l1.716 2.86zM10 13a3 3 0 1 0 0-6 3 3 0 0 0 0 6z" fill-rule="evenodd">
        </path>
    </svg>

SVG Sprite

<svg xmlns="https://www.w3.org/2000/svg" xmlns:xlink="https://www.w3.org/1999/xlink" width="0" height="0" style="position:absolute; display: none; visibility: hidden; width: 0; height: 0;">
    <symbol id="icon-arrow-down" //.. 
    <symbol id="icon-arrow-up" //.. 
    // etc…
</svg>

<!— Then to referece it: —>
<svg><use xlink:href="#icon-arrow-down"></svg>

همانطور که می‌بینید استفاده از استایل‌های inline یا sprite خیلی کاربر پسند نیست و بیشتر شامل کپی و پیست از icon text می‌باشد. آدام واتان یک پکیج جدید در لاراول عرضه کرده است که وقتی از موتور تمپلیت Balde استفاده می‌کنید، تمام این کارها را بسیار ساده‌تر می‌کند.

پکیج Blade SVG در لاراول

پکیج Blade SVG یک دستورالعمل جدید برای inline SVG یا استفاده از SVG sprites ارائه می‌دهد. وقتی این پکیج را نصب کردید، گزینه‌ای برای انتخاب بهترین موردی که با پروژه شما منطبق باشد از طریق config در اختیار شما قرار می‌گیرد:

return [
    'inline' => true, 
    // True renders the full icon SVG inline by default
    // False references the sprite sheet and render the icon with a `use` tag
];

پس از آن، می‌توانید به دو دستور زیر دسترسی داشته باشید:

@icon('icon-arrow-up')
{{ svg_icon('icon-arrow-up') }}

تفاوت آن‌ها در svg_icon است که امکان ایجاد سینتکس زنجیره‌ای برای عملیات پیچیده‌تر را فراهم می‌کند:

{{ svg_icon('icon-arrow-up')->alt('Arrow')->dataFoo('bar')->dataBaz() }} 

نمونه از استفاده از دستور Blade SVG

با تنظیم inline flag با مقدار true، می‌توانید آن را به شکل زیر به کار ببرید:

@icon('icon-arrow-up', ['class' => 'icon-lg'])

که به شکل زیر رندر می‌شود:

<svg class="icon icon-lg" viewBox="0 0 20 20" xmlns="https://www.w3.org/2000/svg">
    <path d="M3.938 6.497a6.958 6.958 0 0 0-.702 1.694L0 9v2l3.236.809c.16.6.398 1.169.702 1.694l-1.716 2.861 1.414 1.414 2.86-1.716a6.958 6.958 0 0 0 1.695.702L9 20h2l.809-3.236a6.96 6.96 0 0 0 1.694-.702l2.861 1.716 1.414-1.414-1.716-2.86a6.958 6.958 0 0 0 .702-1.695L20 11V9l-3.236-.809a6.958 6.958 0 0 0-.702-1.694l1.716-2.861-1.414-1.414-2.86 1.716a6.958 6.958 0 0 0-1.695-.702L11 0H9l-.809 3.236a6.96 6.96 0 0 0-1.694.702L3.636 2.222 2.222 3.636l1.716 2.86zM10 13a3 3 0 1 0 0-6 3 3 0 0 0 0 6z" fill-rule="evenodd">
    </path>
</svg>

اگر inline با مقدار false تنظیم شود:

@icon('icon-arrow-up', ['class' => 'icon-lg'])

به این صورت رندر خواهد شد:

<svg class="icon icon-lg">
    <use xmlns:xlink="https://www.w3.org/1999/xlink" xlink:href="#icon-arrow-up"></use>
</svg>

مهم نیست چه استایلی را به عنوان پیش‌فرض استفاده می‌کنید می‌توانید با استفاده از svg_icon بین آن‌ها سوئیچ کنید:

{{ svg_icon('icon-arrow-up', 'icon-lg')->sprite() }}
{{ svg_icon('icon-arrow-up', 'icon-lg')->inline() }}

همانطور که مشاهده می‌کنید، این پکیج برای زمانی که با فایل‌های svg کار می‌کنید بسیار مفید بوده و ویو شما را تمیز نگه داشته و مدیریت آن را آسان‌تر می‌کند.

مطالعه مقالات بیشتر در لیداوب:

سایر مقالات کاربردی لاراول ما در لیداوب، شما را با تمام مباحث مربوط به این فریم ورک آشنا می‌کند. همراه ما باشید.

منبع :

5 از 1 رای

 مطالب مرتبط  

در قسمت زیر مطالبی وجود دارند که با مقاله فعلی مرتبط هستند



متاسفانه فقط اعضای سایت قادر به ثبت دیدگاه هستند

برترین مطالب

آموزش در لیداوب

از مقالات و ویدیو های آموزشی خودتان کسب درآمد کنید!

جدیدترین سرویس ما برای دوستان متخصص و خوش بیان در زمینه طراحی وب ارائه شد. این سرویس به شما این امکان را می دهد که به آسانی مقالات و یا ویدیو های آموزشی خود را در لیداوب منتشر کنید. فرصت مناسبی است که بدون داشتن وب سایت و یا وبلاگ و مهم تر از همه بدون هزینه، مطالب خود را در لیداوب منتشر کنید و مهم تر از همه با فروش آنها کسب درآمد کنید. همین حالا شروع کنید و این فرصت استثنایی را از دست ندهید.