SVG icon system with angular-cli SVG icon system with angular-cli typescript typescript

SVG icon system with angular-cli


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. Add a script to package.json

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

5. Add @import to your main styles.scss

@import './sprites/sprite';

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"