angular - 带有 angular-cli 的 SVG 图标系统

Question

我有一个通过 angular-cli 创建的 angular2 项目。在 webpack 中有一个加载器来加载 svg sprite 并从 svgs 列表中生成该 sprite。但是，当 angular-cli 不允许我更改 webpack.config 时，我如何在当前项目中使用此功能？

谢谢。

Answer 1

使用svg 精灵

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"