web-dev-qa-db-ja.com

angular-cliを備えたSVGアイコンシステム

Angular-cliを使用して作成されたangular2プロジェクトがあります。 webpackには、svgスプライトをロードし、svgのリストからそのスプライトを生成するローダーがあります。しかし、angular-cliでwebpack.configを変更できない場合、現在のプロジェクトでこの機能を使用するにはどうすればよいですか？

ありがとう。

angularsvgtypescriptangular-clisvg-sprite
15
Igor JS

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を使用してスクリプトを実行します

オプション：ビルドスクリプトを作成する

これをスクリプトに追加して、1つのステップでビルドします

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