在Twig模板中包含SVG

Question

我在适当的时候将我的资产从PNG更改为SVG，但是我很难在我的Twig模板中包含这些SVG。

我试图像这样包含SVG：

{{ source('/assets/img/crmpicco-horizontal-logo.svg') }}

但是，这会导致以下错误：

无法找到模板“/assets/img/crmpicco-horizo​​ntal-logo.svg”（查看：/ Library / WebServer / Documents / crmpicco / symfony / app / Resources / views，/ Library / WebServer / Documents / crmpicco / symfony /供应商/ symfony中/ symfony中/ src目录/ Symfony的/桥梁/嫩枝/资源/视图/表）。

为什么我不能将此SVG包含在与其他资产相同的目录中？具体来说，我有兴趣了解为什么不能将SVG视为Assetic的资产。

Answer 1

您必须使用twig扩展名crmpicco-horizontal-logo.svg.twig重命名svg文件并执行以下操作：

{% include ":svg:crmpicco-horizontal-logo.svg.twig" %}

在此示例中，文件夹svg位于app / Resources / views中

Answer 2

这是我使用的解决方案（Twig with Symfony 4和Webpack Encore）：

1. 在你的twig配置中，声明你的公共路径：

twig:
    paths:
        "%kernel.project_dir%/public": public_path

2. 像这样加载你的svg资产：

{{ source('@public_path'~asset('build/images/your_file.svg')) }}