README

<h1>
    Publications
    {embeddedSvg 'icons/help.svg',
        class => 'help-icon',
        data-toggle => 'popover',
        data-content => 'This is a list of your publications for last 5 years.'
    }
</h1>

生成的 HTML 代码可能如下所示

<h1>
    Publications
    <svg xmlns="..." class="help-icon" ...>
        ... content of help.svg file ...
    </svg>
</h1>

目的

这是一个单用途助手库，它为 PHP 模板引擎 Latte 定义了一个宏。它在编译时加载 SVG 源文件并将其嵌入到 HTML 代码中。

这样做的原因是可以在 CSS 中对 SVG 进行样式化。将 SVG 链接为图像（如 <img src="icons/help.svg">）并不容易（或无法）实现。

安装

使用 Composer 安装库

composer require milo/embedded-svg

在您的 config.neon 文件中注册扩展并配置它

extensions:
    embeddedSvg: Milo\EmbeddedSvg\Extension

embeddedSvg:
    baseDir: %wwwDir%/img

配置

还有一些其他可选选项

embeddedSvg:
    # change name of the macro
    macroName: svgIcon

    # pretty format SVG content (indent tags)
    prettyOutput: yes

    # default <svg> tag attributes, for example
    defaultAttributes:
        class: embedded
        height: 30px
        width: null

    # callbacks called when SVG loaded from file
    onLoad:
        - [SVGSanitizer, sanitize]

    # bitmask of LIBXML_* flags for DOMDocument::load() method
    libXmlOptions: (integer)

您可以多次加载扩展。在这种情况下，通过 macroName 选项更改宏名称。

选项 defaultAttributes 是为生成的 <svg> 标签提供的 XML 属性列表。这些属性将被合并。优先级从高到低为：

• 宏标签属性
• 默认属性
• 从文件加载的 <svg> 标签的属性

如果属性值为 null，则不会渲染。您可以通过这种方式从 SVG 文件中取消设置属性。

当 SVG 内容成功加载到 DOM 时，将调用添加到 onLoad 事件中的回调。其签名是

function (DOMDocument $dom, Milo\EmbeddedSvg\MacroSetting $setting) {
    ...
}

注意事项与限制

因为 embeddedSvg 是一个宏，它只编译一次然后被缓存。所以，当您更改宏配置（可能在 NEON 中），您可能需要清除 Latte 缓存。