将文本文件内容加载到Rails的JavaScript中

Question

I have an SVG file that I want to dynamically load, inline, via JavaScript in my Rails application. I need to load the SVG inline so that I can apply a CSS fill property to it.

I'd rather not load the SVG file via AJAX to avoid potential lag before the SVG is visible.

Ideally what I'd like to do is to tell Rails that, in my app/assets/icons/ directory, I have icons calendar.svg and phone.svg , and that Rails (Sprockets?) should take the contents of those SVG files and set them as string values in a JavaScript object SVG , so that I may access them in my JavaScript code like this:

var view = {
  render: function () {
    this.element.innerHTML = SVG['app/assets/icons/calendar.svg'];
  }
};

Preferably, the solution is generalized to more than just SVGs, and I could potentially load any data in text format via JS, eg TEXT['app/assets/icons/calendar.svg'] or even TEXT['app/assets/etc/some-text-file.text'] .

Is there any way to do this in Rails?

Answer 1

We ended up writing a sprockets transformer for this: https://github.com/cloversites/js-text-rails

$ bundle install js-text-rails

require your files, eg in app/assets/javascripts/application.js:

//= require_tree ../images/icons

Where app/assets/images/icons contains the file envelope.svg .

Anywhere in your application's JavaScript code, access the text file contents via the global SVG variable:

var envelopeIcon = SVG['icons/envelope'];
// Do something with `envelopeIcon`...