سیستم آیکون SVG با angular-cli

من یک پروژه Angular2 دارم که از طریق angular-cli ایجاد شده است. در webpack یک loader برای لود کردن svg sprite و همچنین برای تولید آن sprite از لیست svg ها وجود دارد. اما چگونه میتوانم از این قابلیت در پروژه فعلی خود استفاده کنم در حالی که angular-cli اجازه نمیدهد webpack.config را تغییر دهم؟

متشکرم.

پاسخ شماره ۱

استفاده از svg-sprite

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

۲. فایلهای SVG خود را در src/svgs قرار دهید

۳. sprite-config.json را به ریشه پروژه خود اضافه کنید

{
    "dest": "src/",
    "mode": {
        "css": {
            "dest": "sprites",
            "render": {
                "scss": {
                    "dest": "_sprite.scss"
                }
            }
        }
    }
}

۴. یک اسکریپت به package.json اضافه کنید

"sprites": "svg-sprite --config sprite-config.json src/svgs/*.svg"

۵. @import را به فایل اصلی styles.scss خود اضافه کنید

@import './sprites/sprite';

۶. اجرای اسکریپت با استفاده از npm run sprites

اختیاری: یک اسکریپت ساخت ایجاد کنید

این را به اسکریپتهای خود اضافه کنید تا در یک مرحله ساخته شود

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