dada-amater/latte-svg

Latte 宏，将 SVG 文件嵌入 HTML

维护者

详细信息

github.com/ScrumWorks/latte-svg

源代码

问题

安装次数: 10,228

依赖关系: 0

建议者: 0

安全: 0

星标: 0

关注者: 8

分支: 0

开放性问题: 0

v1.4.1 2022-10-11 21:08 UTC

Requires

MIT 5c33a9125a7c36e9e145cc67a198325eb3b0b150

nettelatteembeddedsvgmacro

This package is not auto-updated.

Last update: 2024-10-01 17:05:33 UTC

README

<h1>
    Publications
    {svgFallback icon-group}
</h1>

在 IE 中生成的 HTML 代码结果可能如下

<h1>
    Publications
    <svg xmlns="..." class="..." ...>
        ... content of symbol-defs.svg file ...
    </svg>
</h1>

图标示例

{svg bin, some-class, icon-group}

在 IE 中生成的 HTML 代码结果可能如下

<svg class="some-class" aria-hidden="true">
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-bin"></use>
</svg>

在 Chrome、Firefox、Opera 中的结果可能如下

<svg class="some-class" aria-hidden="true">
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/images/svg/icon-group/symbol-defs.svg?v=1531909866#icon-bin"></use>
</svg>

目的

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

这样做的动机是可以通过 CSS 来样式化 SVG。如果像 <img src="icons/help.svg"> 那样将 SVG 链接为图像，则无法（容易地）实现这一点。

安装

使用 Composer 安装库

composer require dada-amater/latte-svg

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

extensions:
    latteSvg: DadaAmater\LatteSvg\Extension

latteSvg:
    baseDir: %wwwDir%
    wwwPathMask: 'images/svg/{group}/symbol-defs.svg'
    defaultGroup: base
    defaultIconClass: svg-icon
    iconNamePrefix: icon

注意事项和限制

由于 svg 是一个宏，它只编译一次并缓存。因此，当您更改宏配置（可能在 NEON 中）时，您可能需要清除 Latte 缓存。