rollup-plugin-svg-sprite icon indicating copy to clipboard operation
rollup-plugin-svg-sprite copied to clipboard

Return useful object instead empty string

Open warmrobot opened this issue 6 years ago • 2 comments

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/

warmrobot avatar Nov 24 '19 17:11 warmrobot

Something wrong?

warmrobot avatar Dec 27 '19 13:12 warmrobot

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

klevytskyi avatar May 21 '20 15:05 klevytskyi