如何在Nunjucks模板中动态加载目录中的SVG文件？

情况1：服务端渲染时动态引入SVG #

如果是Node.js服务端环境用Nunjucks，直接通过变量拼接路径就能实现，之前失败大概率是路径配置或变量用法问题。

• 先把图标目录加入模板加载器的搜索路径：

const nunjucks = require('nunjucks');
nunjucks.configure(['views/', 'assets/icons/'], { // 新增图标所在目录
  autoescape: true,
  express: app // 用Express框架时传入实例
});

• 模板里通过传入的iconName动态引入：

{% include iconName + '.svg' %}

• 渲染模板时传入图标名称：

res.render('page.njk', { iconName: 'user' }); // 对应assets/icons/user.svg

情况2：客户端动态加载SVG（纯前端场景） #

纯前端用Nunjucks无法直接用{% include %}加载本地文件（浏览器安全限制），需要用JS动态请求SVG内容再插入页面。

• 模板里预留图标容器：

<div class="icon-box" data-icon="{{ iconName }}"></div>

• 编写JS实现动态加载：

// 图标目录假设为/assets/icons/
async function loadSvgIcon(container) {
  const iconName = container.dataset.icon;
  if (!iconName) return;

  try {
    const res = await fetch(`/assets/icons/${iconName}.svg`);
    const svgHtml = await res.text();
    container.innerHTML = svgHtml;
    // 给SVG加类名方便样式控制
    container.querySelector('svg')?.classList.add('custom-icon');
  } catch (err) {
    console.error(`加载图标${iconName}失败:`, err);
    container.innerHTML = '<span class="icon-fail">图标加载失败</span>';
  }
}

// 页面加载后执行
document.addEventListener('DOMContentLoaded', () => {
  document.querySelectorAll('.icon-box').forEach(loadSvgIcon);
});

排查之前{% include %}失败的常见原因 #

• 路径错误：确认SVG文件的相对路径和模板加载器的搜索目录匹配，比如模板在views/，图标在views/icons/，路径要写icons/${iconName}.svg
• 变量未传递：检查渲染模板时是否正确传入了iconName，有没有拼写错误
• 加载器未配置图标目录：如果图标不在模板默认搜索路径，必须把目录加入configure的参数列表

内容的提问来源于stack exchange，提问作者kishore kumar