Update to a more modern SVG sprite compiler #27
Conversation
|
Tested on an ARM64 arch |
| assets/ | ||
| sass/ |
There was a problem hiding this comment.
These are generated when testing, but should be ignored
| @@ -6,7 +6,7 @@ const replace = require("gulp-replace"); | |||
| const sass = require("gulp-sass")(require("sass-embedded")); | |||
| const sourcemaps = require("gulp-sourcemaps"); | |||
| const del = require("del"); | |||
| const svgSprite = require("gulp-svg-sprite"); | |||
There was a problem hiding this comment.
Use the new sprite builder
| const config = { | ||
| shape: { | ||
| dimension: { | ||
| // Set maximum dimensions | ||
| maxWidth: settings.sprite.width, | ||
| maxHeight: settings.sprite.width, | ||
| }, | ||
| id: { | ||
| separator: settings.sprite.separator, | ||
| }, | ||
| spacing: { | ||
| // Add padding | ||
| padding: 0, | ||
| }, | ||
| }, | ||
| mode: { | ||
| symbol: true, // Activate the «symbol» mode | ||
| }, | ||
| }; | ||
|
|
There was a problem hiding this comment.
This config does not apply to the new package. As far as I can tell, this is not necessary as long as we continue to use 24x24 SVGs with height, width, and viewBox set properly.
| .on("error", handleError) | ||
| .pipe(dest(`${paths.dist.img}`)); | ||
| } | ||
|
|
||
| function renameSprite() { | ||
| return src(`${paths.dist.img}/symbol/svg/sprite.symbol.svg`.replaceAll("//", "/"), { | ||
| return src(`${paths.dist.img}/usa-icons.svg`.replaceAll("//", "/"), { |
There was a problem hiding this comment.
Point to the new outputted file
| "postcss": "^8.4.8", | ||
| "postcss-csso": "^5.0.1", | ||
| "sass-embedded": "^1.49.9" | ||
| "autoprefixer": "10.4.7", |
There was a problem hiding this comment.
Update autoprefixer
| "gulp-postcss": "9.0.1", | ||
| "gulp-rename": "2.0.0", | ||
| "gulp-replace": "1.1.3", | ||
| "gulp-sass": "5.1.0", |
There was a problem hiding this comment.
Update gulp-sass
| "gulp-svgstore": "9.0.0", | ||
| "postcss": "8.4.8", | ||
| "postcss-csso": "5.0.1", | ||
| "sass-embedded": "1.50.1" |
There was a problem hiding this comment.
Update sass-embedded
| "devDependencies": { | ||
| "@uswds/uswds": "^3.0.0", | ||
| "uswds": "^2.13.3" |
There was a problem hiding this comment.
Using USWDS 2.x and 3.x here are testing dependencies
|
Well done. Thank you! 👏 🙌 |
Updating to
gulp-svgstore. Notes in the comments