phaza/laravel-blade-inline-svg

允许你在HTML中内联SVG,这样你可以使用常规CSS来应用样式到SVG上。(不再需要为同一图标的不同颜色创建多个版本)

0.3 2016-02-02 15:07 UTC

This package is auto-updated.

Last update: 2024-09-13 20:26:40 UTC


README

这是什么

这个简单的扩展允许你在模板中内联SVG,这意味着你的SVG变成了HTML的第一公民,可以像所有其他HTML元素一样用CSS进行样式化。这减少了只为添加例如:hover效果而制作同一图标的多色版本的必要性。

a:hover svg line {
	fill: #r00;
}

如何实现

Phaza\InlineSvg\BladeInlineSvgServiceProvider::class 添加到 providers 数组,并将
"SvgInliner" => Phaza\InlineSvg\Facades\SvgInliner::class 添加到 aliases 数组中 config/app.php

可选地发布配置,它将被命名为 blade-inline-svg.php

配置

svg-path
这是内联器应查找SVG文件默认文件夹。

概述

@svg($path, $attributes)

$path:

如果 $pathDIRECTORY_SEPARATOR 开头,它被解析为绝对路径。
如果不,它被解析为从 config('blade-inline-svg.svg-path') 开始的相对路径。

$attributes:

$attributes 是一个关联数组,包含了你想设置的SVG元素属性。使用这个来添加类(或转换)以便轻松引用SVG。