README

Blade SVG

轻松将 SVG 图像内联到你的 Blade 模板中。

安装

你可以在项目的根目录下运行以下命令通过 Composer 安装此包：

composer require tomhatzer/blade-svg-origin

入门指南

包的服务提供器将自动注册自身。

发布 Blade SVG 配置文件

php artisan vendor:publish --provider="BladeSvg\BladeSvgServiceProvider"

配置

在 config/blade-svg.php 文件中，你可以使用 class 选项指定你希望应用到 SVG 图像上的任何默认 CSS 类。

<?php

return [
    // ...
    'class' => 'icon', // Add the `icon` class to every SVG when rendered
    // ...
];

你可以通过空格分隔多个类，就像在 HTML 类属性中一样指定。

<?php

return [
    // ...
    'class' => 'icon inline-block',
    // ...
];

基本用法

要在模板中插入 SVG，只需使用 @svg Blade 指令，传递 SVG 名称和可选的任何额外类。

<a href="/settings">
    @svg('cog', 'icon-lg') Settings
</a>

<!-- Renders.. -->
<a href="/settings">
    <svg class="icon icon-lg">
        <path d="..." fill-rule="evenodd"></path>
    </svg>
    Settings
</a>

要向渲染的 SVG 标签添加额外属性，请传递一个关联数组作为第三个参数。

<a href="/settings">
    @svg('cog', 'icon-lg', ['id' => 'settings-icon']) Settings
</a>

<!-- Renders.. -->
<a href="/settings">
    <svg class="icon icon-lg" id="settings-icon">
        <path d="..." fill-rule="evenodd"></path>
    </svg>
    Settings
</a>

如果你有属性要声明但没有额外类，你可以传递一个关联数组作为第二个参数。

<a href="/settings">
    @svg('cog', ['id' => 'settings-icon']) Settings
</a>

<!-- Renders.. -->
<a href="/settings">
    <svg class="icon" id="settings-icon">
        <path d="..." fill-rule="evenodd"></path>
    </svg>
    Settings
</a>

如果你想覆盖默认类名，在属性数组中指定一个类。

<a href="/settings">
    @svg('cog', ['class' => 'overridden']) Settings
</a>

<!-- Renders.. -->
<a href="/settings">
    <svg class="overridden">
        <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#zondicon-cog"></use>
    </svg>
    Settings
</a>

如果你想添加一个不需要值的属性，只需指定它，不使用键。

<a href="/settings">
    @svg('cog', ['data-foo']) Settings
</a>

<!-- Renders.. -->
<a href="/settings">
    <svg class="icon" data-foo>
        <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#zondicon-cog"></use>
    </svg>
    Settings
</a>

如果你愿意，可以直接使用 svg_image 助手来暴露设置 SVG 属性的流畅语法。

<a href="/settings">
    {{ svg_image('cog')->id('settings-icon')->dataFoo('bar')->dataBaz() }} Settings
</a>

<!-- Renders.. -->
<a href="/settings">
    <svg class="icon" id="settings-icon" data-foo="bar" data-baz>
        <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#zondicon-cog"></use>
    </svg>
    Settings
</a>

使用精灵图

我推荐仅内联渲染图标，因为它非常简单，相较于精灵图有一些优势，并且没有真正的缺点，但如果你真的想要使用精灵图，我又能阻止你吗？

所以，如果你更愿意使用精灵图而不是内联渲染 SVG，首先在 blade-svg 配置文件中配置精灵图的路径。

<?php

return [
    // ...
    'spritesheet_path' => 'resources/assets/svg/spritesheet.svg',
    // ...
];

如果你的精灵图中的 SVG ID 属性有前缀，你可以使用 sprite_prefix 选项进行配置。

<?php

return [
    // ...
    'sprite_prefix' => 'zondicon-',
    // ...
];

接下来，将 inline 选项设置为 false，这将告诉 Blade SVG 默认使用精灵图来渲染图标，而不是内联整个 SVG。

<?php

return [
    // ...
    'inline' => false,
    // ...
];

确保使用 svg_spritesheet() 助手在任何使用 SVG 的布局的末尾渲染隐藏的精灵图。

<!-- layout.blade.php -->

<!DOCTYPE html>
<html lang="en">
    <head><!-- ... --></head>
    <body>
        <!-- ... -->

        {{ svg_spritesheet() }}
    </body>
</html>

即使你默认使用内联渲染，也可以通过使用流畅语法和链式调用 sprite 方法来强制 SVG 引用精灵图。

<a href="/settings">
    {{ svg_image('cog', 'icon icon-lg')->sprite() }} Settings
</a>

<!-- Renders.. -->
<a href="/settings">
    <svg class="icon icon-lg" data-foo>
        <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#zondicon-cog"></use>
    </svg>
    Settings
</a>

类似地，即使你默认使用精灵图，也可以通过链式调用 inline 方法来强制 SVG 内联渲染。

<a href="/settings">
    {{ svg_image('cog', 'icon icon-lg')->inline() }} Settings
</a>

<!-- Renders.. -->
<a href="/settings">
    <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>
    Settings
</a>

tomhatzer / blade-svg-origin

维护者

详细信息

README

Blade SVG

安装

入门指南

配置

基本用法

使用精灵图