Importing from an addon

[lolmaus]

ember-inline-svg fails importing an svg from an addon's public/ folder.

I would like to inline an svg from an addon's public/ folder both in the main app and in the addon itself.

[lolmaus]

These issues might be related:

• MergeTrees in addon's ember-cli-build.js doesn't copy files to /dist folder ember-cli/ember-cli#4470
• Packager ember-cli/ember-cli#4211

Can we have some workaround until ember-cli/ember-cli#4211 lands?

[vitch]

We are using the following workaround in an internal addon we have developed which relies on ember-inline-svg:

addonPath: function(path) {
    if (!this.isDevelopingAddon()) {
      path = ['node_modules', this.name, path].join('/');
    }
    return path;
  },

included: function(app) {
  var emberInlineSvgOptions = app.options.svg || {};
  if (!emberInlineSvgOptions.paths) {
    emberInlineSvgOptions.paths = ['public']; // TODO: use ember-inline-svg's defaults directly: https://github.com/minutebase/ember-inline-svg/pull/19
  }
  var ourPublicPath = this.addonPath('public');
  if (emberInlineSvgOptions.paths.indexOf(ourPublicPath) === -1) {
    emberInlineSvgOptions.paths.push(ourPublicPath);
  }
  app.options.svg = emberInlineSvgOptions;

  this._super.included(app);

  this.addons.forEach(function(addon){
    if (['ember-inline-svg'].indexOf(addon.name) > -1) {
      addon.included.apply(addon, [app]);
    }
  });

},

in addition to having ember-inline-svg in dependencies rather than devDependencies for our addon this seems to work well...

[lolmaus]

@vitch Thank you so much for sharing! Where does this code go?

[vitch]

In the index.js of the addon which depends on ember-inline-svg

[lolmaus]

@vitch I've tried your workaround and it worked for me. Thank you so much!

The only issue is that and addon's SVGs located at my-addon/public/svg/foo.svg is accessed via:

{{inline-svg 'svg/foo'}}

According to Ember CLI docs, addon's public folder gets mixed into the app's public folder as a subfolder. For example, when you access the same SVG file via <img> or CSS, you would do:

.foo {
  background-image: url('/my-addon/svg/foo.svg');
}

<img src='/my-addon/svg/foo.svg'>

For consistency, I would like ember-inline-svg to access files like this:

{{inline-svg 'my-addon/svg/foo'}}

Can your code be adjusted to achieve that?

[quantuminformation]

Have you guys worked out how to import from node modules in a brocfile?