README

Material Icons Laravel Bridge

轻松在 Laravel Blade 模板中使用 Google Material Design SVG 图标。

要查看所有可用图标，请参阅 SVG 目录。

要求

• PHP 7.2 或更高版本
• Laravel 7.14 或更高版本
• blade-ui-kit/blade-icons

使用版本 1.x？请查看 升级指南。

安装

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

composer require avvertix/materialicons-laravel-bridge

服务提供者 MaterialIcons\MaterialIconsBridgeServiceProvider::class 作为 Laravel 服务发现的一部分自动注册

配置

默认情况下，将类 icon 添加到 svg 标签中，然后在页面中插入。您可以通过使用 config/materialiconset.php 文件覆盖配置来更改此行为。

可以使用 php artisan vendor:publish --provider="MaterialIcons\MaterialIconsBridgeServiceProvider" 命令在您的配置目录中插入一个可用的配置文件。

您可以使用 class 选项指定您希望应用于图标的所有默认 CSS 类。

<?php

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

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

用法

Blade 指令

要将在模板中插入图标，请使用 @materialicon 指令，传递材料图标集名称、图标名称以及可选的任何附加类。

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

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

<a href="/settings">
    @materialicon('action', 'settings', 'icon-lg', ['alt' => 'Gear icon']) Settings
</a>

如果您愿意，可以直接使用 materialicon 助手。助手公开了用于设置图标属性的流畅语法。

<a href="/settings">
    {{ materialicon('actions', 'settings')->alt('Alt text')->dataFoo('bar')->dataBaz() }} Settings
</a>

Blade 组件

所有图标都可作为 Blade 组件使用，归功于 Blade Icons。

<x-materialicon_toggle-ic_star_half_24px />

组件名称格式为：包名 materialicon，包内的集合 toggle 和文件名 ic_star_half_24px。

您也可以向图标组件传递类。

<x-materialicon_toggle-ic_star_half_24px class="icon-lg"/>

或任何其他属性

<x-materialicon_toggle-ic_star_half_24px class="icon-lg" id="settings-icon" style="color: #555" data-baz/>

助手

如果您愿意，可以使用 materialicon 助手来公开用于设置 SVG 属性的流畅语法。

{{ materialicon('toggle', 'star_half')->id('star-icon')->dataFoo('bar')->dataBaz() }}

使用另一个图标集

尽管此包使使用 Google 的 Material Design 图标变得容易，但它并不局限于该图标集。

您仍然可以使用不同的图标集，因为幕后使用的是 blade-ui-kit/blade-icons 包。

请参阅 Blade Icon 的文档 了解所有配置选项以及如何在 Blade 视图中插入图标。

升级

从旧版本升级？请查看 升级指南。

致谢

• 图标来自 Google Material Design Icons 包。
• 该包功能最初是在Adam Wathan的杰出Blade SVG包的基础上创建的，现在由Dries Vints接手，作为blade-ui-kit/blade-icons。