diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index 40f28452..cd70109c 100644 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -27,3 +27,17 @@ jobs: - name: Lint run: npm run lint + + - name: Optimize SVGs + run: | + npm run optimize + if git diff --quiet; then + echo "All SVGs are optimized ✔︎" + else + echo "The following SVGs are not optimized:" + echo + git diff --name-only + echo + echo "Please run `npm run optimize` and commit the changes" + exit 1 + fi diff --git a/bin/build.sh b/bin/build.sh index 4a4ad71a..d38f9a26 100755 --- a/bin/build.sh +++ b/bin/build.sh @@ -1,8 +1,5 @@ #!/bin/bash -# Process SVG files -# npx babel-node bin/process-svgs.js - # Create dist directory npx rimraf dist mkdir dist diff --git a/bin/process-svg.js b/bin/optimize-svg.js similarity index 62% rename from bin/process-svg.js rename to bin/optimize-svg.js index b33050f5..6ae11917 100644 --- a/bin/process-svg.js +++ b/bin/optimize-svg.js @@ -1,32 +1,24 @@ import Svgo from 'svgo'; import cheerio from 'cheerio'; -import { format } from 'prettier'; import DEFAULT_ATTRS from '../src/default-attrs.json'; /** - * Process SVG string. + * Optimize SVG string. * @param {string} svg - An SVG string. * @returns {Promise} */ -function processSvg(svg) { - return ( - optimize(svg) - .then(setAttrs) - .then(format) - // remove semicolon inserted by prettier - // because prettier thinks it's formatting JSX not HTML - .then(svg => svg.replace(/;/g, '')) - ); +function optimizeSvg(svg) { + return svgo(svg).then(setAttrs); } /** - * Optimize SVG with `svgo`. + * Run SVGO on SVG string. * @param {string} svg - An SVG string. * @returns {Promise} */ -function optimize(svg) { - const svgo = new Svgo({ +function svgo(svg) { + const s = new Svgo({ plugins: [ { convertShapeToPath: false }, { mergePaths: false }, @@ -36,7 +28,7 @@ function optimize(svg) { }); return new Promise(resolve => { - svgo.optimize(svg, ({ data }) => resolve(data)); + s.optimize(svg, ({ data }) => resolve(data)); }); } @@ -55,4 +47,4 @@ function setAttrs(svg) { return $('body').html(); } -export default processSvg; +export default optimizeSvg; diff --git a/bin/process-svgs.js b/bin/optimize-svgs.js similarity index 72% rename from bin/process-svgs.js rename to bin/optimize-svgs.js index 455ceff3..919e83c0 100644 --- a/bin/process-svgs.js +++ b/bin/optimize-svgs.js @@ -1,17 +1,17 @@ import fs from 'fs'; import path from 'path'; -import processSvg from './process-svg'; +import optimizeSvg from './optimize-svg'; const IN_DIR = path.resolve(__dirname, '../icons'); -console.log(`Processing SVGs in ${IN_DIR}...`); +console.log(`Optimizing SVGs in ${IN_DIR}...`); fs.readdirSync(IN_DIR) .filter(file => path.extname(file) === '.svg') .forEach(svgFile => { const svg = fs.readFileSync(path.join(IN_DIR, svgFile)); - processSvg(svg).then(svg => + optimizeSvg(svg).then(svg => fs.writeFileSync(path.join(IN_DIR, svgFile), svg), ); }); diff --git a/package.json b/package.json index 0bacadad..d8fa6804 100644 --- a/package.json +++ b/package.json @@ -20,6 +20,7 @@ "test:coverage": "jest --coverage", "lint": "eslint .", "format": "prettier --write .", + "optimize-svgs": "babel-node bin/optimize-svgs.js", "release": "yarn build && changeset publish" }, "jest": {