README

轻松在 Blade 模板中使用 Zondicons，无论是作为内联 SVG 还是使用 SVG 精灵。

安装

composer require zondicons/blade-bridge

入门

在 Laravel 5.5 中，服务提供者将自动注册。在框架的旧版本中，只需将 Zondicons 服务提供者添加到 config/app.php 文件

<?php

return [
    // ...
    'providers' => [
        // ...

        Zondicons\ZondiconsServiceProvider::class,

        // ...
    ],
    // ...
];

发布 Zondicons 配置文件

php artisan vendor:publish --provider="Zondicons\ZondiconsServiceProvider"

如果您想使用精灵表单而不是内联渲染每个图标，请确保在布局的末尾渲染隐藏的精灵表单，以便使用图标，使用 svg_spritesheet() 辅助函数

<!-- layout.blade.php -->

<!DOCTYPE html>
<html lang="en">
    <head><!-- ... --></head>
    <body>
        <!-- ... -->

        {{ svg_spritesheet() }}
    </body>
</html>

配置

在 config/zondicons.php 中，您可以指定是否希望图标默认内联渲染，还是从精灵表单中引用图标

<?php

return [
    'inline' => true, // Render the full icon SVG inline by default
    // or...
    'inline' => false, // Reference the sprite sheet and render the icon with a `use` tag
    // ...
];

您还可以使用 class 选项指定您想要应用到图标上的任何默认 CSS 类

<?php

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

您可以通过空格分隔类，就像在 HTML 类属性中做的那样来指定多个类

<?php

return [
    'class' => 'icon inline-block',
];

基本用法

要将 Zondicon 插入到模板中，请简单地使用 @icon Blade 指令，传递图标的名称，可选地传递任何附加的类

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

<!-- Renders.. -->
<a href="/settings">
    <svg class="icon icon-lg">
        <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#zondicon-cog"></use>
    </svg>
    Settings
</a>

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

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

<!-- Renders.. -->
<a href="/settings">
    <svg class="icon icon-lg" alt="Gear icon">
        <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#zondicon-cog"></use>
    </svg>
    Settings
</a>

如果您有要声明的属性但没有附加的类，您可以传递一个关联数组作为第二个参数

<a href="/settings">
    @icon('cog', ['alt' => 'Gear icon']) Settings
</a>

<!-- Renders.. -->
<a href="/settings">
    <svg class="icon" alt="Gear icon">
        <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#zondicon-cog"></use>
    </svg>
    Settings
</a>

如果您想覆盖默认类名，在属性数组中指定一个类

<a href="/settings">
    @icon('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">
    @icon('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_icon 辅助函数来暴露设置图标属性的流畅语法

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

<!-- Renders.. -->
<a href="/settings">
    <svg class="icon" alt="Alt text" data-foo="bar" data-baz>
        <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#zondicon-cog"></use>
    </svg>
    Settings
</a>

您可以使用流畅语法和链式调用 sprite 方法来强制图标即使默认为内联也引用精灵表单

<a href="/settings">
    {{ svg_icon('cog', '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 方法来强制图标即使默认使用精灵也进行内联渲染

<a href="/settings">
    {{ svg_icon('cog', '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>

zondicons / blade-bridge

维护者

详细信息

README

安装

入门

配置

基本用法