Система значков SVG с angular -cli

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

Спасибо.

Ответы

Ответ 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. Добавьте script в package.json

"sprites": "svg-sprite --config sprite-config.json src/svgs/*.svg"

5. Добавьте @import к основному styles.scss

@import './sprites/sprite';

6. Запустите script с помощью npm run sprites

Дополнительно: создайте сборку script

Добавьте это в свои скрипты, чтобы построить за один шаг

"start": "npm run sprites && ng serve",
"build": "npm run sprites && ng build --prod"