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"