README

enflow/laravel-svg 包提供了一个简单的方法，将SVG包含到您的模板中。

安装

您可以通过composer安装此包

composer require enflow/laravel-svg

用法

您可以在模板中使用 svg 助手

{{ svg('clock') }}

// Adding a class
{{ svg('clock')->class('mr-2') }}

// Adding an extra attribute
{{ svg('clock')->class('mr-2')->id('clock-icon') }}

// Specify the pack
{{ svg('clock')->pack('fas') }}

配置

您可以将配置发布以设置您正在使用的包

推送配置文件

php artisan vendor:publish --provider="Enflow\Svg\SvgServiceProvider"

包

您可以在您的应用程序中指定多个包。默认情况下，仅包含 resources/img/svgs 包，但您可以在配置中指定额外的图标集，如Font Awesome。当包含SVG时未指定包，将使用配置中定义的顺序找到的第一个包。您可以通过调用SVG助手返回的 Enflow\Svg\Svg 类上的 pack 方法来覆盖此行为。

<?php

return [
    'packs' => [
        'custom' => resource_path('img/svgs/'),
        'fas' => [
            'path' => base_path('vendor/fortawesome/font-awesome/svgs/solid/'),
            'auto_size_on_viewbox' => true,
        ],
        'fal' => [
            'path' => base_path('vendor/fortawesome/font-awesome/svgs/light/'),
            'auto_size_on_viewbox' => true,
        ],
    ],
];

示例

Font Awesome 5 Free

安装

composer require fortawesome/font-awesome

参考： https://github.com/FortAwesome/Font-Awesome

配置

<?php

return [
    'packs' => [
        'custom' => resource_path('img/svgs/'),
        'fas' => [
            'path' => base_path('vendor/fortawesome/font-awesome/svgs/solid/'),
            'auto_size_on_viewbox' => true,
        ],
    ],
];

Font Awesome 5 Pro

安装

yarn add @fortawesome/fontawesome-pro

Font Awesome 5不提供composer包。我们将通过npm/yarn管道安装它，并使用该路径

参考： https://fontawesome.com/how-to-use/on-the-web/setup/using-package-managers

配置

<?php

return [
    'packs' => [
        'custom' => resource_path('img/svgs/'),
        'fas' => [
            'path' => base_path('node_modules/@fortawesome/fontawesome-pro/svgs/solid/'),
            'auto_size_on_viewbox' => true,
        ],
    ],
];

中间件

此包包括 Enflow\Svg\Middleware\InjectSvgSpritesheet 中间件，该中间件会自动注册并添加到您的 web 组。

这将在模板的顶部添加SVG精灵表，其中添加所有唯一的SVG。在您的模板中渲染的SVG将引用此精灵表。这样做的原因是在循环中，SVG只在一个地方，而不是每行都重复。

您可以将 register_middleware_automatically 设置为 false 来禁用自动注入

config/svg.php

<?php

return [
    'register_middleware_automatically' => false
];

与其他中间件一起使用

当在 enflow/laravel-svg 与另一个中间件结合使用时，该中间件必须始终在响应中的SVG注入之后执行，您可以使用Laravel路由器上的 $middlewarePriority 逻辑来确保它始终运行。

此数组中的顺序是反直觉的：首先必须指定 CacheResponse 中间件，然后是SVG注入中间件。这是由于中间件响应的构建方式。这确保首先注入SVG，然后缓存完整的响应。

使用 spatie/laravel-responsecache 的示例

app/Http/Kernel.php

protected $middlewarePriority = [
    ...
    \Spatie\ResponseCache\Middlewares\CacheResponse::class,
    \Enflow\Svg\Middleware\InjectSvgSpritesheet::class,
];

测试

$ composer test

贡献

有关详细信息，请参阅 CONTRIBUTING

安全

如果您发现任何安全相关的问题，请通过电子邮件 michel@enflow.nl 而不是使用问题跟踪器。

鸣谢

特别感谢

github.com/jerodev/laravel-font-awesome 的想法
github.com/adamwathan/blade-svg 的研究
github.com/spatie 用于 GitHub Actions 测试工作流程。

关于 Enflow

Enflow 是一家位于荷兰阿芬丹的数字创意代理机构。我们专注于开发网络应用程序、移动应用程序和网站。您可以在我们的网站上找到更多信息在这里。

许可协议

MIT 许可协议 (MIT)。请参阅许可文件了解更多信息。

enflow / laravel-svg

维护者

详情