npm i -g svg2sprite-cli
npm install
npm run svgonpm run svg2sprite
./src/assets/images/
./icons-src/
./icons-optimized/
./symbol-defs.svg
./.svgo.yml
./package.json
| multipass: true | |
| plugins: | |
| - addAttributesToSVGElement: false | |
| - addClassesToSVGElement: false | |
| - cleanupAttrs: true | |
| - cleanupEnableBackground: true | |
| - cleanupIDs: true | |
| - cleanupListOfValues: true | |
| - cleanupNumericValues: | |
| floatPrecision: 2 | |
| - collapseGroups: true | |
| - convertColors: true | |
| - convertPathData: true | |
| - convertShapeToPath: true | |
| - convertStyleToAttrs: true | |
| - convertTransform: true | |
| - mergePaths: true | |
| - minifyStyles: true | |
| - moveElemsAttrsToGroup: true | |
| - moveGroupAttrsToElems: true | |
| - removeAttrs: true | |
| - removeComments: true | |
| - removeDesc: true | |
| - removeDimensions: true | |
| - removeDoctype: true | |
| - removeEditorsNSData: true | |
| - removeElementsByAttr: true | |
| - removeEmptyAttrs: true | |
| - removeEmptyContainers: true | |
| - removeEmptyText: true | |
| - removeHiddenElems: true | |
| - removeMetadata: true | |
| - removeNonInheritableGroupAttrs: true | |
| - removeRasterImages: true | |
| - removeStyleElement: true | |
| - removeTitle: true | |
| - removeUnknownsAndDefaults: true | |
| - removeUnusedNS: true | |
| - removeUselessDefs: true | |
| - removeUselessStrokeAndFill: true | |
| - removeViewBox: true | |
| - removeXMLNS: false | |
| - removeXMLProcInst: true | |
| - sortAttrs: true | |
| - transformsWithOnePath: true | |
| js2svg: | |
| pretty: true | |
| indent: ' ' |
| { | |
| "name": "svg-tool", | |
| "scripts": { | |
| "svg2sprite": "svg2sprite ./src/assets/images/icons-optimized/ ./src/assets/images/symbol-defs.svg", | |
| "svgo": "./node_modules/svgo/bin/svgo -f ./src/assets/images/icons-src -o ./src/assets/images/icons-optimized --config .svgo.yml" | |
| }, | |
| "devDependencies": { | |
| "svg2sprite-cli": "^2.0.1", | |
| "svgo": "^1.3.0" | |
| } | |
| } |
| <div> | |
| <svg> | |
| <use [attr.xlink:href]="'assets/images/symbol-defs.svg#' + 'icon-file-name-without-extension'" style="fill: currentColor;"></use> | |
| </svg> | |
| </div> |