ocubom/twig-svg-extension

SVG操作的自定义Twig过滤器套件

维护者

详细信息

github.com/ocubom/twig-svg-extension

主页

源代码

问题

安装: 2,349

依赖: 1

建议者: 0

安全: 0

星标: 2

关注者: 1

分支: 0

开放问题: 0

v2.3.0 2023-12-06 10:38 UTC

Requires

Requires (Dev)

MIT 912c2b2131bbf1402439ac6fa0132cea7a93d081

twigsvgtwig-extension

This package is auto-updated.

Last update: 2024-09-07 10:49:51 UTC

README

Ocubom Twig SVG 扩展

SVG操作的自定义Twig过滤器套件

Contributors Forks Stargazers Issues License

Version CI Code Quality Coverage

探索文档

报告错误 · 请求功能

内容

关于TwigSvgExtension

TwigSvgExtension 是一个用于SVG操作的自定义 Twig过滤器 套件。

这个套件最初是一个将SVG文件内联到HTML文档中的内部类。这个类曾经被嵌入到几个项目中。随着时间的推移，每个项目都对其版本进行了轻微的调整，导致开发碎片化和维护困难。因此，开发被统一在这个扩展中，公开发布，以供其他项目使用。

入门

安装

只需使用 composer 添加依赖关系

composer require ocubom/twig-svg-extension

或手动添加依赖关系

  1. 更新 composer.json 文件，添加以下行

    {
    "require": {
        "ocubom/twig-svg-extension": "^2.0.0"
    }
}

  2. 并更新依赖关系

    composer update "ocubom/twig-svg-extension"

使用

只需注册Twig扩展

$twig = new \Twig\Environment();
$twig->addExtension(new \Ocubom\Twig\Extension\SvgExtension());
$twig->addRuntimeLoader([      
     \Ocubom\Twig\Extension\SvgRuntime::class => function () use ($paths) {
        return new \Ocubom\Twig\Extension\SvgRuntime(
            new \Ocubom\Twig\Extension\Svg\Provider\FileSystem\FileSystemLoader($paths)
        );
    },
    \Ocubom\Twig\Extension\Svg\Provider\FontAwesome\FontAwesomeRuntime::class => function () use ($paths) {
        return new \Ocubom\Twig\Extension\Svg\Provider\FontAwesome\FontAwesomeRuntime(
            new \Ocubom\Twig\Extension\Svg\Provider\FontAwesome\FontAwesomeLoader($paths)
        );
    },
    \Ocubom\Twig\Extension\Svg\Provider\Iconify\IconifyRuntime::class => function () use ($paths) {
        return new \Ocubom\Twig\Extension\Svg\Provider\Iconify\IconifyRuntime(
            new \Ocubom\Twig\Extension\Svg\Provider\Iconify\IconifyLoader($paths)
        );
    },
]);

// You can also dynamically create a RuntimeLoader 
$twig->addRuntimeLoader(new class() implements RuntimeLoaderInterface {
    public function load($class)
    {
        if (\Ocubom\Twig\Extension\SvgRuntime::class === $class) {
            return new \Ocubom\Twig\Extension\SvgRuntime(
                new \Ocubom\Twig\Extension\Svg\Provider\FileSystem\FileSystemLoader($paths)
            );
        }
        
        if (\Ocubom\Twig\Extension\Svg\Provider\FontAwesome\FontAwesomeRuntime::class === $class) {
            return new \Ocubom\Twig\Extension\Svg\Provider\FontAwesome\FontAwesomeRuntime(
                new \Ocubom\Twig\Extension\Svg\Provider\FontAwesome\FontAwesomeLoader($paths)
            );
        }
                
        if (\Ocubom\Twig\Extension\Svg\Provider\Iconify\IconifyRuntime::class === $class) {
            return new \Ocubom\Twig\Extension\Svg\Provider\Iconify\IconifyRuntime(
                new \Ocubom\Twig\Extension\Svg\Provider\Iconify\IconifyLoader($paths)
            );
        }
        
        return null;
    }
});

该扩展定义了多个过滤器和函数。

SVG扩展核心

svg 函数

svg函数将外部定义的SVG嵌入到模板中。

{{ svg('path/to/file.svg', {option: value}) }}

路径相对于创建运行时提供的第一个参数中的搜索路径。

new \Ocubom\Twig\Extension\SvgRuntime(
    new \Ocubom\Twig\Extension\Svg\Provider\FileSystem\FileSystemLoader(
        new \Ocubom\Twig\Extension\Svg\Util\PathCollection(
            'first/search/path',
            'second/search/path',
        )
    )
);

第二个参数可用于向根元素添加一些属性

{{ svg('test', {
    'class': 'custom svg class',
    'title': 'This is a semantic title',
}) }}

svg（或svg_symbols）过滤器

该过滤器查找嵌入的SVG并将它们转换为符号的引用。

警告

该过滤器必须应用于HTML文档级别。

如果过滤器用于片段，将生成异常。

{%- apply svg -%}
<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="utf-8">
    </head>

    <body>

        <svg width="500" height="160">
            <polygon fill="#006791" class="shape" points="150,75 112.5,140 37.5,140 0,75 37.5,10 112.5,10"/>
            <rect    fill="#006791" class="shape" transform="translate(180 0)" x="10" y="10" width="130" height="130"/>
            <circle  fill="#006791" class="shape" transform="translate(350 0)" r="65" cx="75" cy="75"/>
        </svg>

    </body>
</html>
{%- endapply -%}

注意

可以使用svg函数嵌入将使用此过滤器转换的SVG文件。

FontAwesome提供者

fa 函数

生成简单的FontAwesome HTML标签

{{ fa('home', {title: "This is a title"}) }}

将生成

<span class="fa-solid fa-house" title="This is a title"></span>

警告

结果可能会有所不同。属性或其值的顺序可能不同。

fontawesome 过滤器

该过滤器查找FontAwesome标签并将它们替换为嵌入相应的SVG。

警告

该过滤器必须应用于HTML文档级别。

如果过滤器用于片段，将生成异常。

{%- apply fontawesome -%}
<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="utf-8">
    </head>

    <body>

        <span class="fa-solid fa-house" title="This is a title"></span>

    </body>
</html>
{%- endapply -%}

注意

可以使用fa函数生成标签。

Iconify提供者

iconify 过滤器

该过滤器查找Iconify SVG框架或Web组件并将它们替换为嵌入相应的SVG。

警告

该过滤器必须应用于HTML文档级别。

如果过滤器用于片段，将生成异常。

{%- apply iconify -%}
<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="utf-8">
    </head>

    <body>

        <span class="mdi:home" title="This is a title"></span>

    </body>
</html>
{%- endapply -%}

路线图

请参阅 开放问题 以获取提议的功能（和已知问题）的完整列表。

贡献

贡献使开源社区成为一个如此美妙的学习、灵感和创造的地方。您所做出的任何贡献都将被 高度重视。

如果您有改进此项目的建议，请fork存储库并创建一个pull request。您也可以简单地打开一个带有“enhancement”标签的问题。

  1. 分支项目。
  2. 创建功能分支（git checkout -b feature/your-feature）。
  3. 提交您的更改（git commit -m 'Add your-feature'）。
  4. 将更改推送到分支（git push origin feature/your-feature）。
  5. 打开拉取请求。

作者

有关参与此项目的贡献者列表。

许可

在MIT许可下分发。更多信息请参阅LICENSE。