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

Question

能否直接将SVG文件中的代码包含到Twig模板文件中？

就像这样：

{% include 'my.svg' %}

这将导致：

<svg viewbox=".... />

- Marten Zander

---

如果您将该文件放置在模板文件夹中，那么肯定可以。 - DarkBee

Answer 1

完成此任务的一种方法：

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

点击此处了解更多: https://www.theodo.fr/blog/2017/01/integrating-and-interacting-with-svg-image-files-using-twig/

- Tillit Forsikring

Answer 2

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

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

- 5n00py

Answer 3

我遇到了类似的问题，最终将我的svg文件重命名为.twig文件。

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

- LT86

Answer 4

对我来说，它起作用了：

{% 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文件中，使用raw过滤器输出内容，否则将转义SVG标记：

{{ some_svg|raw }}

- Aljoša

Answer 5

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()方法。

- scottsawyer

Answer 6

这对我在Drupal 9中有效：

{% include active_theme_path() ~ '/images/sprite.svg' %}

- Neil Blair

Answer 7

您可以通过设置新变量在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 }}

- MaikelKoopman