带有 angular-cli 的 SVG 图标系统
SVG icon system with angular-cli
我有一个 angular2 项目,它是通过 angular-cli 创建的。在 webpack 中有一个加载器来加载 svg sprite 并从 svgs 列表中生成该 sprite。但是,当 angular-cli 不允许我更改 webpack.config 时,如何在当前项目中使用此功能?
谢谢。
使用svg-sprite
1。 npm install --save-dev svg-sprite
2。把你的 svgs 放在 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"
我有一个 angular2 项目,它是通过 angular-cli 创建的。在 webpack 中有一个加载器来加载 svg sprite 并从 svgs 列表中生成该 sprite。但是,当 angular-cli 不允许我更改 webpack.config 时,如何在当前项目中使用此功能?
谢谢。
使用svg-sprite
1。 npm install --save-dev svg-sprite
2。把你的 svgs 放在 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"