2

gulp-svg-sprite を使用しています https://github.com/jkphl/gulp-svg-sprite

同じアイコンを異なるサイズで使用することはできますか? スプライトする前は、これは簡単で、実際、SVG について私が最も気に入っていることの 1 つでした。

http://codepen.io/anon/pen/qZQvYN

.icon-small,
.icon-large {
    background-image: url(https://lincolnloop.com/static/assets/img/lincolnloop-mark.9b93136b4561.svg);
    background-size: 100% 100%;
}

.icon-small {
    width: 50px;
    height: 50px;
}

.icon-large {
    width: 100px;
    height: 100px;
}

ただし、スプライトを使用しているため、バックグラウンドサイズはミックスインから取得されるため、このソリューションを使用できません。これを上書きしたとしても、background-position がおかしくなってしまいます。

http://codepen.io/anon/pen/JXezaK

.icon-small,
.icon-large {
    background-image: url(https://scotthsmith.com/projects/social-icons/blue/IconGrid.svg?v1.11);
  background-size: auto 400px;
  border: 1px solid grey;
}

.icon-small {
    width: 50px;
    height: 50px;
}

.icon-large {
    width: 100px;
    height: 100px;
}
4

2 に答える 2

1

SVGにテキストがないと思います。次に、使用してtransform: scale(2)修正する必要があります：

.icon-large {
  width: 50px;
  height: 50px;
  transform: scale(2)
}

このSOの質問は、同様の問題を議論しているようです。

于 2016-05-03T14:48:16.500 に答える
0

もう 1 つのオプションは、幅と高さを em 単位で指定し、font-size を使用してアイコンをスケーリングすることです。

詳細については、次のブログ投稿を参照してください: https://www.liquidlight.co.uk/blog/article/creating-svg-sprites-using-gulp-and-sass/

于 2016-06-17T12:13:59.220 に答える