Система значков SVG с угловым-cli
У меня есть проект angular2, который был создан через angular-cli. В webpack есть загрузчик для загрузки спрайта svg, а также для генерации этого спрайта из списка svgs. Но как я могу использовать эту функциональность в моем текущем проекте, когда angular-cli не позволяет мне изменять webpack.конфиг?
спасибо.
1 ответов
использовать svg-sprite
1. npm install --save-dev svg-sprite
2. Поместите svgs в src/svgs
3. Добавить sprite-config.json
к вашему корню проекта
{
"dest": "src/",
"mode": {
"css": {
"dest": "sprites",
"render": {
"scss": {
"dest": "_sprite.scss"
}
}
}
}
}
4. Добавьте скрипт в package.json
"sprites": "svg-sprite --config sprite-config.json src/svgs/*.svg"
5. Добавить @import
к вашему главному styles.scss
@import './sprites/sprite';
6. Запустите скрипт с помощью npm run sprites
необязательно: создайте скрипт сборки
добавить в свои скрипты для сборки в одной шаг
"start": "npm run sprites && ng serve",
"build": "npm run sprites && ng build --prod"