README

Craft CMS Inline SVG

Craft CMS的Twig扩展，帮助您在模板中内联SVG。

为什么？

虽然Craft提供内置的svg()函数，但每次使用时都需要传递资产元素或完整路径。如果您的所有SVG都存储在相同的（或少数几个）目录中，此插件允许您使用更短、更方便的语法来内联SVG。

安装

通过Craft 3安装中的插件商店或使用Composer安装

composer require clubstudioltd/craft-inline-svg

配置

该插件附带一个config.php文件，其中定义了一些合理的默认值。

如果您想设置自己的值，应在Craft的/config目录中创建一个inlinesvg.php文件。此文件的內容将与插件默认值合并，因此您只需要指定要覆盖的设置的值。

示例配置

<?php

return [

    // Enter the paths to the directories where you store your individual SVG
    // files. Absolute paths should be used, which is simple using aliases
    // such as @webroot. (https://docs.craftcms.com/v3/config/#aliases)

    'paths' => [
        '@webroot/img/svg',
    ],

    // Specify any CSS classes that you want to add to all SVGs included in
    // your templates. The classes that you specify here will be merged
    // with any passed through as the second param of `inlineSvg()`.

    'class' => 'fill-current',

];

您应将存储SVG文件的目录路径添加到paths配置数组中。

如果您希望为输出的每个SVG添加一个类，请将其添加到class配置值中。使用空格分隔多个类。

基本用法

激活并配置后，您可以在模板中使用inlineSvg()函数。

{{ inlineSvg('icon') }}

在此示例中，插件将在所有配置的路径中查找名为icon.svg的文件，并返回找到的第一个匹配项。

添加额外的类

插件将为配置文件中定义的任何类添加到SVG输出中。您可以通过将它们作为第二个参数传递来添加更多类。

{{ inlineSvg('icon', 'another-class') }}

您可以使用class键即时覆盖配置文件中定义的类

{{ inlineSvg('icon', { class: 'override-class' }) }}

这将输出<svg class="override-class" ... >，无论配置文件中定义了哪些其他类。

添加额外的参数

您可以通过传递数组来添加额外的参数

{{ inlineSvg('icon', 'my-class', { id: 'icon-1' }) }}

这将输出

<svg id="icon-1" class="my-class" ... >

清理 & 命名空间

由于inlineSvg()助手在底层使用Craft的本地svg()助手，因此您仍然可以利用它提供的清理和命名空间功能。

{{ inlineSvg('icon', 'my-class', { sanitize: true, namespace: true }) }}

致谢

灵感来自blade-svg