Update optimize svg script

.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

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

bin/process-svg.js → 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<string>}
  */
-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<string>}
  */
-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;

bin/process-svgs.js → 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),
     );
   });

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": {