web-dev-qa-db-fra.com

Inclusion de contenu SVG dans Laravel 5 Blade template

Quelle est la meilleure façon d'inclure le contenu d'un fichier SVG (situé dans le dossier des ressources) dans un modèle de lame Laravel 5)?

Je ne veux pas utiliser de balises image/objet/incorporer, cela devrait être un SVG en ligne pour des raisons de vitesse.

Je sais que je pourrais utiliser <?php file_get_contents("file.svg") ?> mais existe-t-il une meilleure méthode spécifique à Laravel/Blade?

Edit: pour clarifier, la méthode devrait fonctionner avec tous les fichiers SVG, y compris celui ci-dessous.

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

Similaire à la réponse acceptée mais un peu plus propre (imo).

Utilisez la directive laravel pour étendre la lame, comme ceci (dans votre fournisseur de services d'application, comme indiqué ici ):

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

Ensuite, utilisez-le dans votre lame comme suit:

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

Cela fonctionne, c'est la façon la plus simple de penser:

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

Pourquoi ne pas placer le svg dans un modèle de lame?

resources/views/icons/dashboard.blade.php

puis ajoutez vos vues en utilisant la syntaxe de la lame?

@include('icons.dashboard')
12
zeros-and-ones

View Composer Method

J'ai fini par utiliser une vue composer chez un fournisseur de services.

Dans la méthode boot() du fournisseur de services:

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

Et à mon avis:

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

J'utilise DOMDocument car cela me permet de supprimer l'élément de version XML qui ne devrait pas être dans le HTML.

La classe CSS n'est pas essentielle mais m'évite d'envelopper le logo avec un autre élément HTML pour le style.

Si vous n'avez besoin que du logo dans un partiel de lame spécifique tel qu'un en-tête, vous pouvez écrire

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

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

Méthode partielle de lame

Cette méthode n'est pas la meilleure pratique car ce type de code ne devrait pas vraiment être dans une vue. Cependant, c'est très simple et bien meilleur que d'ajouter du code PHP dans chaque vue.

Faites un nouveau partiel (disons logo.blade.php) avec le code suivant:

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

Vous pouvez maintenant utiliser l'image SVG dans un modèle de lame en incluant le partiel comme ceci:

@include('logo')
6
Michael Lawton