Add ability to pass options to sprite runtime constructor

[jburghardt]

trafficstars

Do you want to request a feature, report a bug or ask a question? feature request

What is the current behavior?

importing my own spriteModule.js throws compilation errors. i think its related to untranspiled dependencie in svg-baker.

What is the expected behavior?

we should be able to load our own spriteModul without transpiling dependencies. Better would be to pass config to the loader, where we can custopmise attributes and the id of the <svg ...> tag

If the current behavior is a bug, please provide the steps to reproduce, at least part of webpack config with loader configuration and piece of your code.

webpack loader

use: [ 'svg-sprite-loader?spriteModule='+path.resolve('./src/lib/sprite.js'), 'svgo-loader', ],

Error SyntaxError: Unexpected token import [1] at createScript (vm.js:56:10) [1] at Object.runInThisContext (vm.js:97:10) [1] at Module._compile (module.js:542:28) [1] at Object.Module._extensions..js (module.js:579:10) [1] at Module.load (module.js:487:32) [1] at tryModuleLoad (module.js:446:12) [1] at Function.Module._load (module.js:438:3) [1] at Module.require (module.js:497:17)

If this is a feature request, what is motivation or use case for changing the behavior?

creating a own sprite.js just to pass some options seems too much hazzle we need to remove/customize attributes in the svg element, e.g

style="position: absolute; width: 0; height: 0" id="__SVG_SPRITE_NODE__"

due to accessibility reasons. I would like to pass attributes into the loader options.

Please tell us about your environment:

• Node.js version: v6.11.2
• webpack version: ? 2.7.0
• svg-sprite-loader version: 3.2.6
• OS type & version: ? Windows 7

[kisenka]

@omRm sorry for the delay, could you please create a repo where I can reproduce described error? Because by default transpiled code is used - https://github.com/kisenka/svg-sprite-loader/blob/master/lib/config.js#L58

[jburghardt]

Yes, the sprite.build you export is transpiled, but when pointing to my own sprite module i get an error. even if i only import the sprite module and export it right away, i get the error. This occures not while building, but when starting my bundle with nodemon

the sprite.js i forgot to post

import Sprite from 'svg-sprite-loader/runtime/sprite';     
export default Sprite;

more elaborate error

D:\...\node_modules\svg-sprite-loader\runtime\sprite.js:1
(function (exports, require, module, __filename, __dirname) { import Sprite from 'svg-baker-runtime/src/sprite';
                                                              ^^^^^^

SyntaxError: Unexpected token import
    at createScript (vm.js:56:10)
    at Object.runInThisContext (vm.js:97:10)
    at Module._compile (module.js:542:28)
    at Object.Module._extensions..js (module.js:579:10)
    at Module.load (module.js:487:32)
    at tryModuleLoad (module.js:446:12)
    at Function.Module._load (module.js:438:3)
    at Module.require (module.js:497:17)
    at require (internal/module.js:20:19)
    at Object.<anonymous> (D:\...\dist\server\server.bundle.js:9688:18)
    at __webpack_require__ (D:\...\dist\server\server.bundle.js:20:30)
    at Object.<anonymous> (D:\...\dist\server\server.bundle.js:92:15)
    at __webpack_require__ (D:\...\dist\server\server.bundle.js:20:30)
    at Object.defineProperty.value (D:\...\dist\server\server.bundle.js:9221:73)
    at __webpack_require__ (D:\...\dist\server\server.bundle.js:20:30)
    at Object.defineProperty.value (D:\...\dist\server\server.bundle.js:150:26)

i will be able to create a repo sometime this week!

[kisenka]

Try to import transpiled sprite in your code:

import Sprite from 'svg-sprite-loader/runtime/sprite.build'; 

[jburghardt]

Yes, this does work. but is there a way to set id and style from here ? calling the constructor does not work

[kisenka]

Nope, but you can instantiate sprite class by your own:

import BrowserSprite from 'svg-baker-runtime/browser-sprite'; // <- transpiled

const sprite = new BrowserSprite({
  attrs: {
    id: 'MY_SUPER_ID',
    style: 'border: 1px solid red'
  }
});

document.addEventListener('DOMContentLoaded', function() {
  sprite.mount(document.body, true);
});

export default sprite;

[jburghardt]

Rendering this server side should not work, right ?

[kisenka]

No, but for SSR you can use plain sprite svg-baker-runtime/sprite. Tell me what you want to do :)

[jburghardt]

We use SSR and need to be in full controll of the HTML output. right now the html output contains

id="__ SVG_SPRITE_NODE __" and a style="position: absolute; width: 0; height: 0"

we need to change id and remove style.

when importing svg-baker-runtime/sprite i throws ReferenceError: document is not defined

So maybe it would be easier to be able to pass options to the svg-sprite-loader to controll id and style of the surrounding

[kisenka]

Have you seen server side rendering example?

Also you can check runtime which uses when target: 'node' is set in webpack config. You can copy-paste it (replace svg-baker-runtime/src/sprite with svg-baker-runtime/sprite) and configure like you want.

[jburghardt]

Server side rendering part is working great, but changing id and style is not. Setting the HTML output in the Components where svgs are rendered is no option for me.

i also feel like importing svg-beaker runtime to control what svg-sprite-loader should be doing is not a correct way, and leads to much bloated code.

i think we could close this issue and i would open up a feature request if you'd like

[kisenka]

I understand you, thanks for idea. It's minor for me, but still important.

[jburghardt]

No Problem, i appreciate the concern !

maybe something like this would help ? we already have a direct configuration for symbolID.

 loader: 'svg-sprite-loader',
            options: {
             svgId: 'mysvgID',
             svgClass: 'svgClass',
             svgStyle: 'border: 1px solid red'
            }

or custom attributes ?

[kisenka]

Technically I need to use some placeholder in runtime code (something like new BrowserSprite(__OPTIONS__)) and then replace it in loader runtime generator.

[jburghardt]

Yes, i think that will do

[davidpelayo]

Any progress on this?

[jawn-ha]

Any progress on this?