Webpack: присоединяйте SVG-файлы к символу и генерируйте таблицу стилей CSS (sass) для каждой записи - PullRequest
Новая
       27

Webpack: присоединяйте SVG-файлы к символу и генерируйте таблицу стилей CSS (sass) для каждой записи

0 голосов
/ 11 апреля 2019

Вопрос в названии. Мой конфиг веб-пакета: https://github.com/skutin/webpack4-simple-boilerplate

Я пытаюсь создать систему значков с svg и символом. Что я хотел бы видеть в результате:

Входной сигнал: /src/icons/*.svg

Выход:

  1. /dist/symbols.svg - все иконки в одном файле

  2. /dist/css/icons.css с таким содержанием: 

.icon-favorite {
    background-image: url(/dist/symbols.svg#favorite);
}

.icon-forward {
    background-image: url(/dist/symbols.svg#forward);
}

Первым делом я понял с https://github.com/kisenka/svg-sprite-loader

Но я застрял с генерацией CSS на основе списка файлов.

Есть идеи, пожалуйста?

Обновление: я мигрирую из gulp, так что это мой текущий код, он показывает мой ожидаемый результат: https://gist.github.com/skutin/fa14e0a04713a065efcfa8fdc0af3db5

...