web-dev-qa-db-ja.com

小枝：SVGファイルから外部コードを含める

Svgファイルのコードをtwigテンプレートファイルに直接含めることはできますか？

何かのようなもの：

{% include 'my.svg' %}

その結果：

<svg viewbox=".... />
svgtwiginlinetemplating
11
Marten Zander

これを行う1つの方法：

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

詳細はこちら： https://www.theodo.fr/blog/2017/01/integrating-and-interacting-with-svg-image-files-using-twig/

12
leSmooth

同様の問題があり、svgの名前を.twigファイルに変更してしまいました。

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

7
LT86

新しい変数を設定することにより、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 }}
1
MaikelKoopman

私にとっては、うまくいきました：

{% 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 }}
1
Aljoša

テーマの場合、テーマへのパスを保持する{{ directory }}変数を使用することをお勧めします。

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

twig function 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（）ルートに移動する必要があります。

0
scottsawyer