Система значков 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"