带有 angular-cli 的 SVG 图标系统 [英] SVG icon system with angular-cli

问题描述

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

I have an angular2 project which was created via angular-cli. In webpack there is a loader to load the svg sprite and also to generate that sprite from list of svgs. But how do I can use this functionality in my current project when angular-cli doesn't allow me to change webpack.config?

谢谢.

推荐答案

使用 svg-sprite

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

2.把你的 svgs 放在 src/svgs

3.将 sprite-config.json 添加到您的项目根目录

Use svg-sprite

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

2. Put your svgs in src/svgs

3. Add sprite-config.json to your project root

{
    "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

5. Add @import to your main styles.scss

@import './sprites/sprite';

6.使用 npm run sprites

运行脚本

可选:创建构建脚本

将此添加到您的脚本中以一步构建

6. Run script using npm run sprites

Optional: create a build script

Add this to your scripts to build in one step

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

这篇关于带有 angular-cli 的 SVG 图标系统的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！