Система значков SVG с угловым-cli

У меня есть проект angular2, который был создан через angular-cli. В webpack есть загрузчик для загрузки спрайта svg, а также для генерации этого спрайта из списка svgs. Но как я могу использовать эту функциональность в моем текущем проекте, когда angular-cli не позволяет мне изменять webpack.конфиг?

спасибо.

12
angular angular-cli svg svg-sprite typescript

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"
25