Laravel Blade SVG 指令

在您的设计中使用 SVG 非常流行，而且有充分的理由。它们可以调整大小而不变得像素化，您可以通过 id 引用它们，并通过 CSS 或 JavaScript 修改它们。

在模板中使用 SVG 文件的困难之一是引用它们。目前，有三种方法可以做到这一点。引用 SVG 文件、嵌入整个文件或使用 SVG sprite。

以下是不同样式在 HTML 中的写法

图像 Src

<img src="icon.svg" alt="My SVG Icon">

嵌入 SVG

<svg class="icon icon-lg" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
        <path d="M3.938 6.497a6.958 6.958 0 0 0-.702 1.694L0 9v2l3.236.809c.16.6.398 1.169.702 1.694l-1.716 2.861 1.414 1.414 2.86-1.716a6.958 6.958 0 0 0 1.695.702L9 20h2l.809-3.236a6.96 6.96 0 0 0 1.694-.702l2.861 1.716 1.414-1.414-1.716-2.86a6.958 6.958 0 0 0 .702-1.695L20 11V9l-3.236-.809a6.958 6.958 0 0 0-.702-1.694l1.716-2.861-1.414-1.414-2.86 1.716a6.958 6.958 0 0 0-1.695-.702L11 0H9l-.809 3.236a6.96 6.96 0 0 0-1.694.702L3.636 2.222 2.222 3.636l1.716 2.86zM10 13a3 3 0 1 0 0-6 3 3 0 0 0 0 6z" fill-rule="evenodd">
        </path>
    </svg>

SVG Sprite

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="0" height="0" style="position:absolute; display: none; visibility: hidden; width: 0; height: 0;">
    <symbol id="icon-arrow-down" //..
    <symbol id="icon-arrow-up" //..
    // etc…
</svg>
 
<!— Then to referece it: —>
<svg><use xlink:href="#icon-arrow-down"></svg>

如您所见，使用内联或 sprite 样式并不友好，而且需要大量复制和粘贴图标文本。

Adam Wathan 推出了一个新的 Laravel 包，以便在使用 Blade 模板引擎时使所有这些操作变得更加容易。

#Laravel Blade SVG 包

该 Blade SVG 包为内联 SVG 或使用 SVG sprite 添加了一个新的指令。

安装后，您可以通过配置文件项选择最适合您的项目的选项。

return [
    'inline' => true,
    // True renders the full icon SVG inline by default
    // False references the sprite sheet and render the icon with a `use` tag
];

您还可以使用以下两个指令。

@icon('icon-arrow-up')
{{ svg_icon('icon-arrow-up') }}

区别在于 svg_icon 是一个辅助函数，允许使用流畅的链式语法进行更高级的操作。

{{ svg_icon('icon-arrow-up')->alt('Arrow')->dataFoo('bar')->dataBaz() }}

#示例 Blade SVG 用法

将 inline 标志设置为 true 后，您可以像这样使用它。

@icon('icon-arrow-up', ['class' => 'icon-lg'])

它将呈现以下内容。

<svg class="icon icon-lg" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
    <path d="M3.938 6.497a6.958 6.958 0 0 0-.702 1.694L0 9v2l3.236.809c.16.6.398 1.169.702 1.694l-1.716 2.861 1.414 1.414 2.86-1.716a6.958 6.958 0 0 0 1.695.702L9 20h2l.809-3.236a6.96 6.96 0 0 0 1.694-.702l2.861 1.716 1.414-1.414-1.716-2.86a6.958 6.958 0 0 0 .702-1.695L20 11V9l-3.236-.809a6.958 6.958 0 0 0-.702-1.694l1.716-2.861-1.414-1.414-2.86 1.716a6.958 6.958 0 0 0-1.695-.702L11 0H9l-.809 3.236a6.96 6.96 0 0 0-1.694.702L3.636 2.222 2.222 3.636l1.716 2.86zM10 13a3 3 0 1 0 0-6 3 3 0 0 0 0 6z" fill-rule="evenodd">
    </path>
</svg>

与将 inline 设置为 false 相比。

@icon('icon-arrow-up', ['class' => 'icon-lg'])

将呈现。

<svg class="icon icon-lg">
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-arrow-up"></use>
</svg>

无论您使用哪种样式作为默认样式，您都可以使用 svg_icon 辅助函数在它们之间切换。

{{ svg_icon('icon-arrow-up', 'icon-lg')->sprite() }}
{{ svg_icon('icon-arrow-up', 'icon-lg')->inline() }}

如您所见，此包在处理 SVG 文件时非常有用，它可以使您的视图保持整洁，易于管理。

如果您想了解更多信息，请查看 GitHub 仓库。