Return useful object instead empty string

[warmrobot]

Idea from webpack svg-sprite-loader
In addition to create sprite, you can return symbol parameters in same time.

import twitterLogo from './logos/twitter.svg';
// twitterLogo === SpriteSymbol<id: string, viewBox: string, content: string>
// Extract mode: SpriteSymbol<id: string, viewBox: string, url: string, toString: Function>

const rendered = `
<svg viewBox="${twitterLogo.viewBox}">
  <use xlink:href="#${twitterLogo.id}" />
</svg>`;

For example, we can use great method with external sprite. Like this:

<svg viewBox="0 0 100 100" class="icon shape-codepen">
  <use xlink:href="/images/svg-defs.svg#shape-codepen"></use>
</svg>

https://css-tricks.com/svg-sprites-use-better-icon-fonts/

[vladshcherbin]

Hey, looks good to me. I've added a few notes, most are just stylistic. You can correct them or I'll merge and replace later.

The only real question is about export part, can you please explain me. Other than this it's good to merge and ship.

[vladshcherbin]

Lets go with just filename

[warmrobot]

TLDR: for compatibility with webpack loader config file.

All options names comes from webpack loader. I think about those guys, who switching from webpack to rollup. They can preserve all the options from webpack version. Or (and this my particular case) who support 2 parallel build system when on transition process from one bundler to anoher. Or webpack for dev, rollup for production. Or just for fun )

[vladshcherbin]

Lets go with markup instead of content

[warmrobot]

For compatibility with webpack options.

[vladshcherbin]

👍

[vladshcherbin]

I haven't used webpack svg loader, can you explain me, why we need to add _usage to symbol id here and what are url and toString() used for?

[warmrobot]

Well, _usage comes from here
https://github.com/nightflash/svg-baker/blob/master/packages/svg-baker/lib/symbol.js#L42
Actually, there is -usage, I made a typo. So you can refer to <use> tag. Set fill to another color or something. And id is for symbol itself.

url - is a full path to external svg, including target hash.
like /staticServerPath/img/sprite.svg#logo-usage

toString is a really nice lifehack when you really not need all the properties of this object, but just url

const spriteObj = {
    id: 'aaaId',
  	url: 'someStatic/svg.sprite#twi-usage',
    toString() { return this.url }
}
// I need id!
console.log(spriteObj.id)

// Just give me url, without destructuring or something
console.log(`<svg>${spriteObj}</svg>`)

[vladshcherbin]

Same as above, lets go with just filename

[warmrobot]

Just for compatibility of configs with webpack.

[warmrobot]

Something wrong?

[klevytskyi]

@vladshcherbin mb it's time to recall that PR? :) I've been waiting for something similar to webpack's svg-sprite-loader for ages and till now used naїvely written rollup-plugin-svg-spritesheet but it's methods are deprecated and don't see ant sense to contrib there.
Ping me if any help needed, cause I'd like to move to rollup@^2 with that one plugin)