kocherman, спасибо за детальный разбор, не знал про такое.
То есть, как я понял, например, вставлять SVG в html напрямую как и как -код нерационально?
Лучше написать скрипт, который будет appendChild( ) этот кусок SVG-кода прямо из .js-файла, в зависимости от размера экрана? В чем тогда разница? Если я правильно понял что вы имеете в виду, конечно.
Допустим, для иконок соцсетей, мелких штук можно использовать FontAwesome. Но как быть с чем-то покрупнее. Разве не удобнее манипулировать SVG-элементом прямо из HTML при помощи CSS, как вот в этом примере: https://jsfiddle.net/rbovp93a/ Иначе как с этим работать?
kocherman, не знал об этом, спасибо за информацию. А как тогда лучше тогда подключать SVG?
И что лучше использовать, например, для иконок соцсетей в качестве альтернативы? Font Awesome, png?
Спасибо за ссылки и наводку в какую сторону копать. Во второй ссылке есть интересные фишки, но основная документация всё же более понятна, во всяком случае для моего уровня. Как дополнительный материал самый раз.
Решил вопрос с помощью:
1. CopyWebpackPlugin, его настройки (во время плясок с бубном подобрал нужный паттерн, чтобы не тащил в /dist ненужные папки и файлы),
2. Все это в связке с file-loader'ом - без него в background-image невозможно было прицепить картинку, плюс надо было указать правильный context: , чтобы опять же не тащить лишние папки и получить правильный путь.
3. Отдельной точки входа для scss.
То есть, как я понял, например, вставлять SVG в html напрямую как и как -код нерационально?
Лучше написать скрипт, который будет
appendChild( )
этот кусок SVG-кода прямо из .js-файла, в зависимости от размера экрана? В чем тогда разница? Если я правильно понял что вы имеете в виду, конечно.Допустим, для иконок соцсетей, мелких штук можно использовать FontAwesome. Но как быть с чем-то покрупнее. Разве не удобнее манипулировать SVG-элементом прямо из HTML при помощи CSS, как вот в этом примере: https://jsfiddle.net/rbovp93a/ Иначе как с этим работать?