Bao gồm nội dung SVG trong mẫu Lưỡi Laravel 5

Question

Cách tốt nhất để bao gồm nội dung của tệp SVG (nằm trong thư mục nội dung) trong một mẫu lưỡi Laravel 5 là gì?

Tôi không muốn sử dụng thẻ hình ảnh/đối tượng/thẻ nhúng, đây phải là SVG nội tuyến vì lý do tốc độ.

Tôi biết tôi có thể sử dụng <?php file_get_contents("file.svg") ?> nhưng có cách nào tốt hơn cho Laravel/Blade không?

Chỉnh sửa: để làm rõ, phương pháp sẽ hoạt động với tất cả tệp SVG, bao gồm tệp bên dưới.

<?xml version="1.0" encoding="UTF-8"?> 
<svg xmlns="http://www.w3.org/2000/svg"> 
<path stroke="red" fill="#00f" d="M10 10h100v100H10z"/> 
</svg> 

Answer 1

Tương tự như câu trả lời được chấp nhận nhưng sạch hơn một chút (imo).

Sử dụng các chỉ thị laravel để mở rộng lưỡi, như vậy (trong Provider App dịch vụ của bạn, như được nêu here):

\Blade::directive('svg', function($arguments) { 
     // Funky madness to accept multiple arguments into the directive 
     list($path, $class) = array_pad(explode(',', trim($arguments, "() ")), 2, ''); 
     $path = trim($path, "' "); 
     $class = trim($class, "' "); 

     // Create the dom document as per the other answers 
     $svg = new \DOMDocument(); 
     $svg->load(public_path($path)); 
     $svg->documentElement->setAttribute("class", $class); 
     $output = $svg->saveXML($svg->documentElement); 

     return $output; 
    }); 

Sau đó, sử dụng nó trong lưỡi của bạn như vậy:

 <div class="Login__image Login__cloud"> 
      @svg('cloud.svg', 'Cloud') 
     </div> 

Answer 2

Xem Composer Phương pháp

tôi đã kết thúc bằng một nhà soạn nhạc xem trong một nhà cung cấp dịch vụ.

Trong phương pháp boot() nhà cung cấp dịch vụ:

// Wildcard view composer 
view()->composer('*', function($view) { 
    // Instantiate new DOMDocument object 
    $svg = new DOMDocument(); 
    // Load SVG file from public folder 
    $svg->load(public_path('images/logo.svg')); 
    // Add CSS class (you can omit this line) 
    $svg->documentElement->setAttribute("class", "logo"); 
    // Get XML without version element 
    $logo = $svg->saveXML($svg->documentElement); 
    // Attach data to view 
    $view->with('logo', $logo); 
}); 

Và theo quan điểm của tôi:

<!-- Echo unescaped SVG content --> 
{!! $logo !!} 

Tôi đang sử dụng DOMDocument vì nó cho phép tôi để loại bỏ các yếu tố phiên bản XML mà không phải ở trong HTML.

Lớp CSS không cần thiết nhưng giúp tôi gói biểu trưng bằng phần tử HTML khác để tạo kiểu.

Nếu bạn chỉ cần logo trong một Blade cụ thể từng phần như tiêu đề bạn có thể viết

view()->composer('header', function($view) {}); 

http://laravel.com/docs/5.0/views#view-composers
https://laracasts.com/series/laravel-5-fundamentals/episodes/25

Blade phần Phương pháp

Phương pháp này không phải là thực hành tốt nhất kể từ loại mã này không thực sự ở chế độ xem. Tuy nhiên nó rất đơn giản và tốt hơn nhiều so với việc thêm mã PHP vào mỗi khung nhìn.

Thực hiện một phần mới (cho phép nói logo.blade.php) với đoạn mã sau:

<?php 
// Instantiate new DOMDocument object 
$svg = new DOMDocument(); 
// Load SVG file from public folder 
$svg->load(public_path('images/logo.svg')); 
// Add CSS class (you can omit this line) 
$svg->documentElement->setAttribute("class", "logo"); 
// Echo XML without version element 
echo $svg->saveXML($svg->documentElement); 
?> 

Bây giờ bạn có thể sử dụng hình ảnh SVG trong một mẫu lưỡi bằng cách bao gồm các phần như sau:

@include('logo') 

Answer 3

này hoạt động, đó là cách đơn giản nhất tôi có thể nghĩ về:

{!! file_get_contents(asset('images/icon.svg')) !!} 

Answer 4

Tại sao không đặt int svg o một mẫu lưỡi?

resources/views/icons/dashboard.blade.php 

sau đó thêm số lần xem bằng cú pháp lưỡi?

@include('icons.dashboard')