README

轻松在 Blade 模板中内联 SVG 图像。此包从 https://github.com/adamwathan/blade-svg 克隆而来

安装

您可以通过在项目的根目录下终端运行此命令来使用 Composer 安装此包

composer require willyw2k/blade-svg

入门

包的服务提供程序将自动注册自己。

发布 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>

willyw2k / blade-svg

维护者

详细信息

README

安装

入门

配置

基本用法

使用精灵图