Add global nunjucks function - icon

alsolovyev · Apr 23, 2021 · 90e8777 · 90e8777
1 parent e26b808
commit 90e8777
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 0 deletions.
diff --git a/config/modules/njk-loader/functions/icon.js b/config/modules/njk-loader/functions/icon.js
@@ -0,0 +1,13 @@
+/**
+ * Simplifies work with SVG sprite.
+ *
+ * @param {string} name - SVG icon name
+ * @returns {string}
+ *
+ * @example
+ *  1. Import SVG ivon (app.js)
+ *    import '@/icons/heart.svg'
+ *  2. Use it in nunjucks template (template.njk)
+ *    <div>{{ icon('heart') | safe }}</div>
+ */
+module.exports = name => `<svg class='icon'><use xlink:href="#${name}"></use></svg>`
diff --git a/config/modules/njk-loader/index.js b/config/modules/njk-loader/index.js
@@ -1,6 +1,7 @@
 const path = require('path')
 const { Environment, FileSystemLoader } = require('nunjucks')
 const schema = require('./schema')
+const iconFn = require('./functions/icon')
 
 
 /**
@@ -30,6 +31,9 @@ module.exports = function(source) {
     this.addDependency(source.path)
   })
 
+  // Add a global value that will be available to all templates.
+  env.addGlobal('icon', iconFn)
+
   env.renderString(source, context, (error, HTMLString) => {
     callback(error ? error : null, HTMLString)
   })