Einschließlich SVG-Inhalt in Laravel 5 Blade-Vorlage

Question

Was ist der beste Weg, um den Inhalt einer SVG-Datei (im Ordner Assets) in eine Laravel 5 Blade-Vorlage aufzunehmen?

Ich möchte keine image/object/embed Tags verwenden, dies sollte aus Geschwindigkeitsgründen ein Inline SVG sein.

Ich weiß, ich könnte <?php file_get_contents("file.svg") ?> verwenden, aber gibt es einen besseren Weg für Laravel/Blade?

Edit: zu klären, sollte die Methode mit alle SVG-Dateien, einschließlich der eine unten funktionieren.

<?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

Ähnlich wie die angenommene Antwort aber ein bisschen sauberer (imo).

die Laravel Anweisung können Klinge verlängern, wie so (in Ihrem Provider App Dienst, als here umrandet):

\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; 
    }); 

Dann ist es in Ihrer Klinge verwenden wie so:

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

Answer 2

View Composer-Methode

landete ich in einem Service-Provider mit einer View Composer-up.

Im boot() Methode des Dienstleisters:

// 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); 
}); 

Und meiner Meinung nach:

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

Ich verwende DOMDocument, wie es mir das XML-Version Element entfernen kann, die nicht in der sein sollten, HTML.

Die CSS-Klasse ist nicht wesentlich, aber spart mir das Umwickeln des Logos mit einem anderen HTML-Element zum Stylen.

Wenn Sie nur das Logo in einem bestimmten Blade-Teil wie Header brauchen Sie

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

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

Klingenteil Methode

Diese Methode ist nicht best practice schreiben seit Diese Art von Code sollte nicht wirklich in Sicht sein. Es ist jedoch sehr einfach und viel besser als PHP-Code in jeder einzelnen Ansicht hinzuzufügen.

ein neues Teil-Marke (sagen wir mal logo.blade.php) mit dem folgenden Code:

<?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); 
?> 

Sie können nun die SVG-Datei in einem Blade-Vorlage verwenden, indem die Teil einschließlich etwa so:

@include('logo') 

Answer 3

Dies funktioniert, das ist der einfachste Weg, ich denken konnte:

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

Answer 4

Warum nicht die int svg platzieren o eine Klingenschablone?

resources/views/icons/dashboard.blade.php 

dann in Ihren Ansichten mit Blade-Syntax hinzufügen?

@include('icons.dashboard')