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

Question

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

Благодарю.

Answer 1

Используйте svg-sprite

1. npm install --save-dev svg-sprite

2. Положите ваши SVG в 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"