4

I am writing an emberjs application where I wrote a custom component to load images from a sprite file. However, I wanted to make the component generic and to be able to load any image from a file specified in the template. For instance, I want to be able to do something like below:

{{svg-icon css-class="" svg-sprite="svgs/svg-sprites.svg" svg-id="special"}}

I was able to get the component to work, but then I want go further and instead of typing/specifying a svg file each time I want to configure the file in application settings under config/environment.js

So, I thought I'd write an ember initializer that would inject the ENV.APP config object in all my components. So in my application initializer, I have the following code:

export function initialize(registry, application) {
  application.register('config:main', window.MyApp, {instantiate: false});
  application.inject('component', 'config', 'config:main');
}

The above works perfectly and in my component javascript file I could simply do:

this.get('config').SPRITE_LOCATION;

to get the location of the sprite file.

But I'm wondering if this is the right approach? Is there a better way to do it? Would it be better if I change the component to a CLI addon? How would I access application config and make it available to my cli addon?

Thank you for your help.

Patsy Issa
  • 11,113
  • 4
  • 55
  • 74
MojoJojo
  • 3,897
  • 4
  • 28
  • 54

1 Answers1

0

This approach works well, if you want to use an app configuration in an addon, you can use Ember.getOwner() method.

For example, in your component file you can add something similar:
svgPath: computed(function () { return get(Ember.getOwner(this).resolveRegistration('config:environment'), 'svgPath'); }),

thisFunction
  • 31
  • 4