ระบบไอคอน SVG พร้อม angular-cli

ฉันมีโปรเจกต์ Angular2 ที่สร้างขึ้นผ่าน angular-cli ใน webpack มีตัวโหลดเพื่อโหลด svg sprite และยังสามารถสร้าง sprite นั้นจากรายการของ svg ได้ แต่ฉันจะใช้ฟังก์ชันนี้ในโปรเจกต์ปัจจุบันของฉันได้อย่างไรเมื่อ angular-cli ไม่อนุญาตให้ฉันเปลี่ยน webpack.config?

ขอบคุณ

คำตอบ #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"