Включение содержимого SVG в шаблон Laravel 5 Blade - программирование

Включение содержимого SVG в шаблон Laravel 5 Blade

Каков наилучший способ включить содержимое SVG файла (находящегося в папке с ресурсами) в шаблоне blade-сервера Laravel 5?

Я не хочу использовать теги image/object/embed, это должен быть встроенный SVG по причине скорости.

Я знаю, что могу использовать <?php file_get_contents("file.svg") ?>, но есть ли лучший способ для Laravel/Blade?

Изменить: чтобы уточнить, метод должен работать со всеми SVG файлами, включая приведенный ниже.

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

Ответ 1

Подобно принятому ответу, но немного чище (imo).

Используйте директиву laravel для расширения клинка, например (в вашем App Service Provider, как описано здесь):

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

Затем используйте его в своем лезвии так:

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

Ответ 2

Это работает, что самый простой способ, о котором я мог думать:

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

Ответ 3

Почему бы не поместить svg в шаблон клинка?

resources/views/icons/dashboard.blade.php

затем добавьте свои представления, используя синтаксис лезвия?

@include('icons.dashboard')

Ответ 4

Просмотр метода композитора

В итоге я использовал композитор представления в поставщике услуг.

В методе поставщика boot():

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

И на мой взгляд:

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

Я использую DOMDocument, поскольку он позволяет мне удалить элемент XML-версии, который не должен находиться в HTML.

Класс CSS не является существенным, но сохраняет меня, обертывая логотип другим элементом HTML для стилизации.

Если вам нужен только логотип в определенном части Blade, например, заголовок, который вы могли бы написать

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

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

Частичный метод клинка

Этот метод не является наилучшей практикой, так как этот вид кода не должен быть действительно в представлении. Однако это очень просто и намного лучше, чем добавление PHP-кода в каждое представление.

Сделайте новый частичный (скажем, логотип .blade.php) следующий код:

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

Теперь вы можете использовать изображение SVG в шаблоне клинка, включая частичное, например:

@include('logo')