带角度cli的SVG图标系统

Question

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

谢谢.

Answer 1

使用svg-sprite

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

把你的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"