@mgfck

Как прикрутить переменную из SASS к фоновому SVG (использую Webpack)?

Привет!
Друзья, прошу помощи.
Есть у меня file.svg.
<svg fill="$main-color" ... </svg>
Есть CSS (SASS):
$main-color: red;
.item {
background: url('file.svg');
}

Как сделать так, чтобы цвет в файле file.svg подставлялся из SASS, а затем svg-файл инклюдился в css в виде base64 или utf-8?
Для сборки использую Webpack.
Спасибо.
  • Вопрос задан
  • 387 просмотров
Решения вопроса 1
@mgfck Автор вопроса
В общем, сам спросил -- сам ответил.
Делается это так:
устанавливаем npm install svg-fill-loader --save
1. в конфиге вебпака прописываем правило для svg:
{
        test: /\.svg((\?.*)?|$)/,
        loaders: [
          'url-loader',
          'svg-fill-loader?selector=.svg-fill' // `selector` option will be used for all images processed by loader
        ]
      },


2. делаем миксин в файле с переменными scss:
$main-color: red;
@mixin apply-background-image($url, $color) {
   $base-color: str-slice(inspect($color), 2);
   background-image: unquote('url("' + $url + "?fill=%23" + $base-color +'")');
}

3. в файле svg прописываем класс .svg-fill для всего svg или path (path class="svg-fill")
4. и делаем подстановку цвета в style.scss:
item {
  @include apply-background-image("./../assets/svg/item.svg", $main-color);
}
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы