Question

是否可以将svg文件中的代码直接包含在twig模板文件中？

类似的东西：

{% include 'my.svg' %}

将导致：

<svg viewbox=".... />

Answer 1

这样做的一种方法：

{{ source('my.svg') }}

在这里阅读更多内容： https://www.theodo.fr/blog/2017/01/integrating-and-interacting-with-svg-image-files-using-twig/

Answer 2

有类似的问题，最后将我的svgs重命名为.twig文件。

{% include 'my.svg.twig' %}

Answer 3

您可以通过设置新变量来执行Drupal8主题：

function theme_preprocess_page(&$variables) {
  $svg = file_get_contents(drupal_get_path('theme', 'socialbase') . '/images/icons.svg');
  $variables['svg_sprite'] = t('svg', array('svg' => $svg));
}

在您的twig文件中，您可以使用以下方式打印：

{{ svg_sprite }}

Answer 4

如果是主题，使用保存主题路径的{{ directory }}变量是个不错的选择。

{{ source(directory ~ '/images/my.svg') }}

Answer 5

对我来说，它有效：

{% include '/images/my.svg' %}

如果您使用Drupal 8，只需快速更新，因为上一个答案中的代码对我不起作用。我就这样做了：

function theme_preprocess_page(&$variables) {
  $svg = file_get_contents(drupal_get_path('theme', 'theme_name') . '/images/my.svg');
  $variables['some_svg'] = $svg));
}

在twig文件中，我这样输出了它：

{{ some_svg|raw }}

Answer 6

Twig函数source（）在Drupal中可以正常工作。我不确定使用source（）还是include更好，但是Symfony文档建议使用include（）函数而不是指令。 https://twig.symfony.com/doc/3.x/tags/include.html

我还发现添加主题名称空间会有所帮助，它告诉Twig查看模板目录。

假设：

模板文件是themes / custom / theme_name / templates / some-template.html.twig
svg文件是themes / custom / theme_name / templates / svg / sprite.svg

  {{ source('@theme_name/svg/sprite.svg') }}
{# or #}
  {% include '@theme_name/svg/sprite.html.twig' %}
{# or #}
  {{ include('@theme_name/svg/sprite.html.twig') }}

这同样适用于模块模板和主题模板。

我认为使用Source（）会带来性能上的好处，因为内容不会被解析，但是如果您想使用动态SVG，则可能应该使用include（）路线。

Twig：从SVG文件中包含外部代码

6 个答案: