README

允许通过简单的 Laravel Blade 指令，无需 JavaScript 即可内联 Font Awesome 5+ 的 SVG 图标。

安装

安装 composer 包

您可以使用 Composer 安装它

composer require hebinet/laravel-svg-icons

可选，您还可以发布包的配置文件。

php artisan vendor:publish --provider="Hebinet\SvgIcons\ServiceProvider" --tag=config

安装 SVG 字体

接下来，您需要通过 npm 安装 Font Awesome

npm install @fortawesome/fontawesome-free

npm 包中 SVG 文件的路径默认已配置。

但如果您想的话，可以通过在 config\icons.php 中的配置参数 path_to_fontawesome 来更改路径。

添加 Font Awesome SVG CSS 样式

为了正确显示图标，您需要添加一个额外的 CSS 文件，该文件可以在 npm @fortawesome/fontawesome-free 包中找到。

我建议使用 Webpack 在 public/css 目录中发布该文件。

// Inside webpack.mix.js

mix.copy('node_modules/@fortawesome/fontawesome-free/css/svg-with-js.css', 'public/css/svg-icons.css');

之后，您需要将 svg-icons.css 文件添加到您网站的头部部分。

<link rel="stylesheet" href="{{ mix('/css/svg-icons.css') }}"/>

为了正确继承父元素的字体颜色，您必须在全局 CSS 文件中添加以下样式声明

svg.svg-inline--fa {
    fill: currentColor;
}

用法

现在您可以添加新的 @icon blade 指令来添加内联 SVG 图标。指令的参数与您用于 Font Awesome 图标的参数相同。

您可以使用以下方式使用指令：

@icon('{style} {icon} {optional addtitonal classes},{optional title}')

示例

在 Blade 视图中的使用

{{-- Plain icon --}}
@icon('fas fa-download')

{{-- Icon with additional size class --}}
@icon('fas fa-download fa-5x')

{{-- And here with an additional title --}}
@icon('fas fa-download,Download button')
@icon('fas fa-download fa-5x,Download button')

在控制器方法或普通 PHP 代码中的使用

$icon = new Hebinet\SvgIcons\Icon('fas fa-download');

$iconWithAddClass = new Hebinet\SvgIcons\Icon('fas fa-download fa-5x');

$iconWithTitle = new Hebinet\SvgIcons\Icon('fas fa-download,Download Button');

// You can now render the icon to a string and do what ever you want with it
$svgContent = $icon->render();

可选地，您可以从构造函数中省略图标字符串，并在渲染方法中提供它，如下所示

$icon = new Hebinet\SvgIcons\Icon();
$svgContent = $icon->render('fas fa-download');

此包还提供了一个图标外观。遗憾的是，由于外观的工作方式，您必须在渲染方法中而不是构造函数中提供图标字符串。

首先，您必须在 app.php 文件的别名数组末尾 'register' 外观，如下所示

[
    ...

    'Icon' => Hebinet\SvgIcons\Facades\Icon::class,
]

之后，您可以使用外观，如下所示

$svgContent = Icon::render('fas fa-check');

额外路由

如果设置 $config['route']['enabled'] 为 true（默认：true），则将注册一个额外路由以提供基于 URL 的 SVG 图标内容的检索。

使用此路由，您可以通过常规 GET 操作加载图标，因此您可以在“非 Blade”场景中（如 Vue 组件）使用图标。

您可以使用它如下所示

/svgIcons/{style}/{icon}.svg
or
/svgIcons/{style}/{icon}.svg?title={title}

如果请求的图标不存在，它将抛出 Symfony\Component\HttpKernel\Exception\NotFoundHttpException 异常。

示例

// Plain icon
/svgIcons/fas/fa-download.svg

// And here with an additional title
/svgIcons/fas/fa-download.svg?title=Download button

无障碍性

• 默认情况下，SVG 标签添加了 role="img"
• 默认情况下，SVG 标签添加了 aria-hidden="true"，除非设置了 <title>

变更日志

有关最近更改的更多信息，请参阅 CHANGELOG

贡献

有关详细信息，请参阅 CONTRIBUTING

安全性

如果您发现任何安全问题，请通过电子邮件 office@hebinet.at 联系我们，而不是使用问题跟踪器。

许可证

MIT 许可证 (MIT)。有关更多信息，请参阅 许可证文件