web-dev-qa-db-ja.com

Laravel 5ブレードテンプレートにSVGコンテンツを含める

Laravel 5ブレードテンプレートにSVGファイル（assetsフォルダーにあります）のコンテンツを含める最良の方法は何ですか？

画像/オブジェクト/埋め込みタグを使用したくありません。これは、速度の理由からインラインSVGである必要があります。

<?php file_get_contents("file.svg") ?>を使用できることはわかっていますが、Laravel/Bladeに固有のより良い方法はありますか？

編集：明確にするために、メソッドはall 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>
laravel-5blade
18
Michael Lawton

受け入れられた回答に似ていますが、少しクリーン（imo）です。

laravelディレクティブを使用してブレードを拡張します（App Service Providerで、概説されているように 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;
    });

次に、ブレードで次のように使用します。

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

これはうまくいきます、それは私が考えることができる最も簡単な方法です：

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

Svgをブレードテンプレートに配置しないのはなぜですか？

resources/views/icons/dashboard.blade.php

次に、ブレード構文を使用してビューに追加しますか？

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

ビューComposerメソッド

サービスプロバイダーでビューcomposerを使用することになりました。

サービスプロバイダーの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を使用しているのは、HTMLに含めることのできないXMLバージョン要素を削除できるためです。

CSSクラスは必須ではありませんが、スタイル設定のためにロゴを別のHTML要素でラップする手間を省きます。

ヘッダーなどの特定のブレードパーシャルのロゴのみが必要な場合は、次のように記述できます。

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

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

ブレード部分法

この種のコードは実際にはビューにあるべきではないため、この方法はベストプラクティスではありません。ただし、これは非常にシンプルで、すべてのビューにPHPコードを追加するよりもはるかに優れています。

次のコードを使用して、新しい部分テンプレート（logo.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')
6
Michael Lawton