search

vladshcherbin / rollup-plugin-svg-sprite

Create external svg sprite file from your bundle using Rollup
21 stars 5 forks source link

Return useful object instead empty string #3

Open warmrobot opened 4 years ago

warmrobot commented 4 years ago

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 commented 4 years ago

Something wrong?

klevytskyi commented 4 years ago

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