I'm using Node.js, Express 4, and the Handlebars templating processor. Some of the page views that I'm rendering with Handlebars have several kBytes of static inline SVG code. Is there a simple clean way to put the SVG code into a separate file to be included in the Handlebars layout template? Ideally this include file would have a .svg extension, but .hbs would be acceptable.
I'm using Node.js, Express 4, and the Handlebars templating processor. Some of the page views that I'm rendering with Handlebars have several kBytes of static inline SVG code. Is there a simple clean way to put the SVG code into a separate file to be included in the Handlebars layout template? Ideally this include file would have a .svg extension, but .hbs would be acceptable.
Share Improve this question asked Feb 11, 2017 at 7:50 natesrcnatesrc 611 silver badge3 bronze badges3 Answers
Reset to default 4yesterday I was solving the the same problem. And I finished with loading svg file into string and then pass it to the handlebars template.
var svgTemplate = fs.readFileSync('./public/app/build/images/spriteAll.svg', 'utf8');
var express = require('express'),
router = express.Router();
router.get('/', function (req, res) {
res.render('main', {
svgTemplate: svgTemplate
});
});
//where main.hbs contains: ...
<body class="ng-cloak">
<div class="inline-svg">
{{{svgTemplate}}}
</div>
....
</body>
You can make a static assets folder (e.g. /public) in your project, and include it with Express: app.use(express.static('public')); Put your .svg file in there.
Then in your handlebars file simply add the SVG as you would in a normal HTML project, like <img src="your.svg">
You could try out handlebars-partial-file to include a file's contents as a Handlebars partial.