GithubHelp home page GithubHelp logo

Comments (6)

vitch avatar vitch commented on June 1, 2024 3

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...

from ember-inline-svg.

lolmaus avatar lolmaus commented on June 1, 2024

These issues might be related:

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

from ember-inline-svg.

lolmaus avatar lolmaus commented on June 1, 2024

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

from ember-inline-svg.

vitch avatar vitch commented on June 1, 2024

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

from ember-inline-svg.

lolmaus avatar lolmaus commented on June 1, 2024

@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?

from ember-inline-svg.

quantuminformation avatar quantuminformation commented on June 1, 2024

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

from ember-inline-svg.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.