Помощь в поиске плагина для webpack3

272
20 августа 2018, 15:10

Нужна помощь в поиске плагина для webpack 3 который будет "пробегать" по указанной в опциях директории, содержащий svg-файлы и компилить файл формата scss со следующим содержанием:

.n-icon  {
  &-24-hours {
      &:before {
          content: '';
          width: em(26);
          height: em(26);
          background-image: url('data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2226%22%20height%3D%2226%22%20viewBox%3D%220%200%2026%2026%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20stroke%3D%22%23A1A1A2%22%20stroke-width%3D%222%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M25%2013c0%206.627-5.373%2012-12%2012S1%2019.627%201%2013%206.373%201%2013%201c4.836%200%209.004%202.86%2010.904%206.983%22%2F%3E%3Cpath%20d%3D%22M24.465%204.303l-.51%203.807-3.557-.477%22%2F%3E%3Cpath%20d%3D%22M17.8%2017V9l-4%205.6h6.4%22%2F%3E%3Cpath%20d%3D%22M11.4%2017H6.6s4.8-3.7%204.8-5.6C11.4%2010.07%2010.205%209%209%209c-1.205%200-2.4%201.195-2.4%202.4%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E');
          background-size: cover;
      }
  }
  &-access {
      &:before {
          content: '';
          width: em(48);
          height: em(48);
          background-image: url('data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2248%22%20height%3D%2248%22%20viewBox%3D%220%200%2048%2048%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20stroke%3D%22none%22%20stroke-width%3D%221%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Crect%20fill%3D%22%23468CE4%22%20x%3D%220%22%20y%3D%220%22%20width%3D%2248%22%20height%3D%2248%22%20rx%3D%2224%22%2F%3E%3Cg%20stroke%3D%22%23FFF%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222%22%3E%3Cpath%20d%3D%22M16.364%2013l3.818%208.847c0%202.094-1.928%203.792-5.09%203.792-3.164%200-5.092-1.7-5.092-3.793L16.364%2013h15.272L38%2021.847c0%202.094-1.928%203.792-5.09%203.792-3.164%200-5.092-1.7-5.092-3.793L31.636%2013%22%2F%3E%3Cpath%20d%3D%22M24%2013v21.486%22%2F%3E%3Cpath%20d%3D%22M10%2021.847h10.182%22%2F%3E%3Cpath%20d%3D%22M27.818%2021.847H38%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E');
          background-size: cover;
      }
  }
...

Пока удалось найти более менее подходящий плагин SVG Spritemap Webpack Plugin, однако, он не компилит ничего внятного, либо я неправильно настроил конфиг, выглядит он вот так:

new SVGSpritemapPlugin({
    src: path.join(source, 'icons/svg-icons/**/*.svg'),
    filename: 'icons-sprite.svg',
    // prefix: 'n-icon',
    styles: path.join(source, 'stylesheets/root/components/icons/icons.svg.scss'),
    svgo: false,
    svg4everybody: false,
}));

Может кто-то уже решал подобную задачу и может поделиться опытом?

READ ALSO
Импорт внешних скриптов из бандла JavaScript

Импорт внешних скриптов из бандла JavaScript

Возможно ли импортирование внешних скриптов из уже скомпилированного бандла через webpack

243
export объекта из файла с чистым js в App.js react

export объекта из файла с чистым js в App.js react

Есть файл firstjs на чистом js, который возвращает объект, например, data

241