как использовать svg sprite в файле sass в сочетании со сборкой webpack - PullRequest
Новая
       36

как использовать svg sprite в файле sass в сочетании со сборкой webpack

0 голосов
/ 21 октября 2018

Я использую webpack для генерации svg spritesheet, используя следующую команду: 

{
    test: /\.svg$/,
    loader: 'svg-sprite-loader',
    options: {
      extract: true,
      spriteFilename: '/icons/icons.svg',
      runtimeCompat: true
    }
}

Отлично работает.Создает лист спрайта.

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
   <defs>
      <style>.sprite-symbol-usage {display: none;}
    .sprite-symbol-usage:target {display: inline;}</style>
      <symbol viewBox="0 0 32 32" id="facebook2">
         <title>facebook2</title>
         <path d="M29 0h-26c-1.65 0-3 1.35-3 3v26c0 1.65 1.35 3 3 3h13v-14h-4v-4h4v-2c0-3.306 2.694-6 6-6h4v4h-4c-1.1 0-2 0.9-2 2v2h6l-1 4h-5v14h9c1.65 0 3-1.35 3-3v-26c0-1.65-1.35-3-3-3z" />
      </symbol>
      <symbol viewBox="0 0 32 32" id="glass">
         <title>glass</title>
         <path d="M24.306 0.527c-0.174-0.324-0.513-0.527-0.881-0.527h-14.85c-0.368 0-0.707 0.202-0.881 0.527-1.108 2.063-1.694 4.474-1.694 6.973 0 3.294 1.012 6.401 2.849 8.748 1.42 1.814 3.203 3.017 5.151 3.505v10.247h-3c-0.552 0-1 0.448-1 1s0.448 1 1 1h10c0.552 0 1-0.448 1-1s-0.448-1-1-1h-3v-10.247c1.949-0.488 3.732-1.691 5.151-3.505 1.837-2.347 2.849-5.454 2.849-8.748 0-2.499-0.586-4.91-1.694-6.973zM9.191 2h13.619c0.78 1.653 1.191 3.542 1.191 5.5 0 0.168-0.003 0.334-0.009 0.5h-15.981c-0.006-0.166-0.009-0.332-0.009-0.5-0-1.958 0.41-3.847 1.191-5.5z" />
      </symbol>
      <symbol viewBox="0 0 32 32" id="glass2">
         <title>glass2</title>
         <path d="M27.786 5.618c0.236-0.301 0.28-0.711 0.113-1.055s-0.517-0.563-0.899-0.563h-22c-0.383 0-0.732 0.219-0.899 0.563s-0.123 0.754 0.113 1.055l9.786 12.455v11.927h-3c-0.552 0-1 0.448-1 1s0.448 1 1 1h10c0.552 0 1-0.448 1-1s-0.448-1-1-1h-3v-11.927l9.786-12.455zM24.943 6l-3.143 4h-11.599l-3.143-4h17.885z" />
      </symbol>
      <symbol viewBox="0 0 32 32" id="mug">
         <title>mug</title>
         <path d="M30 10h-6v-3c0-2.761-5.373-5-12-5s-12 2.239-12 5v20c0 2.761 5.373 5 12 5s12-2.239 12-5v-3h6c1.105 0 2-0.895 2-2v-10c0-1.105-0.895-2-2-2zM5.502 8.075c-1.156-0.381-1.857-0.789-2.232-1.075 0.375-0.286 1.075-0.694 2.232-1.075 1.811-0.597 4.118-0.925 6.498-0.925s4.688 0.329 6.498 0.925c1.156 0.381 1.857 0.789 2.232 1.075-0.375 0.286-1.076 0.694-2.232 1.075-1.811 0.597-4.118 0.925-6.498 0.925s-4.688-0.329-6.498-0.925zM28 20h-4v-6h4v6z" />
      </symbol>
   </defs>
   <use id="facebook2-usage" xlink:href="#facebook2" class="sprite-symbol-usage" />
   <use id="glass-usage" xlink:href="#glass" class="sprite-symbol-usage" />
   <use id="glass2-usage" xlink:href="#glass2" class="sprite-symbol-usage" />
   <use id="mug-usage" xlink:href="#mug" class="sprite-symbol-usage" />
</svg>

Я не совсем уверен, почему он разбирает viewBox = "0 0 32 32" для каждого символа.У исходного актива его нет.Не уверен, откуда это исходит.Оригинальный актив 

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32">
<title>facebook2</title>
<path d="M29 0h-26c-1.65 0-3 1.35-3 3v26c0 1.65 1.35 3 3 3h13v-14h-4v-4h4v-2c0-3.306 2.694-6 6-6h4v4h-4c-1.1 0-2 0.9-2 2v2h6l-1 4h-5v14h9c1.65 0 3-1.35 3-3v-26c0-1.65-1.35-3-3-3z"></path>
</svg>

Я взял иконки из icomoon.io.Вопрос теперь в том, как бы я использовал иконки в файле sass.Я вижу много примеров того, как использовать их в реактивном компоненте, но не могу найти ни одного примера, как использовать его в sass в сочетании с веб-пакетом.Я использую модуль sass-loader для компиляции моих файлов sass.

...