rollup-plugin-svg-sprite
rollup-plugin-svg-sprite copied to clipboard
Return useful object instead empty string
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/
Something wrong?
@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)